special-forms 18.0.1 → 20.0.0-SNAPSHOT

package/fesm2022/special-forms.mjs

@@ -1,42 +1,38 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, Injectable, Directive, NgModule } from '@angular/core';
+import { Pipe, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, inject, Injectable, Directive, NgModule } from '@angular/core';
 import { debounceTime } from 'rxjs/operators';
-import * as i4 from '@angular/material/autocomplete';
+import * as i2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { Subscription } from 'rxjs';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3 from '@angular/common';
+import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i6 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, FormsModule, FormGroup, FormArray, Validators } from '@angular/forms';
-import * as i8 from '@angular/material/button';
+import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
 import * as i1$1 from '@ngneat/input-mask';
 import { InputMaskModule, createMask } from '@ngneat/input-mask';
-import * as i3$1 from '@angular/material/select';
+import * as i2$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i2$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i6$1 from '@angular/material/chips';
+import * as i4$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i2$1 from '@angular/material/checkbox';
+import * as i2$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$3 from '@angular/cdk/text-field';
-import * as i2$2 from '@ngx-dropzone/cdk';
-import { FileInputValidators, DropzoneCdkModule } from '@ngx-dropzone/cdk';
-import * as i4$1 from '@ngx-dropzone/material';
-import { DropzoneMaterialModule } from '@ngx-dropzone/material';
+import * as i2$4 from '@angular/cdk/text-field';
+import { FileInputValidators, FileInputDirective } from '@ngx-dropzone/cdk';
+import { MatDropzone } from '@ngx-dropzone/material';
 import { MatCardModule } from '@angular/material/card';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i2$3 from 'ngx-editor';
+import * as i2$5 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 class ErrorMessagePipe {
     transform(errorsObj, errorMessages, control) {
@@ -48,10 +44,10 @@ class ErrorMessagePipe {
         }
         return message;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorMessagePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorMessagePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: "errorMessage",
@@ -67,14 +63,12 @@ class TextByFunctionPipe {
         else if (value instanceof Object) {
             return value[field];
         }
-        else {
-            return value;
-        }
+        return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextByFunctionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextByFunctionPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'textByFunction', standalone: true }]
         }] });
@@ -87,10 +81,10 @@ class FormControlsListPipe {
             .filter((control) => !control.hidden)
             .map((control) => control);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsListPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormControlsListPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'controlsList', standalone: true }]
         }] });
@@ -132,12 +126,12 @@ class SpecialAutocompleteComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n    [id]=\"control.elementId\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\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      @for (\r\n        option of settings?.source | async;\r\n        track option[settings.fieldId]\r\n      ) {\r\n        <mat-option [value]=\"option\">\r\n          <div class=\"flex items-center\">\r\n            @if (settings.fieldImage) {\r\n              <img\r\n                class=\"w-8 pr-2\"\r\n                alt=\"\"\r\n                [src]=\"option | textByFunction: settings.fieldImage\"\r\n              />\r\n            }\r\n            <span>\r\n              {{ option | textByFunction: settings.fieldName }}\r\n            </span>\r\n          </div>\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (settings.icon) {\r\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n        <mat-icon>\r\n          {{ settings.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], 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: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <mat-form-field\n    class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\n    [id]=\"control.elementId\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [required]=\"control.required\"\n      [readonly]=\"control.readOnly\"\n      [placeholder]=\"control.placeholder\"\n      matInput\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [displayWith]=\"configValue\"\n      (optionSelected)=\"optionSelected($event)\"\n    >\n      @for (\n        option of settings?.source | async;\n        track option[settings.fieldId]\n      ) {\n        <mat-option [value]=\"option\">\n          <div class=\"flex items-center\">\n            @if (settings.fieldImage) {\n              <img\n                class=\"w-8 pr-2\"\n                alt=\"\"\n                [src]=\"option | textByFunction: settings.fieldImage\"\n              />\n            }\n            <span>\n              {{ option | textByFunction: settings.fieldName }}\n            </span>\n          </div>\n        </mat-option>\n      }\n    </mat-autocomplete>\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    @if (settings.icon) {\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n        <mat-icon>\n          {{ settings.icon }}\n        </mat-icon>\n      </button>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n  </mat-form-field>\n}\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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatInputModule,
                         CommonModule,
                         MatAutocompleteModule,
@@ -146,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MatButtonModule,
                         ErrorMessagePipe,
                         TextByFunctionPipe,
-                    ], template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n    [id]=\"control.elementId\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\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      @for (\r\n        option of settings?.source | async;\r\n        track option[settings.fieldId]\r\n      ) {\r\n        <mat-option [value]=\"option\">\r\n          <div class=\"flex items-center\">\r\n            @if (settings.fieldImage) {\r\n              <img\r\n                class=\"w-8 pr-2\"\r\n                alt=\"\"\r\n                [src]=\"option | textByFunction: settings.fieldImage\"\r\n              />\r\n            }\r\n            <span>\r\n              {{ option | textByFunction: settings.fieldName }}\r\n            </span>\r\n          </div>\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (settings.icon) {\r\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n        <mat-icon>\r\n          {{ settings.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <mat-form-field\n    class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\n    [id]=\"control.elementId\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [required]=\"control.required\"\n      [readonly]=\"control.readOnly\"\n      [placeholder]=\"control.placeholder\"\n      matInput\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [displayWith]=\"configValue\"\n      (optionSelected)=\"optionSelected($event)\"\n    >\n      @for (\n        option of settings?.source | async;\n        track option[settings.fieldId]\n      ) {\n        <mat-option [value]=\"option\">\n          <div class=\"flex items-center\">\n            @if (settings.fieldImage) {\n              <img\n                class=\"w-8 pr-2\"\n                alt=\"\"\n                [src]=\"option | textByFunction: settings.fieldImage\"\n              />\n            }\n            <span>\n              {{ option | textByFunction: settings.fieldName }}\n            </span>\n          </div>\n        </mat-option>\n      }\n    </mat-autocomplete>\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    @if (settings.icon) {\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n        <mat-icon>\n          {{ settings.icon }}\n        </mat-icon>\n      </button>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n  </mat-form-field>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -173,12 +167,12 @@ class SpecialInputComponent {
             event.stopPropagation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <input\r\n      matInput\r\n      (blur)=\"onBlurAction()\"\r\n      (keydown.enter)=\"onEnterClick()\"\r\n      [inputMask]=\"settings?.mask\"\r\n      autocomplete=\"off\"\r\n      [type]=\"settings?.type || 'text'\"\r\n      [readonly]=\"control.readOnly\"\r\n      [required]=\"control.required\"\r\n      [placeholder]=\"control.placeholder\"\r\n      [formControl]=\"control\"\r\n    />\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    @if (settings.icon) {\r\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n        <mat-icon>\r\n          {{ settings.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$1.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: CommonModule }, { 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: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\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      [maxlength]=\"settings?.withMaxlength ? control.length : null\"\n      [formControl]=\"control\"\n    />\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    @if (settings.icon) {\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n        <mat-icon>\n          {{ settings.icon }}\n        </mat-icon>\n      </button>\n    }\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n    @if (settings.withCounter && control.length) {\n      <mat-hint align=\"end\"\n        >{{ control.value?.length ?? 0 }} / {{ control.length }}</mat-hint\n      >\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$1.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: CommonModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         InputMaskModule,
                         CommonModule,
                         MatInputModule,
@@ -186,7 +180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         ReactiveFormsModule,
                         MatButtonModule,
                         ErrorMessagePipe,
-                    ], template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <input\r\n      matInput\r\n      (blur)=\"onBlurAction()\"\r\n      (keydown.enter)=\"onEnterClick()\"\r\n      [inputMask]=\"settings?.mask\"\r\n      autocomplete=\"off\"\r\n      [type]=\"settings?.type || 'text'\"\r\n      [readonly]=\"control.readOnly\"\r\n      [required]=\"control.required\"\r\n      [placeholder]=\"control.placeholder\"\r\n      [formControl]=\"control\"\r\n    />\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    @if (settings.icon) {\r\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n        <mat-icon>\r\n          {{ settings.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\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      [maxlength]=\"settings?.withMaxlength ? control.length : null\"\n      [formControl]=\"control\"\n    />\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    @if (settings.icon) {\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n        <mat-icon>\n          {{ settings.icon }}\n        </mat-icon>\n      </button>\n    }\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n    @if (settings.withCounter && control.length) {\n      <mat-hint align=\"end\"\n        >{{ control.value?.length ?? 0 }} / {{ control.length }}</mat-hint\n      >\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -205,12 +199,12 @@ class SpecialDropdownComponent {
         if (this.settings.onSelect)
             this.settings.onSelect(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <mat-form-field\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    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\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      @if (!control.required) {\r\n        <mat-option [value]=\"null\">\r\n          {{ control.placeholder || settings.notSelectedText }}\r\n        </mat-option>\r\n      }\r\n      @for (item of settings.source | async; track item[settings.fieldId]) {\r\n        <mat-option [value]=\"item[settings.fieldId]\">\r\n          {{ item | textByFunction: settings.fieldName }}\r\n        </mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (settings.icon) {\r\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n        <mat-icon>\r\n          {{ settings.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.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$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <mat-select\n      [formControl]=\"control\"\n      [required]=\"control.required\"\n      (selectionChange)=\"optionSelected($event.value)\"\n      [placeholder]=\"control.placeholder\"\n    >\n      @if (!control.required) {\n        <mat-option [value]=\"null\">\n          {{ control.placeholder || settings.notSelectedText }}\n        </mat-option>\n      }\n      @for (item of settings.source | async; track item[settings.fieldId]) {\n        <mat-option [value]=\"item[settings.fieldId]\">\n          {{ item | textByFunction: settings.fieldName }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (settings.icon) {\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n        <mat-icon>\n          {{ settings.icon }}\n        </mat-icon>\n      </button>\n    }\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n  </mat-form-field>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         MatSelectModule,
                         ReactiveFormsModule,
@@ -218,7 +212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MatIconModule,
                         MatButtonModule,
                         TextByFunctionPipe,
-                    ], template: "@if (control && !control.hidden) {\r\n  <mat-form-field\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    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\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      @if (!control.required) {\r\n        <mat-option [value]=\"null\">\r\n          {{ control.placeholder || settings.notSelectedText }}\r\n        </mat-option>\r\n      }\r\n      @for (item of settings.source | async; track item[settings.fieldId]) {\r\n        <mat-option [value]=\"item[settings.fieldId]\">\r\n          {{ item | textByFunction: settings.fieldName }}\r\n        </mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (settings.icon) {\r\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n        <mat-icon>\r\n          {{ settings.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <mat-select\n      [formControl]=\"control\"\n      [required]=\"control.required\"\n      (selectionChange)=\"optionSelected($event.value)\"\n      [placeholder]=\"control.placeholder\"\n    >\n      @if (!control.required) {\n        <mat-option [value]=\"null\">\n          {{ control.placeholder || settings.notSelectedText }}\n        </mat-option>\n      }\n      @for (item of settings.source | async; track item[settings.fieldId]) {\n        <mat-option [value]=\"item[settings.fieldId]\">\n          {{ item | textByFunction: settings.fieldName }}\n        </mat-option>\n      }\n    </mat-select>\n    @if (settings.icon) {\n      <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n        <mat-icon>\n          {{ settings.icon }}\n        </mat-icon>\n      </button>\n    }\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n  </mat-form-field>\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -232,12 +226,12 @@ class SpecialDatepickerComponent {
         return this.settings?.startAt || new Date();
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <input\r\n      matInput\r\n      autocomplete=\"off\"\r\n      [readonly]=\"control.readOnly\"\r\n      [matDatepicker]=\"picker\"\r\n      [required]=\"control.required\"\r\n      [placeholder]=\"control.placeholder\"\r\n      [formControl]=\"control\"\r\n    />\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\r\n    </mat-datepicker>\r\n    <mat-hint>\r\n      {{ control.tooltip }}\r\n    </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", 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$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\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}\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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatInputModule,
                         MatDatepickerModule,
                         CommonModule,
@@ -246,7 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MatButtonModule,
                         ErrorMessagePipe,
                         MatNativeDateModule,
-                    ], template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <input\r\n      matInput\r\n      autocomplete=\"off\"\r\n      [readonly]=\"control.readOnly\"\r\n      [matDatepicker]=\"picker\"\r\n      [required]=\"control.required\"\r\n      [placeholder]=\"control.placeholder\"\r\n      [formControl]=\"control\"\r\n    />\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\r\n    </mat-datepicker>\r\n    <mat-hint>\r\n      {{ control.tooltip }}\r\n    </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", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\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}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -307,12 +301,12 @@ class SpecialMultipleAutocompleteComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <div\r\n    class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n    [id]=\"control.elementId\"\r\n  >\r\n    <mat-form-field\r\n      class=\"w-full\"\r\n      [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n    >\r\n      @if (control.label) {\r\n        <mat-label>\r\n          {{ control.label }}\r\n        </mat-label>\r\n      }\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        @for (\r\n          option of settings?.source | async;\r\n          track option[settings.fieldId]\r\n        ) {\r\n          <mat-option [value]=\"option\">\r\n            <div class=\"flex items-center\">\r\n              @if (settings.fieldImage) {\r\n                <img\r\n                  class=\"w-8 pr-2\"\r\n                  alt=\"\"\r\n                  [src]=\"option | textByFunction: settings.fieldImage\"\r\n                />\r\n              }\r\n              <span>\r\n                {{ option | textByFunction: settings.fieldName }}\r\n              </span>\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      @if (control.icon) {\r\n        <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n      }\r\n      @if (settings.icon) {\r\n        <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n          <mat-icon>\r\n            {{ settings.icon }}\r\n          </mat-icon>\r\n        </button>\r\n      }\r\n      @if (control.tooltip) {\r\n        <mat-hint>{{ control.tooltip }}</mat-hint>\r\n      }\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      @for (chip of control.value; track chip[settings.fieldId]) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"remove(chip)\">\r\n          <div class=\"flex items-center\">\r\n            @if (settings.fieldImage) {\r\n              <img\r\n                class=\"w-8 pr-2\"\r\n                alt=\"\"\r\n                [src]=\"chip | textByFunction: settings.fieldImage\"\r\n              />\r\n            }\r\n            {{ chip | textByFunction: settings.fieldName }}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </div>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-listbox>\r\n  </div>\r\n}\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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], 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: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <div\n    class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\n    [id]=\"control.elementId\"\n  >\n    <mat-form-field\n      class=\"w-full\"\n      [appearance]=\"control.label ? 'outline' : 'fill'\"\n    >\n      @if (control.label) {\n        <mat-label>\n          {{ control.label }}\n        </mat-label>\n      }\n      <input\n        type=\"text\"\n        autocomplete=\"off\"\n        [required]=\"control.required && !control.value?.length\"\n        [readonly]=\"control.readOnly\"\n        [placeholder]=\"control.placeholder\"\n        matInput\n        [formControl]=\"internalControl\"\n        [matAutocomplete]=\"auto\"\n      />\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        [displayWith]=\"configValue\"\n        (optionSelected)=\"optionSelected($event)\"\n      >\n        @for (\n          option of settings?.source | async;\n          track option[settings.fieldId]\n        ) {\n          <mat-option [value]=\"option\">\n            <div class=\"flex items-center\">\n              @if (settings.fieldImage) {\n                <img\n                  class=\"w-8 pr-2\"\n                  alt=\"\"\n                  [src]=\"option | textByFunction: settings.fieldImage\"\n                />\n              }\n              <span>\n                {{ option | textByFunction: settings.fieldName }}\n              </span>\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (control.icon) {\n        <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n      }\n      @if (settings.icon) {\n        <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n          <mat-icon>\n            {{ settings.icon }}\n          </mat-icon>\n        </button>\n      }\n      @if (control.tooltip) {\n        <mat-hint>{{ control.tooltip }}</mat-hint>\n      }\n      <mat-error>\n        {{ control.errors | errorMessage: control.errorMessages }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-chip-listbox>\n      @for (chip of control.value; track chip[settings.fieldId]) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"remove(chip)\">\n          <div class=\"flex items-center\">\n            @if (settings.fieldImage) {\n              <img\n                class=\"w-8 pr-2\"\n                alt=\"\"\n                [src]=\"chip | textByFunction: settings.fieldImage\"\n              />\n            }\n            {{ chip | textByFunction: settings.fieldName }}\n            <mat-icon matChipRemove>cancel</mat-icon>\n          </div>\n        </mat-chip-row>\n      }\n    </mat-chip-listbox>\n  </div>\n}\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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatInputModule,
                         CommonModule,
                         MatAutocompleteModule,
@@ -322,7 +316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         ErrorMessagePipe,
                         TextByFunctionPipe,
                         MatChipsModule,
-                    ], template: "@if (control && !control.hidden) {\r\n  <div\r\n    class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n    [id]=\"control.elementId\"\r\n  >\r\n    <mat-form-field\r\n      class=\"w-full\"\r\n      [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n    >\r\n      @if (control.label) {\r\n        <mat-label>\r\n          {{ control.label }}\r\n        </mat-label>\r\n      }\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        @for (\r\n          option of settings?.source | async;\r\n          track option[settings.fieldId]\r\n        ) {\r\n          <mat-option [value]=\"option\">\r\n            <div class=\"flex items-center\">\r\n              @if (settings.fieldImage) {\r\n                <img\r\n                  class=\"w-8 pr-2\"\r\n                  alt=\"\"\r\n                  [src]=\"option | textByFunction: settings.fieldImage\"\r\n                />\r\n              }\r\n              <span>\r\n                {{ option | textByFunction: settings.fieldName }}\r\n              </span>\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      @if (control.icon) {\r\n        <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n      }\r\n      @if (settings.icon) {\r\n        <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n          <mat-icon>\r\n            {{ settings.icon }}\r\n          </mat-icon>\r\n        </button>\r\n      }\r\n      @if (control.tooltip) {\r\n        <mat-hint>{{ control.tooltip }}</mat-hint>\r\n      }\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      @for (chip of control.value; track chip[settings.fieldId]) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"remove(chip)\">\r\n          <div class=\"flex items-center\">\r\n            @if (settings.fieldImage) {\r\n              <img\r\n                class=\"w-8 pr-2\"\r\n                alt=\"\"\r\n                [src]=\"chip | textByFunction: settings.fieldImage\"\r\n              />\r\n            }\r\n            {{ chip | textByFunction: settings.fieldName }}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </div>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-listbox>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <div\n    class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\n    [id]=\"control.elementId\"\n  >\n    <mat-form-field\n      class=\"w-full\"\n      [appearance]=\"control.label ? 'outline' : 'fill'\"\n    >\n      @if (control.label) {\n        <mat-label>\n          {{ control.label }}\n        </mat-label>\n      }\n      <input\n        type=\"text\"\n        autocomplete=\"off\"\n        [required]=\"control.required && !control.value?.length\"\n        [readonly]=\"control.readOnly\"\n        [placeholder]=\"control.placeholder\"\n        matInput\n        [formControl]=\"internalControl\"\n        [matAutocomplete]=\"auto\"\n      />\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        [displayWith]=\"configValue\"\n        (optionSelected)=\"optionSelected($event)\"\n      >\n        @for (\n          option of settings?.source | async;\n          track option[settings.fieldId]\n        ) {\n          <mat-option [value]=\"option\">\n            <div class=\"flex items-center\">\n              @if (settings.fieldImage) {\n                <img\n                  class=\"w-8 pr-2\"\n                  alt=\"\"\n                  [src]=\"option | textByFunction: settings.fieldImage\"\n                />\n              }\n              <span>\n                {{ option | textByFunction: settings.fieldName }}\n              </span>\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (control.icon) {\n        <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n      }\n      @if (settings.icon) {\n        <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\n          <mat-icon>\n            {{ settings.icon }}\n          </mat-icon>\n        </button>\n      }\n      @if (control.tooltip) {\n        <mat-hint>{{ control.tooltip }}</mat-hint>\n      }\n      <mat-error>\n        {{ control.errors | errorMessage: control.errorMessages }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-chip-listbox>\n      @for (chip of control.value; track chip[settings.fieldId]) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"remove(chip)\">\n          <div class=\"flex items-center\">\n            @if (settings.fieldImage) {\n              <img\n                class=\"w-8 pr-2\"\n                alt=\"\"\n                [src]=\"chip | textByFunction: settings.fieldImage\"\n              />\n            }\n            {{ chip | textByFunction: settings.fieldName }}\n            <mat-icon matChipRemove>cancel</mat-icon>\n          </div>\n        </mat-chip-row>\n      }\n    </mat-chip-listbox>\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -333,12 +327,12 @@ class SpecialCheckboxComponent {
     }
     constructor() { }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <div\r\n    [id]=\"control.elementId\"\r\n    class=\"special-checkbox w-full mb-3 flex flex-col {{\r\n      control.styleClasses\r\n    }}\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <mat-checkbox\r\n      [required]=\"control.required\"\r\n      [ngModel]=\"control.value\"\r\n      (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\r\n      [indeterminate]=\"settings.indeterminate\"\r\n      [labelPosition]=\"settings.labelPosition\"\r\n      [color]=\"settings.color\"\r\n      [disabled]=\"control.disabled\"\r\n    >\r\n      @if (control.icon) {\r\n        <mat-icon matSuffix>{{ control.icon }}</mat-icon>\r\n      }\r\n      {{ control.placeholder }}\r\n    </mat-checkbox>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <div\n    [id]=\"control.elementId\"\n    class=\"special-checkbox w-full mb-3 flex flex-col {{\n      control.styleClasses\n    }}\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <mat-checkbox\n      [required]=\"control.required\"\n      [ngModel]=\"control.value\"\n      (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\n      [indeterminate]=\"settings.indeterminate\"\n      [labelPosition]=\"settings.labelPosition\"\n      [color]=\"settings.color\"\n      [disabled]=\"control.disabled\"\n    >\n      @if (control.icon) {\n        <mat-icon matSuffix>{{ control.icon }}</mat-icon>\n      }\n      {{ control.placeholder }}\n    </mat-checkbox>\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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: "18.2.0", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
                         MatCheckboxModule,
                         CommonModule,
@@ -347,7 +341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         ReactiveFormsModule,
                         MatButtonModule,
                         ErrorMessagePipe,
-                    ], template: "@if (control && !control.hidden) {\r\n  <div\r\n    [id]=\"control.elementId\"\r\n    class=\"special-checkbox w-full mb-3 flex flex-col {{\r\n      control.styleClasses\r\n    }}\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <mat-checkbox\r\n      [required]=\"control.required\"\r\n      [ngModel]=\"control.value\"\r\n      (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\r\n      [indeterminate]=\"settings.indeterminate\"\r\n      [labelPosition]=\"settings.labelPosition\"\r\n      [color]=\"settings.color\"\r\n      [disabled]=\"control.disabled\"\r\n    >\r\n      @if (control.icon) {\r\n        <mat-icon matSuffix>{{ control.icon }}</mat-icon>\r\n      }\r\n      {{ control.placeholder }}\r\n    </mat-checkbox>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <div\n    [id]=\"control.elementId\"\n    class=\"special-checkbox w-full mb-3 flex flex-col {{\n      control.styleClasses\n    }}\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <mat-checkbox\n      [required]=\"control.required\"\n      [ngModel]=\"control.value\"\n      (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\n      [indeterminate]=\"settings.indeterminate\"\n      [labelPosition]=\"settings.labelPosition\"\n      [color]=\"settings.color\"\n      [disabled]=\"control.disabled\"\n    >\n      @if (control.icon) {\n        <mat-icon matSuffix>{{ control.icon }}</mat-icon>\n      }\n      {{ control.placeholder }}\n    </mat-checkbox>\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -358,12 +352,15 @@ class SpecialTextAreaComponent {
         this.onEnter = new EventEmitter();
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <textarea\r\n      cdkTextareaAutosize\r\n      #autosize=\"cdkTextareaAutosize\"\r\n      cdkAutosizeMinRows=\"1\"\r\n      cdkAutosizeMaxRows=\"5\"\r\n      matInput\r\n      (blur)=\"onBlur.emit(control.value)\"\r\n      (keydown.enter)=\"onEnter.emit(control.value)\"\r\n      [readonly]=\"control.readOnly\"\r\n      [required]=\"control.required\"\r\n      [placeholder]=\"control.placeholder\"\r\n      [formControl]=\"control\"\r\n    ></textarea>\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { 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: i3$3.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: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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 }); }
+    get settings() {
+        return this.control.settings;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\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      [readonly]=\"control.readOnly\"\n      [required]=\"control.required\"\n      [placeholder]=\"control.placeholder\"\n      [maxlength]=\"settings?.withMaxlength ? control.length : null\"\n      [formControl]=\"control\"\n    ></textarea>\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n    @if (settings.withCounter && control.length) {\n      <mat-hint align=\"end\"\n        >{{ control.value?.length ?? 0 }} / {{ control.length }}</mat-hint\n      >\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.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: "18.2.0", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         InputMaskModule,
                         CommonModule,
                         MatInputModule,
@@ -371,7 +368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         ReactiveFormsModule,
                         MatButtonModule,
                         ErrorMessagePipe,
-                    ], template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <textarea\r\n      cdkTextareaAutosize\r\n      #autosize=\"cdkTextareaAutosize\"\r\n      cdkAutosizeMinRows=\"1\"\r\n      cdkAutosizeMaxRows=\"5\"\r\n      matInput\r\n      (blur)=\"onBlur.emit(control.value)\"\r\n      (keydown.enter)=\"onEnter.emit(control.value)\"\r\n      [readonly]=\"control.readOnly\"\r\n      [required]=\"control.required\"\r\n      [placeholder]=\"control.placeholder\"\r\n      [formControl]=\"control\"\r\n    ></textarea>\r\n    @if (control.icon) {\r\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\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      [readonly]=\"control.readOnly\"\n      [required]=\"control.required\"\n      [placeholder]=\"control.placeholder\"\n      [maxlength]=\"settings?.withMaxlength ? control.length : null\"\n      [formControl]=\"control\"\n    ></textarea>\n    @if (control.icon) {\n      <mat-icon matPrefix>{{ control.icon }}</mat-icon>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n    @if (settings.withCounter && control.length) {\n      <mat-hint align=\"end\"\n        >{{ control.value?.length ?? 0 }} / {{ control.length }}</mat-hint\n      >\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }], onBlur: [{
@@ -385,13 +382,13 @@ class FileNamePipe {
         if (input instanceof File) {
             return input.name;
         }
-        const url = new URL(input);
+        const url = new URL(input, window.location.origin);
         return url.pathname.substring(url.pathname.lastIndexOf('/') + 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FileNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: FileNamePipe, isStandalone: true, name: "fileName" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: FileNamePipe, isStandalone: true, name: "fileName" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FileNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'fileName', standalone: true }]
         }] });
@@ -408,36 +405,36 @@ class previewImagePipe {
             'svg',
         ];
         this.docFormats = ['doc', 'docx'];
-        this.pdfIcon = `
-  <svg version="1.1" id="_x34_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" width="800px" height="800px" fill="#000000">
-    <g id="SVGRepo_bgCarrier" stroke-width="0"/>
-    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-    <g id="SVGRepo_iconCarrier"> <g> <polygon style="fill:#FFFEFE;" points="475.435,117.825 475.435,512 47.791,512 47.791,0.002 357.613,0.002 412.491,54.881 "/> <rect x="36.565" y="34.295" style="fill:#B43331;" width="205.097" height="91.768"/> <g> <g> <path style="fill:#FFFEFE;" d="M110.133,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.659-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.127-1.432-8.141-1.432H69.652v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.371-2.261,6.031-3.92c1.658-1.658,2.865-3.543,3.769-5.804c0.828-2.186,1.281-4.523,1.281-6.935 C111.413,68.902,110.961,66.565,110.133,64.379z M97.845,77.118c-1.508,1.432-3.618,2.186-6.182,2.186H81.035V63.323h10.628 c2.564,0,4.674,0.754,6.182,2.261c1.432,1.432,2.185,3.392,2.185,5.804C100.031,73.726,99.277,75.686,97.845,77.118z"/> <path style="fill:#FFFEFE;" d="M164.558,75.761c-0.075-2.035-0.15-3.844-0.377-5.503c-0.225-1.659-0.603-3.166-1.131-4.598 c-0.527-1.357-1.206-2.714-2.111-3.92c-2.035-2.94-4.522-5.126-7.312-6.483c-2.864-1.357-6.256-2.035-10.252-2.035H122.42v58.195 h20.956c3.996,0,7.388-0.678,10.252-2.035c2.79-1.357,5.277-3.543,7.312-6.483c0.905-1.206,1.584-2.563,2.111-3.92 c0.528-1.432,0.905-2.94,1.131-4.598c0.227-1.658,0.301-3.468,0.377-5.503c0.075-1.96,0.075-4.146,0.075-6.558 C164.633,79.908,164.633,77.721,164.558,75.761z M153.175,88.2c0,1.734-0.15,3.091-0.302,4.297 c-0.151,1.131-0.376,2.186-0.678,2.94c-0.301,0.829-0.754,1.583-1.281,2.261c-1.885,2.412-4.749,3.543-8.518,3.543h-8.668V63.323 h8.668c3.769,0,6.634,1.206,8.518,3.618c0.528,0.678,0.98,1.357,1.281,2.186c0.302,0.829,0.528,1.809,0.678,3.015 c0.152,1.131,0.302,2.563,0.302,4.221c0.075,1.659,0.075,3.694,0.075,5.955C153.251,84.581,153.251,86.541,153.175,88.2z"/> <path style="fill:#FFFEFE;" d="M213.18,63.323V53.222h-38.37v58.195h11.383V87.823h22.992V77.646h-22.992V63.323H213.18z"/> </g> <g> <path style="fill:#FFFEFE;" d="M110.133,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.659-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.127-1.432-8.141-1.432H69.652v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.371-2.261,6.031-3.92c1.658-1.658,2.865-3.543,3.769-5.804c0.828-2.186,1.281-4.523,1.281-6.935 C111.413,68.902,110.961,66.565,110.133,64.379z M97.845,77.118c-1.508,1.432-3.618,2.186-6.182,2.186H81.035V63.323h10.628 c2.564,0,4.674,0.754,6.182,2.261c1.432,1.432,2.185,3.392,2.185,5.804C100.031,73.726,99.277,75.686,97.845,77.118z"/> </g> </g> <polygon style="opacity:0.08;fill:#040000;" points="475.435,117.825 475.435,512 47.791,512 47.791,419.581 247.706,219.667 259.541,207.832 266.099,201.273 277.029,190.343 289.995,177.377 412.491,54.881 "/> <polygon style="fill:#BBBBBA;" points="475.435,117.836 357.6,117.836 357.6,0 "/> <g> <path style="fill:#B43331;" d="M414.376,370.658c-2.488-4.372-5.88-8.518-10.101-12.287c-3.467-3.166-7.538-6.106-12.137-8.82 c-18.543-10.93-45.003-16.207-80.961-16.207h-3.618c-1.96-1.809-3.996-3.618-6.106-5.503 c-13.644-12.287-24.499-25.63-32.942-40.48c16.583-36.561,24.499-69.126,23.519-96.867c-0.151-4.674-0.83-9.046-2.036-13.117 c-1.808-6.558-4.824-12.363-9.046-17.112c-0.075-0.075-0.075-0.075-0.15-0.151c-6.709-7.538-16.056-11.835-25.555-11.835 c-9.574,0-18.393,4.146-24.802,11.76c-6.331,7.538-9.724,17.866-9.875,30.002c-0.225,18.544,1.282,36.108,4.448,52.315 c0.301,1.282,0.528,2.563,0.829,3.844c3.166,14.7,7.84,28.645,13.871,41.611c-7.086,14.398-14.248,26.836-19.222,35.279 c-3.769,6.408-7.916,13.117-12.213,19.826c-19.373,3.468-35.807,7.689-50.129,12.966c-19.374,7.011-34.903,16.056-46.059,26.836 c-7.238,6.935-12.137,14.323-14.55,22.012c-2.563,7.915-2.411,15.83,0.453,22.916c2.638,6.558,7.387,12.061,13.719,15.83 c1.508,0.905,3.091,1.658,4.749,2.337c4.825,1.96,10.102,3.015,15.604,3.015c12.74,0,25.856-5.503,36.938-15.378 c20.654-18.469,41.988-48.169,54.576-66.94c10.327-1.583,21.559-2.94,34.224-4.297c14.927-1.508,28.118-2.412,40.104-2.865 c3.694,3.317,7.237,6.483,10.63,9.498c18.846,16.81,33.168,28.947,46.134,37.465c0,0.075,0.075,0.075,0.15,0.075 c5.127,3.392,10.026,6.181,14.926,8.443c5.502,2.563,11.081,3.92,16.81,3.92c7.237,0,14.021-2.186,19.675-6.181 c5.729-4.146,9.875-10.101,11.76-16.81C420.181,387.694,418.899,378.724,414.376,370.658z M247.706,219.667 c-1.056-9.348-1.508-19.072-1.357-29.324c0.15-9.724,3.694-16.283,8.895-16.283c3.919,0,8.066,3.543,9.951,10.327 c0.528,2.035,0.905,4.372,0.98,7.01c0.15,3.166,0.075,6.483-0.075,9.875c-0.452,9.574-2.112,19.75-4.976,30.681 c-1.734,7.011-3.995,14.323-6.784,21.936C251.173,243.186,248.911,231.803,247.706,219.667z M121.968,418.073 c-1.282-3.166,0.15-9.272,7.99-16.81c11.985-11.458,30.755-20.504,56.914-27.364c-4.976,6.784-9.875,12.966-14.625,18.619 c-7.237,8.744-14.172,16.132-20.429,21.71c-5.351,4.824-11.232,7.84-16.81,8.594c-0.98,0.151-1.96,0.226-2.94,0.226 C127.169,423.049,123.173,421.089,121.968,418.073z M242.428,337.942l0.528-0.829l-0.829,0.151 c0.15-0.377,0.377-0.754,0.602-1.055c3.167-5.352,7.161-12.212,11.458-20.127l0.377,0.829l0.98-2.035 c3.166,4.523,6.634,8.971,10.252,13.267c1.735,2.035,3.544,3.995,5.352,5.955l-1.205,0.075l1.055,0.98 c-3.09,0.226-6.331,0.528-9.573,0.829c-2.036,0.226-4.147,0.377-6.257,0.603C250.796,337.037,246.499,337.49,242.428,337.942z M369.298,384.98c-8.97-5.729-18.997-13.795-31.36-24.575c17.564,1.809,31.36,5.654,41.159,11.383 c4.297,2.488,7.538,5.051,9.724,7.538c3.619,3.844,4.901,7.312,4.221,9.649c-0.602,2.337-3.241,3.92-6.483,3.92 c-1.885,0-3.844-0.452-5.879-1.432c-3.468-1.658-7.086-3.694-10.931-6.181C369.598,385.282,369.448,385.131,369.298,384.98z"/> </g> </g> </g>
-  </svg>
+        this.pdfIcon = `
+  <svg version="1.1" id="_x34_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" width="800px" height="800px" fill="#000000">
+    <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+    <g id="SVGRepo_iconCarrier"> <g> <polygon style="fill:#FFFEFE;" points="475.435,117.825 475.435,512 47.791,512 47.791,0.002 357.613,0.002 412.491,54.881 "/> <rect x="36.565" y="34.295" style="fill:#B43331;" width="205.097" height="91.768"/> <g> <g> <path style="fill:#FFFEFE;" d="M110.133,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.659-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.127-1.432-8.141-1.432H69.652v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.371-2.261,6.031-3.92c1.658-1.658,2.865-3.543,3.769-5.804c0.828-2.186,1.281-4.523,1.281-6.935 C111.413,68.902,110.961,66.565,110.133,64.379z M97.845,77.118c-1.508,1.432-3.618,2.186-6.182,2.186H81.035V63.323h10.628 c2.564,0,4.674,0.754,6.182,2.261c1.432,1.432,2.185,3.392,2.185,5.804C100.031,73.726,99.277,75.686,97.845,77.118z"/> <path style="fill:#FFFEFE;" d="M164.558,75.761c-0.075-2.035-0.15-3.844-0.377-5.503c-0.225-1.659-0.603-3.166-1.131-4.598 c-0.527-1.357-1.206-2.714-2.111-3.92c-2.035-2.94-4.522-5.126-7.312-6.483c-2.864-1.357-6.256-2.035-10.252-2.035H122.42v58.195 h20.956c3.996,0,7.388-0.678,10.252-2.035c2.79-1.357,5.277-3.543,7.312-6.483c0.905-1.206,1.584-2.563,2.111-3.92 c0.528-1.432,0.905-2.94,1.131-4.598c0.227-1.658,0.301-3.468,0.377-5.503c0.075-1.96,0.075-4.146,0.075-6.558 C164.633,79.908,164.633,77.721,164.558,75.761z M153.175,88.2c0,1.734-0.15,3.091-0.302,4.297 c-0.151,1.131-0.376,2.186-0.678,2.94c-0.301,0.829-0.754,1.583-1.281,2.261c-1.885,2.412-4.749,3.543-8.518,3.543h-8.668V63.323 h8.668c3.769,0,6.634,1.206,8.518,3.618c0.528,0.678,0.98,1.357,1.281,2.186c0.302,0.829,0.528,1.809,0.678,3.015 c0.152,1.131,0.302,2.563,0.302,4.221c0.075,1.659,0.075,3.694,0.075,5.955C153.251,84.581,153.251,86.541,153.175,88.2z"/> <path style="fill:#FFFEFE;" d="M213.18,63.323V53.222h-38.37v58.195h11.383V87.823h22.992V77.646h-22.992V63.323H213.18z"/> </g> <g> <path style="fill:#FFFEFE;" d="M110.133,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.659-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.127-1.432-8.141-1.432H69.652v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.371-2.261,6.031-3.92c1.658-1.658,2.865-3.543,3.769-5.804c0.828-2.186,1.281-4.523,1.281-6.935 C111.413,68.902,110.961,66.565,110.133,64.379z M97.845,77.118c-1.508,1.432-3.618,2.186-6.182,2.186H81.035V63.323h10.628 c2.564,0,4.674,0.754,6.182,2.261c1.432,1.432,2.185,3.392,2.185,5.804C100.031,73.726,99.277,75.686,97.845,77.118z"/> </g> </g> <polygon style="opacity:0.08;fill:#040000;" points="475.435,117.825 475.435,512 47.791,512 47.791,419.581 247.706,219.667 259.541,207.832 266.099,201.273 277.029,190.343 289.995,177.377 412.491,54.881 "/> <polygon style="fill:#BBBBBA;" points="475.435,117.836 357.6,117.836 357.6,0 "/> <g> <path style="fill:#B43331;" d="M414.376,370.658c-2.488-4.372-5.88-8.518-10.101-12.287c-3.467-3.166-7.538-6.106-12.137-8.82 c-18.543-10.93-45.003-16.207-80.961-16.207h-3.618c-1.96-1.809-3.996-3.618-6.106-5.503 c-13.644-12.287-24.499-25.63-32.942-40.48c16.583-36.561,24.499-69.126,23.519-96.867c-0.151-4.674-0.83-9.046-2.036-13.117 c-1.808-6.558-4.824-12.363-9.046-17.112c-0.075-0.075-0.075-0.075-0.15-0.151c-6.709-7.538-16.056-11.835-25.555-11.835 c-9.574,0-18.393,4.146-24.802,11.76c-6.331,7.538-9.724,17.866-9.875,30.002c-0.225,18.544,1.282,36.108,4.448,52.315 c0.301,1.282,0.528,2.563,0.829,3.844c3.166,14.7,7.84,28.645,13.871,41.611c-7.086,14.398-14.248,26.836-19.222,35.279 c-3.769,6.408-7.916,13.117-12.213,19.826c-19.373,3.468-35.807,7.689-50.129,12.966c-19.374,7.011-34.903,16.056-46.059,26.836 c-7.238,6.935-12.137,14.323-14.55,22.012c-2.563,7.915-2.411,15.83,0.453,22.916c2.638,6.558,7.387,12.061,13.719,15.83 c1.508,0.905,3.091,1.658,4.749,2.337c4.825,1.96,10.102,3.015,15.604,3.015c12.74,0,25.856-5.503,36.938-15.378 c20.654-18.469,41.988-48.169,54.576-66.94c10.327-1.583,21.559-2.94,34.224-4.297c14.927-1.508,28.118-2.412,40.104-2.865 c3.694,3.317,7.237,6.483,10.63,9.498c18.846,16.81,33.168,28.947,46.134,37.465c0,0.075,0.075,0.075,0.15,0.075 c5.127,3.392,10.026,6.181,14.926,8.443c5.502,2.563,11.081,3.92,16.81,3.92c7.237,0,14.021-2.186,19.675-6.181 c5.729-4.146,9.875-10.101,11.76-16.81C420.181,387.694,418.899,378.724,414.376,370.658z M247.706,219.667 c-1.056-9.348-1.508-19.072-1.357-29.324c0.15-9.724,3.694-16.283,8.895-16.283c3.919,0,8.066,3.543,9.951,10.327 c0.528,2.035,0.905,4.372,0.98,7.01c0.15,3.166,0.075,6.483-0.075,9.875c-0.452,9.574-2.112,19.75-4.976,30.681 c-1.734,7.011-3.995,14.323-6.784,21.936C251.173,243.186,248.911,231.803,247.706,219.667z M121.968,418.073 c-1.282-3.166,0.15-9.272,7.99-16.81c11.985-11.458,30.755-20.504,56.914-27.364c-4.976,6.784-9.875,12.966-14.625,18.619 c-7.237,8.744-14.172,16.132-20.429,21.71c-5.351,4.824-11.232,7.84-16.81,8.594c-0.98,0.151-1.96,0.226-2.94,0.226 C127.169,423.049,123.173,421.089,121.968,418.073z M242.428,337.942l0.528-0.829l-0.829,0.151 c0.15-0.377,0.377-0.754,0.602-1.055c3.167-5.352,7.161-12.212,11.458-20.127l0.377,0.829l0.98-2.035 c3.166,4.523,6.634,8.971,10.252,13.267c1.735,2.035,3.544,3.995,5.352,5.955l-1.205,0.075l1.055,0.98 c-3.09,0.226-6.331,0.528-9.573,0.829c-2.036,0.226-4.147,0.377-6.257,0.603C250.796,337.037,246.499,337.49,242.428,337.942z M369.298,384.98c-8.97-5.729-18.997-13.795-31.36-24.575c17.564,1.809,31.36,5.654,41.159,11.383 c4.297,2.488,7.538,5.051,9.724,7.538c3.619,3.844,4.901,7.312,4.221,9.649c-0.602,2.337-3.241,3.92-6.483,3.92 c-1.885,0-3.844-0.452-5.879-1.432c-3.468-1.658-7.086-3.694-10.931-6.181C369.598,385.282,369.448,385.131,369.298,384.98z"/> </g> </g> </g>
+  </svg>
   `;
-        this.wordIcon = `
-  <svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000">
-    <g id="SVGRepo_bgCarrier" stroke-width="0"/>
-    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-    <g id="SVGRepo_iconCarrier">
-    <title>file_type_word2</title>
-    <path d="M18.536,2.323V4.868c3.4.019,7.12-.035,10.521.019a.783.783,0,0,1,.912.861c.054,6.266-.013,12.89.032,19.157-.02.4.009,1.118-.053,1.517-.079.509-.306.607-.817.676-.286.039-.764.034-1.045.047-2.792-.014-5.582-.011-8.374-.01l-1.175,0v2.547L2,27.133Q2,16,2,4.873L18.536,2.322" style="fill:#283c82"/>
-    <path d="M18.536,5.822h10.5V26.18h-10.5V23.635h8.27V22.363h-8.27v-1.59h8.27V19.5h-8.27v-1.59h8.27V16.637h-8.27v-1.59h8.27V13.774h-8.27v-1.59h8.27V10.911h-8.27V9.321h8.27V8.048h-8.27V5.822" style="fill:#fff"/>
-    <path d="M8.573,11.443c.6-.035,1.209-.06,1.813-.092.423,2.147.856,4.291,1.314,6.429.359-2.208.757-4.409,1.142-6.613.636-.022,1.272-.057,1.905-.1-.719,3.082-1.349,6.19-2.134,9.254-.531.277-1.326-.013-1.956.032-.423-2.106-.916-4.2-1.295-6.314C8.99,16.1,8.506,18.133,8.08,20.175q-.916-.048-1.839-.111c-.528-2.8-1.148-5.579-1.641-8.385.544-.025,1.091-.048,1.635-.067.328,2.026.7,4.043.986,6.072.448-2.08.907-4.161,1.352-6.241" style="fill:#fff"/>
-    </g>
-    </svg>
+        this.wordIcon = `
+  <svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000">
+    <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+    <g id="SVGRepo_iconCarrier">
+    <title>file_type_word2</title>
+    <path d="M18.536,2.323V4.868c3.4.019,7.12-.035,10.521.019a.783.783,0,0,1,.912.861c.054,6.266-.013,12.89.032,19.157-.02.4.009,1.118-.053,1.517-.079.509-.306.607-.817.676-.286.039-.764.034-1.045.047-2.792-.014-5.582-.011-8.374-.01l-1.175,0v2.547L2,27.133Q2,16,2,4.873L18.536,2.322" style="fill:#283c82"/>
+    <path d="M18.536,5.822h10.5V26.18h-10.5V23.635h8.27V22.363h-8.27v-1.59h8.27V19.5h-8.27v-1.59h8.27V16.637h-8.27v-1.59h8.27V13.774h-8.27v-1.59h8.27V10.911h-8.27V9.321h8.27V8.048h-8.27V5.822" style="fill:#fff"/>
+    <path d="M8.573,11.443c.6-.035,1.209-.06,1.813-.092.423,2.147.856,4.291,1.314,6.429.359-2.208.757-4.409,1.142-6.613.636-.022,1.272-.057,1.905-.1-.719,3.082-1.349,6.19-2.134,9.254-.531.277-1.326-.013-1.956.032-.423-2.106-.916-4.2-1.295-6.314C8.99,16.1,8.506,18.133,8.08,20.175q-.916-.048-1.839-.111c-.528-2.8-1.148-5.579-1.641-8.385.544-.025,1.091-.048,1.635-.067.328,2.026.7,4.043.986,6.072.448-2.08.907-4.161,1.352-6.241" style="fill:#fff"/>
+    </g>
+    </svg>
   `;
-        this.byDefectIcon = `
- <svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000">
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-<g id="SVGRepo_iconCarrier">
-<title>file_type_word2</title>
-<path d="M18.536,2.323V4.868c3.4.019,7.12-.035,10.521.019a.783.783,0,0,1,.912.861c.054,6.266-.013,12.89.032,19.157-.02.4.009,1.118-.053,1.517-.079.509-.306.607-.817.676-.286.039-.764.034-1.045.047-2.792-.014-5.582-.011-8.374-.01l-1.175,0v2.547L2,27.133Q2,16,2,4.873L18.536,2.322" style="fill:#283c82"/>
-<path d="M18.536,5.822h10.5V26.18h-10.5V23.635h8.27V22.363h-8.27v-1.59h8.27V19.5h-8.27v-1.59h8.27V16.637h-8.27v-1.59h8.27V13.774h-8.27v-1.59h8.27V10.911h-8.27V9.321h8.27V8.048h-8.27V5.822" style="fill:#fff"/>
-<path d="M8.573,11.443c.6-.035,1.209-.06,1.813-.092.423,2.147.856,4.291,1.314,6.429.359-2.208.757-4.409,1.142-6.613.636-.022,1.272-.057,1.905-.1-.719,3.082-1.349,6.19-2.134,9.254-.531.277-1.326-.013-1.956.032-.423-2.106-.916-4.2-1.295-6.314C8.99,16.1,8.506,18.133,8.08,20.175q-.916-.048-1.839-.111c-.528-2.8-1.148-5.579-1.641-8.385.544-.025,1.091-.048,1.635-.067.328,2.026.7,4.043.986,6.072.448-2.08.907-4.161,1.352-6.241" style="fill:#fff"/>
-</g>
-</svg>
+        this.byDefectIcon = `
+ <svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier">
+<title>file_type_word2</title>
+<path d="M18.536,2.323V4.868c3.4.019,7.12-.035,10.521.019a.783.783,0,0,1,.912.861c.054,6.266-.013,12.89.032,19.157-.02.4.009,1.118-.053,1.517-.079.509-.306.607-.817.676-.286.039-.764.034-1.045.047-2.792-.014-5.582-.011-8.374-.01l-1.175,0v2.547L2,27.133Q2,16,2,4.873L18.536,2.322" style="fill:#283c82"/>
+<path d="M18.536,5.822h10.5V26.18h-10.5V23.635h8.27V22.363h-8.27v-1.59h8.27V19.5h-8.27v-1.59h8.27V16.637h-8.27v-1.59h8.27V13.774h-8.27v-1.59h8.27V10.911h-8.27V9.321h8.27V8.048h-8.27V5.822" style="fill:#fff"/>
+<path d="M8.573,11.443c.6-.035,1.209-.06,1.813-.092.423,2.147.856,4.291,1.314,6.429.359-2.208.757-4.409,1.142-6.613.636-.022,1.272-.057,1.905-.1-.719,3.082-1.349,6.19-2.134,9.254-.531.277-1.326-.013-1.956.032-.423-2.106-.916-4.2-1.295-6.314C8.99,16.1,8.506,18.133,8.08,20.175q-.916-.048-1.839-.111c-.528-2.8-1.148-5.579-1.641-8.385.544-.025,1.091-.048,1.635-.067.328,2.026.7,4.043.986,6.072.448-2.08.907-4.161,1.352-6.241" style="fill:#fff"/>
+</g>
+</svg>
   `;
         this.sanitizer = inject(DomSanitizer);
     }
@@ -455,8 +452,7 @@ class previewImagePipe {
         return this.getNotImageFormat(extension);
     }
     getFileExtension(href) {
-        const url = new URL(href);
-        const path = new URL(url).pathname;
+        const path = new URL(href, window.location.origin).pathname;
         return path.split('.').pop() || '';
     }
     getImageWhenIsFile(file) {
@@ -489,10 +485,10 @@ class previewImagePipe {
     svgConfiguration(svg) {
         return this.sanitizer.bypassSecurityTrustUrl('data:image/svg+xml;base64,' + btoa(this.pdfIcon));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: previewImagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: previewImagePipe, isStandalone: true, name: "previewImage" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: previewImagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: previewImagePipe, isStandalone: true, name: "previewImage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: previewImagePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: previewImagePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'previewImage', standalone: true }]
         }] });
@@ -501,10 +497,10 @@ class TruncatePipe {
     transform(text, lenght = 12, suffix = '...') {
         return text.slice(0, lenght) + suffix;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TruncatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'truncate', standalone: true }]
         }] });
@@ -819,7 +815,6 @@ class SpecialFormBuilderService {
     group(fields, parentField = {}) {
         return this.formGenerator(this.fieldDataToArray(fields), parentField);
     }
-    array() { }
     fieldDataToArray(fields) {
         return Object.entries(fields).map(([name, field]) => this.setDefectFieldOptions(name, field));
     }
@@ -903,28 +898,28 @@ class SpecialFormBuilderService {
     }
     arrayLengthRequired(control) {
         if (control.value.length) {
-            return {};
+            return null;
         }
         return { noItems: 'NO_SELECTED_ITEM' };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class ErrorStateMatcherService {
     isErrorState(control) {
         return control && control.invalid && control.dirty;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorStateMatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorStateMatcherService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorStateMatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorStateMatcherService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorStateMatcherService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorStateMatcherService, decorators: [{
             type: Injectable
         }] });
 
@@ -1026,18 +1021,18 @@ class SpecialUploadComponent {
             this.realControl.reset();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <ngx-mat-dropzone>\r\n      <input\r\n        [multiple]=\"settings.multiple\"\r\n        type=\"file\"\r\n        fileInput\r\n        [mode]=\"settings.mode\"\r\n        [accept]=\"control.settings?.accept || DEFAULT_ACCEPTED_TYPES\"\r\n        [placeholder]=\"control.placeholder\"\r\n        [formControl]=\"control\"\r\n        [required]=\"control.required\"\r\n        [readonly]=\"control.readOnly\"\r\n        (ngModelChange)=\"onSelectFile($event)\"\r\n      />\r\n    </ngx-mat-dropzone>\r\n    <mat-chip-set>\r\n      @for (item of elements; track item?.lastModified || item) {\r\n        <mat-chip-row>\r\n          <img matChipAvatar [src]=\"item | previewImage\" alt=\"\" />\r\n          {{ item | fileName | truncate }}\r\n          <button (click)=\"onRemove(item)\" matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-set>\r\n    @if (control.icon) {\r\n      <mat-icon matSuffix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\r\n\r\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:5rem;height:5rem;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: "pipe", type: previewImagePipe, name: "previewImage" }, { kind: "pipe", type: FileNamePipe, name: "fileName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: DropzoneCdkModule }, { kind: "directive", type: i2$2.FileInputDirective, selector: "input[fileInput]", inputs: ["value", "accept", "mode", "disabled"], outputs: ["selectionChange"], exportAs: ["fileInput"] }, { kind: "ngmodule", type: MatInputModule }, { 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: DropzoneMaterialModule }, { kind: "component", type: i4$1.MatDropzone, selector: "ngx-mat-dropzone", inputs: ["aria-describedby", "placeholder", "required"], exportAs: ["matDropzone"] }, { kind: "ngmodule", type: CommonModule }, { 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: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i6$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i6$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: MatCardModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <ngx-mat-dropzone>\n      <input\n        type=\"file\"\n        fileInput\n        [multiple]=\"settings.multiple\"\n        [mode]=\"settings.mode\"\n        [accept]=\"control.settings?.accept || DEFAULT_ACCEPTED_TYPES\"\n        [placeholder]=\"control.placeholder\"\n        [formControl]=\"control\"\n        [required]=\"control.required\"\n        [readonly]=\"control.readOnly\"\n        (ngModelChange)=\"onSelectFile($event)\"\n      />\n    </ngx-mat-dropzone>\n    <mat-chip-set>\n      @for (item of elements; track item?.lastModified || item) {\n        <mat-chip-row>\n          <img matChipAvatar [src]=\"item | previewImage\" alt=\"\" />\n          {{ item | fileName | truncate }}\n          <button (click)=\"onRemove(item)\" matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-set>\n    @if (control.icon) {\n      <mat-icon matSuffix>{{ control.icon }}</mat-icon>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n  </mat-form-field>\n}\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:5rem;height:5rem;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: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: MatDropzone, selector: "ngx-mat-dropzone", inputs: ["aria-describedby", "placeholder", "required"], exportAs: ["matDropzone"] }, { kind: "directive", type: FileInputDirective, selector: "input[fileInput]", inputs: ["value", "accept", "mode", "disabled"], outputs: ["selectionChange"], exportAs: ["fileInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i4$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "pipe", type: previewImagePipe, name: "previewImage" }, { kind: "pipe", type: FileNamePipe, name: "fileName" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialUploadComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-upload', imports: [
                         previewImagePipe,
                         FileNamePipe,
                         FormsModule,
-                        DropzoneCdkModule,
+                        MatDropzone,
+                        FileInputDirective,
                         MatInputModule,
-                        DropzoneMaterialModule,
                         CommonModule,
                         MatIconModule,
                         ReactiveFormsModule,
@@ -1046,7 +1041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MatChipsModule,
                         TruncatePipe,
                         MatCardModule,
-                    ], template: "@if (control && !control.hidden) {\r\n  <mat-form-field\r\n    [id]=\"control.elementId\"\r\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    @if (control.label) {\r\n      <mat-label>\r\n        {{ control.label }}\r\n      </mat-label>\r\n    }\r\n    <ngx-mat-dropzone>\r\n      <input\r\n        [multiple]=\"settings.multiple\"\r\n        type=\"file\"\r\n        fileInput\r\n        [mode]=\"settings.mode\"\r\n        [accept]=\"control.settings?.accept || DEFAULT_ACCEPTED_TYPES\"\r\n        [placeholder]=\"control.placeholder\"\r\n        [formControl]=\"control\"\r\n        [required]=\"control.required\"\r\n        [readonly]=\"control.readOnly\"\r\n        (ngModelChange)=\"onSelectFile($event)\"\r\n      />\r\n    </ngx-mat-dropzone>\r\n    <mat-chip-set>\r\n      @for (item of elements; track item?.lastModified || item) {\r\n        <mat-chip-row>\r\n          <img matChipAvatar [src]=\"item | previewImage\" alt=\"\" />\r\n          {{ item | fileName | truncate }}\r\n          <button (click)=\"onRemove(item)\" matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-set>\r\n    @if (control.icon) {\r\n      <mat-icon matSuffix>{{ control.icon }}</mat-icon>\r\n    }\r\n    @if (control.tooltip) {\r\n      <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n}\r\n\r\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:5rem;height:5rem;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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control && !control.hidden) {\n  <mat-form-field\n    [id]=\"control.elementId\"\n    class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\n  >\n    @if (control.label) {\n      <mat-label>\n        {{ control.label }}\n      </mat-label>\n    }\n    <ngx-mat-dropzone>\n      <input\n        type=\"file\"\n        fileInput\n        [multiple]=\"settings.multiple\"\n        [mode]=\"settings.mode\"\n        [accept]=\"control.settings?.accept || DEFAULT_ACCEPTED_TYPES\"\n        [placeholder]=\"control.placeholder\"\n        [formControl]=\"control\"\n        [required]=\"control.required\"\n        [readonly]=\"control.readOnly\"\n        (ngModelChange)=\"onSelectFile($event)\"\n      />\n    </ngx-mat-dropzone>\n    <mat-chip-set>\n      @for (item of elements; track item?.lastModified || item) {\n        <mat-chip-row>\n          <img matChipAvatar [src]=\"item | previewImage\" alt=\"\" />\n          {{ item | fileName | truncate }}\n          <button (click)=\"onRemove(item)\" matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-set>\n    @if (control.icon) {\n      <mat-icon matSuffix>{{ control.icon }}</mat-icon>\n    }\n    @if (control.tooltip) {\n      <mat-hint>{{ control.tooltip }}</mat-hint>\n    }\n    <mat-error>\n      {{ control.errors | errorMessage: control.errorMessages }}\n    </mat-error>\n  </mat-form-field>\n}\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:5rem;height:5rem;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"] }]
         }], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -1062,12 +1057,12 @@ class SpecialLabelComponent {
             this.settings.onClickLink(this.control.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <div\r\n    class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n      control.value | textByFunction: settings.stylesPipe\r\n    }}\"\r\n    [id]=\"control.elementId\"\r\n  >\r\n    @if (control.label) {\r\n      <div class=\"special-label__title font-bold\">\r\n        {{ control.label }}\r\n      </div>\r\n    }\r\n    <div\r\n      class=\"special-label__text\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink,\r\n      }\"\r\n      (click)=\"onLink()\"\r\n    >\r\n      {{ control.value | textByFunction: control.settings.pipe }}\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <div\n    class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\n      control.value | textByFunction: settings.stylesPipe\n    }}\"\n    [id]=\"control.elementId\"\n  >\n    @if (control.label) {\n      <div class=\"special-label__title font-bold\">\n        {{ control.label }}\n      </div>\n    }\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}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialLabelComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "@if (control && !control.hidden) {\r\n  <div\r\n    class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n      control.value | textByFunction: settings.stylesPipe\r\n    }}\"\r\n    [id]=\"control.elementId\"\r\n  >\r\n    @if (control.label) {\r\n      <div class=\"special-label__title font-bold\">\r\n        {{ control.label }}\r\n      </div>\r\n    }\r\n    <div\r\n      class=\"special-label__text\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink,\r\n      }\"\r\n      (click)=\"onLink()\"\r\n    >\r\n      {{ control.value | textByFunction: control.settings.pipe }}\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "@if (control && !control.hidden) {\n  <div\n    class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\n      control.value | textByFunction: settings.stylesPipe\n    }}\"\n    [id]=\"control.elementId\"\n  >\n    @if (control.label) {\n      <div class=\"special-label__title font-bold\">\n        {{ control.label }}\n      </div>\n    }\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}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -1096,12 +1091,12 @@ class SpecialRichtextComponent {
     ngOnDestroy() {
         this.editor.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialRichtextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialRichtextComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n  <div\r\n    class=\"special-richtext w-full mb-3 {{ control.styleClasses }}\"\r\n    [id]=\"control.elementId\"\r\n  >\r\n    @if (control.label) {\r\n      <h4 class=\"text-md font-medium pl-2 mb-2\">\r\n        {{ control.label }}\r\n      </h4>\r\n    }\r\n    <ngx-editor-menu\r\n      [colorPresets]=\"colorPresets\"\r\n      [toolbar]=\"toolbar\"\r\n      [editor]=\"editor\"\r\n    >\r\n    </ngx-editor-menu>\r\n    <ngx-editor\r\n      [editor]=\"editor\"\r\n      [formControl]=\"control\"\r\n      [required]=\"control.required\"\r\n      [outputFormat]=\"control.settings.outputFormat || 'html'\"\r\n      [disabled]=\"false\"\r\n      [placeholder]=\"control.placeholder\"\r\n    ></ngx-editor>\r\n    <div class=\"px-5 mt-2\">\r\n      @if (\r\n        control.dirty && control.errors | errorMessage: control.errorMessages;\r\n        as error\r\n      ) {\r\n        <div class=\"text-sm text-rose-500\">\r\n          {{ error }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"text-sm font-medium\">{{ control.tooltip }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i2$3.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i2$3.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialRichtextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialRichtextComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\n  <div\n    class=\"special-richtext w-full mb-3 {{ control.styleClasses }}\"\n    [id]=\"control.elementId\"\n  >\n    @if (control.label) {\n      <h4 class=\"text-md font-medium pl-2 mb-2\">\n        {{ control.label }}\n      </h4>\n    }\n    <ngx-editor-menu\n      [colorPresets]=\"colorPresets\"\n      [toolbar]=\"toolbar\"\n      [editor]=\"editor\"\n    >\n    </ngx-editor-menu>\n    <ngx-editor\n      [editor]=\"editor\"\n      [formControl]=\"control\"\n      [required]=\"control.required\"\n      [outputFormat]=\"control.settings.outputFormat || 'html'\"\n      [disabled]=\"false\"\n      [placeholder]=\"control.placeholder\"\n    ></ngx-editor>\n    <div class=\"px-5 mt-2\">\n      @if (\n        control.dirty && control.errors | errorMessage: control.errorMessages;\n        as error\n      ) {\n        <div class=\"text-sm text-rose-500\">\n          {{ error }}\n        </div>\n      } @else {\n        <div class=\"text-sm font-medium\">{{ control.tooltip }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i2$5.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i2$5.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialRichtextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialRichtextComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         MatInputModule,
                         MatIconModule,
@@ -1109,7 +1104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         NgxEditorModule,
                         ErrorMessagePipe,
                         MatFormFieldModule,
-                    ], template: "@if (control && !control.hidden) {\r\n  <div\r\n    class=\"special-richtext w-full mb-3 {{ control.styleClasses }}\"\r\n    [id]=\"control.elementId\"\r\n  >\r\n    @if (control.label) {\r\n      <h4 class=\"text-md font-medium pl-2 mb-2\">\r\n        {{ control.label }}\r\n      </h4>\r\n    }\r\n    <ngx-editor-menu\r\n      [colorPresets]=\"colorPresets\"\r\n      [toolbar]=\"toolbar\"\r\n      [editor]=\"editor\"\r\n    >\r\n    </ngx-editor-menu>\r\n    <ngx-editor\r\n      [editor]=\"editor\"\r\n      [formControl]=\"control\"\r\n      [required]=\"control.required\"\r\n      [outputFormat]=\"control.settings.outputFormat || 'html'\"\r\n      [disabled]=\"false\"\r\n      [placeholder]=\"control.placeholder\"\r\n    ></ngx-editor>\r\n    <div class=\"px-5 mt-2\">\r\n      @if (\r\n        control.dirty && control.errors | errorMessage: control.errorMessages;\r\n        as error\r\n      ) {\r\n        <div class=\"text-sm text-rose-500\">\r\n          {{ error }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"text-sm font-medium\">{{ control.tooltip }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+                    ], template: "@if (control && !control.hidden) {\n  <div\n    class=\"special-richtext w-full mb-3 {{ control.styleClasses }}\"\n    [id]=\"control.elementId\"\n  >\n    @if (control.label) {\n      <h4 class=\"text-md font-medium pl-2 mb-2\">\n        {{ control.label }}\n      </h4>\n    }\n    <ngx-editor-menu\n      [colorPresets]=\"colorPresets\"\n      [toolbar]=\"toolbar\"\n      [editor]=\"editor\"\n    >\n    </ngx-editor-menu>\n    <ngx-editor\n      [editor]=\"editor\"\n      [formControl]=\"control\"\n      [required]=\"control.required\"\n      [outputFormat]=\"control.settings.outputFormat || 'html'\"\n      [disabled]=\"false\"\n      [placeholder]=\"control.placeholder\"\n    ></ngx-editor>\n    <div class=\"px-5 mt-2\">\n      @if (\n        control.dirty && control.errors | errorMessage: control.errorMessages;\n        as error\n      ) {\n        <div class=\"text-sm text-rose-500\">\n          {{ error }}\n        </div>\n      } @else {\n        <div class=\"text-sm font-medium\">{{ control.tooltip }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -1119,12 +1114,12 @@ class SpecialFormComponent {
         this.form = form;
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialFormComponent, selector: "sp-form", inputs: { form: ["control", "form"] }, ngImport: i0, template: "@if (form && !form.hidden) {\r\n  <div\r\n    [id]=\"form.elementId\"\r\n    class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n  >\r\n    @if (form) {\r\n      <div\r\n        [class]=\"\r\n          form.label\r\n            ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\n            : 'container'\r\n        \"\r\n      >\r\n        @if (form.label) {\r\n          <h1 class=\"font-bold py-3\">{{ form.label }}</h1>\r\n        }\r\n        <div class=\"w-full flex flex-wrap\">\r\n          @for (control of form.controls | controlsList; track control.name) {\r\n            <ng-template controlRender [control]=\"control\"></ng-template>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialFormComponent, isStandalone: false, selector: "sp-form", inputs: { form: ["control", "form"] }, ngImport: i0, template: "@if (form && !form.hidden) {\n  <div\n    [id]=\"form.elementId\"\n    class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\n  >\n    @if (form) {\n      <div\n        [class]=\"\n          form.label\n            ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\n            : 'container'\n        \"\n      >\n        @if (form.label) {\n          <h1 class=\"font-bold py-3\">{{ form.label }}</h1>\n        }\n        <div class=\"w-full flex flex-wrap\">\n          @for (control of form.controls | controlsList; track control.name) {\n            <ng-template controlRender [control]=\"control\"></ng-template>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (form && !form.hidden) {\r\n  <div\r\n    [id]=\"form.elementId\"\r\n    class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n  >\r\n    @if (form) {\r\n      <div\r\n        [class]=\"\r\n          form.label\r\n            ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\n            : 'container'\r\n        \"\r\n      >\r\n        @if (form.label) {\r\n          <h1 class=\"font-bold py-3\">{{ form.label }}</h1>\r\n        }\r\n        <div class=\"w-full flex flex-wrap\">\r\n          @for (control of form.controls | controlsList; track control.name) {\r\n            <ng-template controlRender [control]=\"control\"></ng-template>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (form && !form.hidden) {\n  <div\n    [id]=\"form.elementId\"\n    class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\n  >\n    @if (form) {\n      <div\n        [class]=\"\n          form.label\n            ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\n            : 'container'\n        \"\n      >\n        @if (form.label) {\n          <h1 class=\"font-bold py-3\">{{ form.label }}</h1>\n        }\n        <div class=\"w-full flex flex-wrap\">\n          @for (control of form.controls | controlsList; track control.name) {\n            <ng-template controlRender [control]=\"control\"></ng-template>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { form: [{
                 type: Input,
                 args: ['control']
@@ -1147,12 +1142,12 @@ class SpecialArrayComponent {
     addItem() {
         this.formArray.addItem();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialArrayComponent, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "@if (formArray && !formArray.hidden) {\r\n  <div\r\n    [id]=\"formArray.elementId\"\r\n    class=\"special-form-array w-full box-border p-2 {{\r\n      formArray.styleClasses\r\n    }}\"\r\n  >\r\n    <div\r\n      class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\r\n    >\r\n      @if (formArray.label) {\r\n        <h1 class=\"font-bold py-3\">\r\n          {{ formArray.label }}\r\n        </h1>\r\n      }\r\n      <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n        @if (formArray.form) {\r\n          <div\r\n            [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n            class=\"grid gap-4 grid-cols-12\"\r\n          >\r\n            @if (!withFormHeader) {\r\n              @for (\r\n                item of formArray.form.controls | controlsList;\r\n                track item.name\r\n              ) {\r\n                <h2 [class]=\"item.styleClasses\">\r\n                  {{ item.label }}\r\n                </h2>\r\n              }\r\n              @if (settings.withActionButtons) {\r\n                <div\r\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              @for (\r\n                item of formArray.form.controls | controlsList;\r\n                track item.name\r\n              ) {\r\n                <ng-template controlRender [control]=\"item\"></ng-template>\r\n              }\r\n              @if (settings.withActionButtons) {\r\n                <div\r\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\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              }\r\n            }\r\n          </div>\r\n        }\r\n        @for (\r\n          formGroup of formArray.controls;\r\n          track formGroup.name;\r\n          let i = $index\r\n        ) {\r\n          <div class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\">\r\n            @for (item of formGroup.controls | controlsList; track item.name) {\r\n              <ng-template controlRender [control]=\"item\"></ng-template>\r\n            }\r\n            <div\r\n              class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\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        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => i8.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SpecialArrayComponent, isStandalone: false, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "@if (formArray && !formArray.hidden) {\n  <div\n    [id]=\"formArray.elementId\"\n    class=\"special-form-array w-full box-border p-2 {{\n      formArray.styleClasses\n    }}\"\n  >\n    <div\n      class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\n    >\n      @if (formArray.label) {\n        <h1 class=\"font-bold py-3\">\n          {{ formArray.label }}\n        </h1>\n      }\n      <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\n        @if (formArray.form) {\n          <div\n            [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\n            class=\"grid gap-4 grid-cols-12\"\n          >\n            @if (!withFormHeader) {\n              @for (\n                item of formArray.form.controls | controlsList;\n                track item.name\n              ) {\n                <h2 [class]=\"item.styleClasses\">\n                  {{ item.label }}\n                </h2>\n              }\n              @if (settings.withActionButtons) {\n                <div\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\n                ></div>\n              }\n            } @else {\n              @for (\n                item of formArray.form.controls | controlsList;\n                track item.name\n              ) {\n                <ng-template controlRender [control]=\"item\"></ng-template>\n              }\n              @if (settings.withActionButtons) {\n                <div\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\n                >\n                  <button\n                    mat-flat-button\n                    color=\"primary\"\n                    [disabled]=\"formArray.form.invalid\"\n                    (click)=\"addItem()\"\n                  >\n                    {{ settings.addActionLabel || \"Add\" }}\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n        @for (\n          formGroup of formArray.controls;\n          track formGroup.name;\n          let i = $index\n        ) {\n          <div class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\">\n            @for (item of formGroup.controls | controlsList; track item.name) {\n              <ng-template controlRender [control]=\"item\"></ng-template>\n            }\n            <div\n              class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\n            >\n              <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\n                {{ settings.removeActionLabel || \"Remove\" }}\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i7.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => i5.MatButton), selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialArrayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (formArray && !formArray.hidden) {\r\n  <div\r\n    [id]=\"formArray.elementId\"\r\n    class=\"special-form-array w-full box-border p-2 {{\r\n      formArray.styleClasses\r\n    }}\"\r\n  >\r\n    <div\r\n      class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\r\n    >\r\n      @if (formArray.label) {\r\n        <h1 class=\"font-bold py-3\">\r\n          {{ formArray.label }}\r\n        </h1>\r\n      }\r\n      <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n        @if (formArray.form) {\r\n          <div\r\n            [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n            class=\"grid gap-4 grid-cols-12\"\r\n          >\r\n            @if (!withFormHeader) {\r\n              @for (\r\n                item of formArray.form.controls | controlsList;\r\n                track item.name\r\n              ) {\r\n                <h2 [class]=\"item.styleClasses\">\r\n                  {{ item.label }}\r\n                </h2>\r\n              }\r\n              @if (settings.withActionButtons) {\r\n                <div\r\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              @for (\r\n                item of formArray.form.controls | controlsList;\r\n                track item.name\r\n              ) {\r\n                <ng-template controlRender [control]=\"item\"></ng-template>\r\n              }\r\n              @if (settings.withActionButtons) {\r\n                <div\r\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\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              }\r\n            }\r\n          </div>\r\n        }\r\n        @for (\r\n          formGroup of formArray.controls;\r\n          track formGroup.name;\r\n          let i = $index\r\n        ) {\r\n          <div class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\">\r\n            @for (item of formGroup.controls | controlsList; track item.name) {\r\n              <ng-template controlRender [control]=\"item\"></ng-template>\r\n            }\r\n            <div\r\n              class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\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        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (formArray && !formArray.hidden) {\n  <div\n    [id]=\"formArray.elementId\"\n    class=\"special-form-array w-full box-border p-2 {{\n      formArray.styleClasses\n    }}\"\n  >\n    <div\n      class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\n    >\n      @if (formArray.label) {\n        <h1 class=\"font-bold py-3\">\n          {{ formArray.label }}\n        </h1>\n      }\n      <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\n        @if (formArray.form) {\n          <div\n            [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\n            class=\"grid gap-4 grid-cols-12\"\n          >\n            @if (!withFormHeader) {\n              @for (\n                item of formArray.form.controls | controlsList;\n                track item.name\n              ) {\n                <h2 [class]=\"item.styleClasses\">\n                  {{ item.label }}\n                </h2>\n              }\n              @if (settings.withActionButtons) {\n                <div\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\n                ></div>\n              }\n            } @else {\n              @for (\n                item of formArray.form.controls | controlsList;\n                track item.name\n              ) {\n                <ng-template controlRender [control]=\"item\"></ng-template>\n              }\n              @if (settings.withActionButtons) {\n                <div\n                  class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\n                >\n                  <button\n                    mat-flat-button\n                    color=\"primary\"\n                    [disabled]=\"formArray.form.invalid\"\n                    (click)=\"addItem()\"\n                  >\n                    {{ settings.addActionLabel || \"Add\" }}\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n        @for (\n          formGroup of formArray.controls;\n          track formGroup.name;\n          let i = $index\n        ) {\n          <div class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\">\n            @for (item of formGroup.controls | controlsList; track item.name) {\n              <ng-template controlRender [control]=\"item\"></ng-template>\n            }\n            <div\n              class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\n            >\n              <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\n                {{ settings.removeActionLabel || \"Remove\" }}\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formArray: [{
                 type: Input,
                 args: ['control']
@@ -1183,13 +1178,14 @@ class FormControlsRenderDirective {
             [EControlTypes.richText]: SpecialRichtextComponent,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FormControlsRenderDirective, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: FormControlsRenderDirective, isStandalone: false, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[controlRender]`,
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { controlSetter: [{
                 type: Input,
@@ -1197,8 +1193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class SpecialFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
             FormControlsRenderDirective,
             SpecialFormComponent], imports: [CommonModule,
             FormControlsListPipe,
@@ -1215,7 +1211,7 @@ class SpecialFormModule {
             SpecialUploadComponent], exports: [SpecialArrayComponent,
             FormControlsRenderDirective,
             SpecialFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
             MatButtonModule,
             SpecialRichtextComponent,
             SpecialDropdownComponent,
@@ -1228,7 +1224,7 @@ class SpecialFormModule {
             SpecialTextAreaComponent,
             SpecialUploadComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpecialFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [