special-forms 4.1.2 → 16.2.1

package/fesm2015/special-forms.mjs

@@ -1,1083 +0,0 @@
-import * as i0 from '@angular/core';
-import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, NgModule, Injectable } from '@angular/core';
-import { debounceTime } from 'rxjs/operators';
-import * as i4 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { Subscription } from 'rxjs';
-import * as i1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i6 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/forms';
-import { ReactiveFormsModule, FormControl, FormsModule, FormGroup, FormArray, Validators } from '@angular/forms';
-import * as i7$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/form-field';
-import * as i5 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
-import * as i1$2 from '@ngneat/input-mask';
-import { InputMaskModule, createMask } from '@ngneat/input-mask';
-import * as i3 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i9 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i2$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$1 from '@angular/cdk/text-field';
-import * as i2$2 from 'ngx-dropzone';
-import { NgxDropzoneModule } from 'ngx-dropzone';
-import * as i1$3 from '@angular/platform-browser';
-import * as i3$2 from 'ngx-editor';
-import { Editor, NgxEditorModule } from 'ngx-editor';
-
-class ErrorMessagePipe {
-    transform(errorsObj, errorMessages, control) {
-        const errors = errorsObj ? Object.keys(errorsObj) : [];
-        const error = errors[0];
-        const message = errorMessages[error] || error;
-        if (control) {
-            control.setErrors(errorsObj);
-        }
-        return message;
-    }
-}
-ErrorMessagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ErrorMessagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "errorMessage",
-                    standalone: true
-                }]
-        }] });
-
-class TextByFunctionPipe {
-    transform(value, field) {
-        if (field instanceof Function) {
-            return field(value);
-        }
-        else if (value instanceof Object) {
-            return value[field];
-        }
-        else {
-            return value;
-        }
-    }
-}
-TextByFunctionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TextByFunctionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'textByFunction', standalone: true }]
-        }] });
-
-class FormControlsListPipe {
-    transform(controls) {
-        if (!controls)
-            return [];
-        return Object.values(controls)
-            .filter((control) => !control.hidden)
-            .map((control) => control);
-    }
-}
-FormControlsListPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FormControlsListPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'controlsList', standalone: true }]
-        }] });
-
-class SpecialAutocompleteComponent {
-    constructor() {
-        this.subs = new Subscription();
-        this.configValue = (item) => {
-            if (!item)
-                return '';
-            const fieldName = this.settings.fieldName;
-            return fieldName instanceof Function ? fieldName(item) : item[fieldName];
-        };
-    }
-    ngOnInit() {
-        this.init();
-    }
-    get settings() {
-        return this.control.settings;
-    }
-    init() {
-        this.subs.add(this.control.valueChanges.pipe(debounceTime(500)).subscribe((value) => {
-            if (typeof value === 'string') {
-                this.settings.getData(value, this.control);
-            }
-        }));
-    }
-    optionSelected(data) {
-        this.control.setValue(data.option.value);
-        if (this.settings.onSelect)
-            this.settings.onSelect(data.option.value);
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-}
-SpecialAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatInputModule,
-                        CommonModule,
-                        MatAutocompleteModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                        TextByFunctionPipe,
-                    ], template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }] } });
-
-class SpecialInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    onEnterClick() {
-        if (this.settings.onEnter) {
-            this.settings.onEnter(this.control.value);
-        }
-    }
-    onBlurAction() {
-        if (this.settings.onBlur) {
-            this.settings.onBlur(this.control.value);
-        }
-    }
-    get settings() {
-        return this.control.settings;
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-}
-SpecialInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\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  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <button\r\n    *ngIf=\"settings?.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$2.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialInputComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        InputMaskModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\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  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <button\r\n    *ngIf=\"settings?.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }] } });
-
-class SpecialDropdownComponent {
-    get settings() {
-        return this.control.settings;
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-    optionSelected(value) {
-        if (this.settings.onSelect)
-            this.settings.onSelect(value);
-    }
-}
-SpecialDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        MatSelectModule,
-                        ReactiveFormsModule,
-                        ErrorMessagePipe,
-                        MatIconModule,
-                        MatButtonModule,
-                        TextByFunctionPipe,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { control: [{
-                type: Input
-            }] } });
-
-class SpecialDatepickerComponent {
-    constructor() { }
-    get startAt() {
-        var _a;
-        return ((_a = this.control.settings) === null || _a === void 0 ? void 0 : _a.startAt) || new Date();
-    }
-    ngOnInit() { }
-}
-SpecialDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\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  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatInputModule,
-                        MatDatepickerModule,
-                        CommonModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                        MatNativeDateModule,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\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  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }] } });
-
-class SpecialMultipleAutocompleteComponent {
-    constructor() {
-        this.subs = new Subscription();
-        this.internalControl = new FormControl();
-        this.configValue = (item) => {
-            if (!item)
-                return '';
-            const fieldName = this.control.settings.fieldName;
-            return fieldName instanceof Function ? fieldName(item) : item[fieldName];
-        };
-    }
-    ngOnInit() {
-        this.init();
-    }
-    get settings() {
-        return this.control.settings;
-    }
-    init() {
-        this.subs.add(this.internalControl.valueChanges
-            .pipe(debounceTime(500))
-            .subscribe((value) => {
-            if (typeof value === 'string') {
-                this.control.settings.getData(value, this.control);
-            }
-        }));
-    }
-    optionSelected(data) {
-        const newItem = data.option.value;
-        this.internalControl.reset();
-        this.control.setValue([
-            ...(this.control.value || []).filter((item) => item[this.control.settings.fieldId] !==
-                newItem[this.control.settings.fieldId]),
-            newItem,
-        ]);
-        if (this.settings.onSelect)
-            this.settings.onSelect(newItem);
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-    remove(value) {
-        let currentValues = Array.from(this.control.value);
-        const index = currentValues.indexOf(value);
-        if (index > -1) {
-            currentValues.splice(index, 1);
-            const value = currentValues;
-            this.control.markAsDirty();
-            this.control.setValue(value);
-        }
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-}
-SpecialMultipleAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialMultipleAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i9.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatInputModule,
-                        CommonModule,
-                        MatAutocompleteModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                        TextByFunctionPipe,
-                        MatChipsModule,
-                    ], template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }] } });
-
-class SpecialCheckboxComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-SpecialCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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]=\"control.settings.indeterminate\"\r\n    [labelPosition]=\"control.settings.labelPosition\"\r\n    [color]=\"control.settings.color\"\r\n    [disabled]=\"control.disabled\"\r\n  >\r\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\r\n    {{ control.placeholder }}\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2$1.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        MatCheckboxModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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]=\"control.settings.indeterminate\"\r\n    [labelPosition]=\"control.settings.labelPosition\"\r\n    [color]=\"control.settings.color\"\r\n    [disabled]=\"control.disabled\"\r\n  >\r\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\r\n    {{ control.placeholder }}\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }] } });
-
-class SpecialTextAreaComponent {
-    constructor() {
-        this.onBlur = new EventEmitter();
-        this.onEnter = new EventEmitter();
-    }
-    ngOnInit() { }
-}
-SpecialTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\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  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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    [type]=\"control.settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  ></textarea>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\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", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        InputMaskModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\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  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\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    [type]=\"control.settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  ></textarea>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\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", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }], onBlur: [{
-                type: Output
-            }], onEnter: [{
-                type: Output
-            }] } });
-
-class SpecialUploadComponent {
-    set controlSetter(control) {
-        this.control = control;
-        this.previewImages = control.value;
-    }
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.previewImages = [];
-    }
-    ngOnInit() { }
-    onSelectMultiple(event) {
-        this.previewImages = [
-            ...this.previewImages,
-            ...event.addedFiles.map((file) => ({
-                lastModified: file.lastModified,
-                url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
-            })),
-        ];
-        this.control.setValue([
-            ...(this.control.value || []),
-            ...event.addedFiles.map(this.fixFileName),
-        ]);
-        this.onselectFile(this.control.value);
-        this.control.markAsDirty();
-    }
-    onSelectOne(event) {
-        this.previewImages = event.addedFiles.map((file) => ({
-            lastModified: file.lastModified,
-            url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
-        }));
-        this.control.setValue(event.addedFiles.map(this.fixFileName));
-        this.onselectFile(this.control.value);
-        this.control.markAsDirty();
-    }
-    onselectFile(value) {
-        var _a;
-        if ((_a = this.control.settings) === null || _a === void 0 ? void 0 : _a.onSelectFile) {
-            this.control.settings.onSelectFile(value);
-        }
-    }
-    fixFileName(file) {
-        return Object.defineProperty(file, 'name', {
-            writable: true,
-            value: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
-        });
-    }
-    clean() {
-        this.previewImages = [];
-    }
-    onRemove(file) {
-        this.control.setValue(this.control.value.filter((fl) => fl.lastModified !== file.lastModified));
-        this.previewImages = this.previewImages.filter((fl) => fl.lastModified !== file.lastModified);
-    }
-}
-SpecialUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialUploadComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-SpecialUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\r\n>\r\n  <ngx-dropzone\r\n    class=\"special-upload__dropzone\"\r\n    [ngClass]=\"{\r\n      'special-upload--error-dashed':\r\n        !!control.errors && (control.dirty || control.touched)\r\n    }\"\r\n    [multiple]=\"control.settings?.multiple\"\r\n    [accept]=\"\r\n      control.settings?.accept\r\n        ? control.settings?.accept\r\n        : 'image/png, .jpeg, .jpg, image/gif'\r\n    \"\r\n    (change)=\"\r\n      control.settings?.multiple\r\n        ? onSelectMultiple($event)\r\n        : onSelectOne($event)\r\n    \"\r\n  >\r\n    <ngx-dropzone-label\r\n      [ngClass]=\"{\r\n        'special-upload--error':\r\n          !!control.errors && (control.dirty || control.touched)\r\n      }\"\r\n    >\r\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\r\n        >{{ control.icon }}\r\n      </mat-icon>\r\n      <h2 class=\"text-base font-bold\">\r\n        {{ control.label }}\r\n      </h2>\r\n      <h3 class=\"text-base\">\r\n        {{ control.placeholder }}\r\n      </h3>\r\n    </ngx-dropzone-label>\r\n    <ngx-dropzone-preview\r\n      *ngFor=\"let file of previewImages\"\r\n      [removable]=\"true\"\r\n      (removed)=\"onRemove(file)\"\r\n    >\r\n      <ngx-dropzone-label class=\"special-upload__card\">\r\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\r\n      </ngx-dropzone-label>\r\n    </ngx-dropzone-preview>\r\n  </ngx-dropzone>\r\n  <div\r\n    class=\"special-upload--error mt-2\"\r\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\r\n  >\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </div>\r\n</div>\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:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i2$2.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i2$2.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i2$2.NgxDropzonePreviewComponent, selector: "ngx-dropzone-preview", inputs: ["file", "removable"], outputs: ["removed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialUploadComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        NgxDropzoneModule,
-                        CommonModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\r\n>\r\n  <ngx-dropzone\r\n    class=\"special-upload__dropzone\"\r\n    [ngClass]=\"{\r\n      'special-upload--error-dashed':\r\n        !!control.errors && (control.dirty || control.touched)\r\n    }\"\r\n    [multiple]=\"control.settings?.multiple\"\r\n    [accept]=\"\r\n      control.settings?.accept\r\n        ? control.settings?.accept\r\n        : 'image/png, .jpeg, .jpg, image/gif'\r\n    \"\r\n    (change)=\"\r\n      control.settings?.multiple\r\n        ? onSelectMultiple($event)\r\n        : onSelectOne($event)\r\n    \"\r\n  >\r\n    <ngx-dropzone-label\r\n      [ngClass]=\"{\r\n        'special-upload--error':\r\n          !!control.errors && (control.dirty || control.touched)\r\n      }\"\r\n    >\r\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\r\n        >{{ control.icon }}\r\n      </mat-icon>\r\n      <h2 class=\"text-base font-bold\">\r\n        {{ control.label }}\r\n      </h2>\r\n      <h3 class=\"text-base\">\r\n        {{ control.placeholder }}\r\n      </h3>\r\n    </ngx-dropzone-label>\r\n    <ngx-dropzone-preview\r\n      *ngFor=\"let file of previewImages\"\r\n      [removable]=\"true\"\r\n      (removed)=\"onRemove(file)\"\r\n    >\r\n      <ngx-dropzone-label class=\"special-upload__card\">\r\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\r\n      </ngx-dropzone-label>\r\n    </ngx-dropzone-preview>\r\n  </ngx-dropzone>\r\n  <div\r\n    class=\"special-upload--error mt-2\"\r\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\r\n  >\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </div>\r\n</div>\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:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; }, propDecorators: { controlSetter: [{
-                type: Input,
-                args: ['control']
-            }] } });
-
-class SpecialLabelComponent {
-    constructor() { }
-    ngOnInit() { }
-    get settings() {
-        return this.control.settings || { isLink: false };
-    }
-    onLink() {
-        if (this.settings.isLink && this.settings.onClickLink) {
-            this.settings.onClickLink(this.control.value);
-        }
-    }
-}
-SpecialLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\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  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\r\n    {{ control.label }}\r\n  </div>\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", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialLabelComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\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  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\r\n    {{ control.label }}\r\n  </div>\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", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }] } });
-
-var EControlTypes;
-(function (EControlTypes) {
-    EControlTypes["pkey"] = "PRIMARY-KEY";
-    EControlTypes["input"] = "INPUT";
-    EControlTypes["richText"] = "RICH-TEXT";
-    EControlTypes["textArea"] = "TEXT-AREA";
-    EControlTypes["dropdown"] = "DROPDOWN";
-    EControlTypes["date"] = "DATE";
-    EControlTypes["checkbox"] = "CHECKBOX";
-    EControlTypes["upload"] = "UPLOAD";
-    EControlTypes["autocomplete"] = "AUTOCOMPLETE";
-    EControlTypes["multiple"] = "MULTIPLE-AUTOCOMPLETE";
-    EControlTypes["array"] = "ARRAY";
-    EControlTypes["form"] = "FORM";
-    EControlTypes["label"] = "LABEL";
-    EControlTypes["default"] = "DEFAULT";
-})(EControlTypes || (EControlTypes = {}));
-
-class SpecialRichtextComponent {
-    set control(control) {
-        this.formControl = control;
-        if (control.settings.colorPresets)
-            this.colorPresets = control.settings.colorPresets;
-        this.editor = new Editor();
-    }
-    constructor() {
-        this.colorPresets = ['red', 'yellow', 'green', 'blue', 'black'];
-        this.toolbar = [
-            // default value
-            ['bold', 'italic'],
-            ['underline', 'strike'],
-            ['code', 'blockquote'],
-            ['ordered_list', 'bullet_list'],
-            [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
-            ['link', 'image'],
-            ['text_color', 'background_color'],
-            ['align_left', 'align_center', 'align_right', 'align_justify'],
-            ['horizontal_rule', 'format_clear'],
-        ];
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.editor.destroy();
-    }
-}
-SpecialRichtextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialRichtextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialRichtextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialRichtextComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-richtext w-full mb-3 {{ formControl.styleClasses }}\"\r\n  [id]=\"formControl.elementId\"\r\n  *ngIf=\"formControl && !formControl.hidden\"\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]=\"formControl\"\r\n    [disabled]=\"false\"\r\n    [placeholder]=\"formControl.placeholder\"\r\n  ></ngx-editor>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i3$2.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i3$2.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialRichtextComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, ReactiveFormsModule, NgxEditorModule], template: "<div\r\n  class=\"special-richtext w-full mb-3 {{ formControl.styleClasses }}\"\r\n  [id]=\"formControl.elementId\"\r\n  *ngIf=\"formControl && !formControl.hidden\"\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]=\"formControl\"\r\n    [disabled]=\"false\"\r\n    [placeholder]=\"formControl.placeholder\"\r\n  ></ngx-editor>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }] } });
-
-class SpecialFormComponent {
-    set control(form) {
-        this.form = form;
-    }
-    ngOnInit() { }
-}
-SpecialFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialFormComponent, selector: "sp-form", inputs: { form: ["control", "form"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"form && !form.hidden\"\r\n  [id]=\"form.elementId\"\r\n  class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n>\r\n  <div\r\n    *ngIf=\"form\"\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    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\r\n    <div class=\"w-full flex flex-wrap\">\r\n      <ng-template\r\n        *ngFor=\"let control of form.controls | controlsList\"\r\n        controlRender\r\n        [control]=\"control\"\r\n      ></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return FormControlsRenderDirective; }), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(function () { return FormControlsListPipe; }), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"form && !form.hidden\"\r\n  [id]=\"form.elementId\"\r\n  class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n>\r\n  <div\r\n    *ngIf=\"form\"\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    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\r\n    <div class=\"w-full flex flex-wrap\">\r\n      <ng-template\r\n        *ngFor=\"let control of form.controls | controlsList\"\r\n        controlRender\r\n        [control]=\"control\"\r\n      ></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { form: [{
-                type: Input,
-                args: ['control']
-            }] } });
-class SpecialArrayComponent {
-    set control(formArray) {
-        this.formArray = formArray;
-    }
-    get withFormHeader() {
-        return this.formArray.settings.withFormHeader;
-    }
-    get settings() {
-        return this.formArray.settings;
-    }
-    constructor() { }
-    ngOnInit() { }
-    removeItem(index) {
-        this.formArray.removeAt(index);
-    }
-    addItem() {
-        this.formArray.addItem();
-    }
-}
-SpecialArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialArrayComponent, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i0.forwardRef(function () { return FormControlsRenderDirective; }), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(function () { return FormControlsListPipe; }), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialArrayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { formArray: [{
-                type: Input,
-                args: ['control']
-            }] } });
-class FormControlsRenderDirective {
-    set controlSetter(control) {
-        this.viewContainer.clear();
-        const component = this.componentsBuffer[control.type];
-        if (component) {
-            const componentRef = this.viewContainer.createComponent(component);
-            componentRef.instance.control = control;
-        }
-    }
-    constructor(viewContainer) {
-        this.viewContainer = viewContainer;
-        this.componentsBuffer = {
-            [EControlTypes.autocomplete]: SpecialAutocompleteComponent,
-            [EControlTypes.checkbox]: SpecialCheckboxComponent,
-            [EControlTypes.date]: SpecialDatepickerComponent,
-            [EControlTypes.dropdown]: SpecialDropdownComponent,
-            [EControlTypes.array]: SpecialArrayComponent,
-            [EControlTypes.input]: SpecialInputComponent,
-            [EControlTypes.multiple]: SpecialMultipleAutocompleteComponent,
-            [EControlTypes.textArea]: SpecialTextAreaComponent,
-            [EControlTypes.label]: SpecialLabelComponent,
-            [EControlTypes.upload]: SpecialUploadComponent,
-            [EControlTypes.form]: SpecialFormComponent,
-            [EControlTypes.richText]: SpecialRichtextComponent,
-        };
-    }
-}
-FormControlsRenderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-FormControlsRenderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: FormControlsRenderDirective, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[controlRender]`,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { controlSetter: [{
-                type: Input,
-                args: ['control']
-            }] } });
-
-class SpecialFormModule {
-}
-SpecialFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpecialFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
-        FormControlsRenderDirective,
-        SpecialFormComponent], imports: [CommonModule,
-        FormControlsListPipe,
-        MatButtonModule,
-        SpecialRichtextComponent,
-        SpecialDropdownComponent,
-        SpecialInputComponent,
-        SpecialAutocompleteComponent,
-        SpecialDatepickerComponent,
-        SpecialLabelComponent,
-        SpecialMultipleAutocompleteComponent,
-        SpecialCheckboxComponent,
-        SpecialTextAreaComponent,
-        SpecialUploadComponent], exports: [SpecialArrayComponent,
-        FormControlsRenderDirective,
-        SpecialFormComponent] });
-SpecialFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
-        MatButtonModule,
-        SpecialRichtextComponent,
-        SpecialDropdownComponent,
-        SpecialInputComponent,
-        SpecialAutocompleteComponent,
-        SpecialDatepickerComponent,
-        SpecialLabelComponent,
-        SpecialMultipleAutocompleteComponent,
-        SpecialCheckboxComponent,
-        SpecialTextAreaComponent,
-        SpecialUploadComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SpecialArrayComponent,
-                        FormControlsRenderDirective,
-                        SpecialFormComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormControlsListPipe,
-                        MatButtonModule,
-                        SpecialRichtextComponent,
-                        SpecialDropdownComponent,
-                        SpecialInputComponent,
-                        SpecialAutocompleteComponent,
-                        SpecialDatepickerComponent,
-                        SpecialLabelComponent,
-                        SpecialMultipleAutocompleteComponent,
-                        SpecialCheckboxComponent,
-                        SpecialTextAreaComponent,
-                        SpecialUploadComponent,
-                    ],
-                    exports: [
-                        SpecialArrayComponent,
-                        FormControlsRenderDirective,
-                        SpecialFormComponent,
-                    ],
-                }]
-        }] });
-
-class SpecialFormControl extends FormControl {
-    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, length, placeholder, readOnly, required, tooltip, errorMessages, disabled, }) {
-        super(defaultValue, validators, asyncValidators);
-        this.name = name;
-        this.placeholder = placeholder;
-        this.label = label;
-        this.tooltip = tooltip;
-        this.icon = icon;
-        this.elementId = elementId;
-        this.settings = settings;
-        this.type = type;
-        this.styleClasses = styleClasses;
-        this.hidden = hidden;
-        this.length = length;
-        this.readOnly = readOnly;
-        this.required = required;
-        this.errorMessages = errorMessages;
-        disabled ? this.disable() : this.enable();
-    }
-    markAsDirty(opts) {
-        super.markAsDirty(opts);
-        this.updateValueAndValidity();
-    }
-    markAsPristine(opts) {
-        super.markAsPristine(opts);
-        this.updateValueAndValidity();
-    }
-    markAsTouched(opts) {
-        super.markAsTouched(opts);
-        this.updateValueAndValidity();
-    }
-    markAsUntouched(opts) {
-        super.markAsUntouched(opts);
-        this.updateValueAndValidity();
-    }
-    markAllAsTouched() {
-        super.markAllAsTouched();
-        this.updateValueAndValidity();
-    }
-    setReadOnly(status = true) {
-        this.readOnly = status;
-    }
-    setDisabled(status = true) {
-        status ? this.disable() : this.enable();
-    }
-    setHidden(status = true) {
-        this.hidden = status;
-    }
-}
-class SpecialFormGroup extends FormGroup {
-    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, length, placeholder, readOnly, required, tooltip, disabled, }, controls) {
-        super(controls, validators, asyncValidators);
-        this.name = name;
-        this.placeholder = placeholder;
-        this.label = label;
-        this.tooltip = tooltip;
-        this.icon = icon;
-        this.elementId = elementId;
-        this.settings = settings;
-        this.type = type;
-        this.styleClasses = styleClasses;
-        this.hidden = hidden;
-        this.length = length;
-        this.readOnly = readOnly;
-        this.required = required;
-        this.defaultValue = defaultValue;
-        disabled ? this.disable() : this.enable();
-    }
-    getDirty() {
-        this.markAsDirty();
-        Object.values(this.controls).forEach((control) => {
-            if (control instanceof SpecialFormControl) {
-                control.markAsDirty();
-            }
-            else if (control instanceof SpecialFormGroup) {
-                control.getDirty();
-            }
-            else if (control instanceof SpecialFormArray) {
-                control.getDirty();
-            }
-        });
-    }
-    specialReset(value = {}) {
-        const aux = {};
-        Object.entries(this.controls).map(([key, control]) => {
-            if (control instanceof SpecialFormControl) {
-                aux[key] = control.defaultValue;
-            }
-            else if (control instanceof SpecialFormArray) {
-                control.clear();
-            }
-        });
-        this.reset(Object.assign(Object.assign({}, aux), value));
-    }
-    setReadOnly(status = true) {
-        Object.values(this.controls).map((value) => {
-            if (value instanceof SpecialFormControl ||
-                value instanceof SpecialFormArray ||
-                value instanceof SpecialFormGroup) {
-                value.setReadOnly(status);
-            }
-        });
-    }
-    setReadOnlyByFields(fieldsObject) {
-        Object.entries(fieldsObject).map(([key, value]) => {
-            const control = this.controls[key];
-            if (control instanceof SpecialFormControl) {
-                control.readOnly = value;
-            }
-        });
-    }
-    setHiddenByFields(fields) {
-        Object.entries(fields).map(([key, value]) => {
-            const control = this.controls[key];
-            if (control instanceof SpecialFormControl) {
-                control.hidden = value;
-            }
-        });
-    }
-    setDisabled(status) {
-        Object.values(this.controls).map((value) => {
-            if (value instanceof SpecialFormControl ||
-                value instanceof SpecialFormArray ||
-                value instanceof SpecialFormGroup) {
-                value.setDisabled(status);
-            }
-        });
-    }
-    setDisabledByFields(fieldsObject) {
-        Object.entries(fieldsObject).map((entries) => {
-            if (this.controls[entries[0]] instanceof SpecialFormControl) {
-                entries[1]
-                    ? this.controls[entries[0]].enable()
-                    : this.controls[entries[0]].disable();
-            }
-        });
-    }
-    /**
-     * donde value es el objeto semilla y detailForm es un arreglo de form key para dar un marco al formarray
-     */
-    setFormValue(value) {
-        this.specialReset(value);
-        Object.entries(this.controls)
-            .filter(([_key, control]) => control instanceof SpecialFormArray)
-            .map(([key, control]) => {
-            control.fillFormArray(value[key]);
-        });
-    }
-    /**
-     * Método que retorna
-     */
-    getIdPkey() {
-        return Object.values(this.controls).find((control) => control instanceof SpecialFormControl && control.type === 'PRIMARY-KEY');
-    }
-}
-class SpecialFormArray extends FormArray {
-    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, placeholder, readOnly, required, tooltip, errorMessages, disabled, }, formCreation, controls) {
-        super(controls, validators, asyncValidators);
-        this.formCreation = formCreation;
-        this.form = this.formCreation();
-        this.name = name;
-        this.placeholder = placeholder;
-        this.label = label;
-        this.tooltip = tooltip;
-        this.icon = icon;
-        this.elementId = elementId;
-        this.settings = settings;
-        this.type = type;
-        this.styleClasses = styleClasses;
-        this.hidden = hidden;
-        this.readOnly = readOnly;
-        this.required = required;
-        this.defaultValue = defaultValue;
-        this.errorMessages = errorMessages;
-        disabled ? this.disable() : this.enable();
-    }
-    fillFormArray(data) {
-        this.form.reset();
-        this.clear();
-        data.forEach((item) => {
-            const form = this.formCreation(item);
-            this.push(form);
-        });
-    }
-    addItem() {
-        const form = this.formCreation(this.form.value);
-        this.form.specialReset();
-        this.push(form);
-        this.markAsDirty();
-    }
-    specialPush(index) {
-        const form = this.formCreation(this.form.value);
-        if (!index)
-            this.push(form);
-        else
-            this.controls[index].reset(this.form.value);
-    }
-    specialInsert(index = 0) {
-        const form = this.formCreation(this.form.value);
-        this.insert(index, form);
-    }
-    specialEdit(index, newValue) {
-        this.controls[index].reset(Object.assign(Object.assign({}, this.controls[index].value), newValue));
-        this.markAsDirty();
-    }
-    /**
-     * Vuelve todos los controles del formArray de lectura o de sololectura
-     * @param status
-     */
-    setReadOnly(status) {
-        this.readOnly = status;
-        this.controls.forEach((control) => {
-            if (control instanceof SpecialFormGroup) {
-                control.setReadOnly(status);
-            }
-        });
-    }
-    /**
-     * Vuelve todos los controles del formArray habilitados o deshabilitados
-     * @param status
-     */
-    setDisabled(status) {
-        status ? this.disable() : this.enable();
-        this.controls.forEach((control) => {
-            if (control instanceof SpecialFormGroup) {
-                control.setDisabled(status);
-            }
-        });
-    }
-    /**
-     * Permite editar un control especifico.
-     * @param index
-     */
-    editControl(index) {
-        this.form.reset(this.controls[index].value);
-    }
-    getDirty() {
-        this.markAsDirty();
-        this.form.getDirty();
-        this.controls.forEach((item) => {
-            item.getDirty();
-        });
-    }
-    recursiveFillForm(form, data) {
-        Object.entries(form.controls).map(([key, control]) => {
-            if (control instanceof FormControl) {
-                control.setValue(data[key]);
-            }
-            else if (control instanceof FormArray) {
-                data[key].forEach(() => { });
-            }
-            else if (control instanceof FormGroup) {
-                control.reset(data[key]);
-            }
-        });
-        return form;
-    }
-}
-
-class SpecialFormBuilderService {
-    constructor() {
-        this.defectField = {
-            asyncValidators: null,
-            validators: null,
-            defaultValue: null,
-            elementId: '',
-            hidden: false,
-            icon: '',
-            label: '',
-            disabled: false,
-            length: 0,
-            placeholder: '',
-            readOnly: false,
-            required: false,
-            styleClasses: '',
-            errorMessages: {},
-            tooltip: '',
-        };
-        this.inputDefectField = Object.assign(Object.assign({}, this.defectField), { settings: {}, type: EControlTypes.input, name: '' });
-        this.formDefectField = Object.assign(Object.assign({}, this.defectField), { settings: {
-                formFields: {},
-            }, type: EControlTypes.form, name: '' });
-        this.arrayDefectField = Object.assign(Object.assign({}, this.defectField), { settings: {
-                formFields: {},
-            }, type: EControlTypes.array, name: '' });
-    }
-    control(field) {
-        const formField = Object.assign(Object.assign({}, this.inputDefectField), field);
-        const { control } = this.setFormControl(formField);
-        return control;
-    }
-    group(fields, parentField = {}) {
-        return this.formGenerator(this.fieldDataToArray(fields), parentField);
-    }
-    array() { }
-    fieldDataToArray(fields) {
-        return Object.entries(fields).map(([name, field]) => this.setDefectFieldOptions(name, field));
-    }
-    setDefectFieldOptions(name, field) {
-        return Object.assign(Object.assign(Object.assign({}, this.inputDefectField), field), { name });
-    }
-    formGenerator(fields, parentField = {}) {
-        const formField = Object.assign(Object.assign({}, this.formDefectField), parentField);
-        const structure = fields
-            .map((field) => this.getControlAndNameByType(field))
-            .reduce((prev, { name, control }) => (Object.assign(Object.assign({}, prev), { [name]: control })), {});
-        return new SpecialFormGroup(formField, structure);
-    }
-    getControlAndNameByType(field) {
-        switch (field.type) {
-            case EControlTypes.array:
-                return this.setFormArray(field);
-            case EControlTypes.form:
-                return this.setFormGroup(field);
-            default:
-                return this.setFormControl(field);
-        }
-    }
-    setFormGroup(field) {
-        const control = this.formGenerator(this.fieldDataToArray(field.settings.formFields), field);
-        return { control, name: field.name };
-    }
-    setFormArray(field) {
-        const auxForm = (value = {}) => {
-            const auxForm = this.formGenerator(this.fieldDataToArray(field.settings.formFields), {});
-            auxForm.reset(value);
-            return auxForm;
-        };
-        if (field.required) {
-            field.validators = this.setValidatorsArray(field.validators, [
-                this.arrayLengthRequired,
-            ]);
-        }
-        return {
-            name: field.name,
-            control: new SpecialFormArray(field, auxForm, []),
-        };
-    }
-    setFormControl(field) {
-        const validators = [];
-        if (field.required)
-            validators.push(this.setRequiredValidator(field));
-        if (field.length)
-            validators.push(Validators.maxLength(field.length));
-        field.validators = this.setValidatorsArray(field.validators, validators);
-        return {
-            name: field.name,
-            control: new SpecialFormControl(field),
-        };
-    }
-    setRequiredValidator(field) {
-        if (field.type !== EControlTypes.autocomplete) {
-            return Validators.required;
-        }
-        return (control) => !!control.value && control.value instanceof Object
-            ? null
-            : { required: true };
-    }
-    setValidatorsArray(validators, newValidators) {
-        if (!validators) {
-            return newValidators;
-        }
-        return validators instanceof Array
-            ? [...validators, ...newValidators]
-            : [validators, ...newValidators];
-    }
-    arrayLengthRequired(control) {
-        if (control.value.length) {
-            return {};
-        }
-        return { noItems: 'NO_SELECTED_ITEM' };
-    }
-}
-SpecialFormBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SpecialFormBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class ErrorStateMatcherService {
-    isErrorState(control) {
-        return control && control.invalid && control.dirty;
-    }
-}
-ErrorStateMatcherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorStateMatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ErrorStateMatcherService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorStateMatcherService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorStateMatcherService, decorators: [{
-            type: Injectable
-        }] });
-
-class ISpecialControl {
-}
-
-const currencyInputMask = createMask({
-    alias: 'numeric',
-    groupSeparator: ',',
-    autoUnmask: true,
-    digits: 2,
-    digitsOptional: false,
-    prefix: '$ ',
-    placeholder: '0',
-});
-
-const numberMask = (max = 1000) => createMask({ alias: 'numeric', min: 0, max });
-
-/*
- * Public API Surface of special-forms
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { EControlTypes, ErrorMessagePipe, ErrorStateMatcherService, FormControlsListPipe, FormControlsRenderDirective, ISpecialControl, SpecialArrayComponent, SpecialAutocompleteComponent, SpecialCheckboxComponent, SpecialDatepickerComponent, SpecialDropdownComponent, SpecialFormArray, SpecialFormBuilderService, SpecialFormComponent, SpecialFormControl, SpecialFormGroup, SpecialFormModule, SpecialInputComponent, SpecialLabelComponent, SpecialMultipleAutocompleteComponent, SpecialRichtextComponent, SpecialTextAreaComponent, SpecialUploadComponent, TextByFunctionPipe, currencyInputMask, numberMask };
-//# sourceMappingURL=special-forms.mjs.map