verben-workflow-ui 0.5.76 → 0.5.78

package/fesm2022/verben-workflow-ui-src-lib-components-form-control.mjs

@@ -141,12 +141,12 @@ class FormControlComponent {
         }
         return this.selectedFilesMap.get(property);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlComponent, deps: [{ token: i1.HttpWebRequestService }, { token: i1.UtilService }, { token: i0.ChangeDetectorRef }, { token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormControlComponent, selector: "form-control", inputs: { dataType: "dataType", value: "value", boolInputType: "boolInputType", formProperties: "formProperties", disabled: "disabled" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6 w-full\">\n  <div *ngFor=\"let property of formProperties\">\n    <ng-container [ngSwitch]=\"property.DataType\">\n      <!-- Text, URL, and Color -->\n      <verbena-input\n        *ngSwitchCase=\"'Text'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'MailAddress'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'email'\"\n        [placeHolder]=\"'Enter email'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'URL'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'url'\"\n        [placeHolder]=\"'https://example.com'\"\n      ></verbena-input>\n      <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{ formatLabel(property) }}\n          <span class=\"flex items-center gap-1\">\n            <input\n              [id]=\"property.id\"\n              [disabled]=\"disabled || property.IsReadOnly\"\n              [(ngModel)]=\"property.Value\"\n              class=\"block mt-2 w-[100px]\"\n              [type]=\"'color'\"\n            />\n            <span\n              *ngIf=\"property.Value !== ''\"\n              class=\"font-semibold\"\n              [style.color]=\"property.Value\"\n              >:{{ property.Value }}</span\n            >\n          </span>\n        </label>\n      </div>\n      <verbena-textarea\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'MultilineText'\"\n        [label]=\"formatLabel(property)\"\n      ></verbena-textarea>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'PhoneNumber'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Number'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'number'\"\n        [placeHolder]=\"'Enter an integer'\"\n        [max]=\"property.MaxValue\"\n        [min]=\"property.MinValue\"\n      ></verbena-input>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Decimal'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter decimal value'\"\n      ></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\">\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{\n          formatLabel(property)\n        }}</label>\n        <verbena-switch\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [ngModel]=\"property.Value == 'true' || property.Value == 'True'\"\n          (ngModelChange)=\"property.Value = $event.toString()\"\n          [onText]=\"''\"\n          [offText]=\"''\"\n          [onColor]=\"'#1A237E'\"\n          [label]=\"formatLabel(property)\"\n        ></verbena-switch>\n      </ng-container>\n\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'video/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <video\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"w-full h-[100px] mt-3 rounded-md shadow\"\n        ></video>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'image/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <img\n          class=\"w-[100px] mx-auto\"\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n        />\n      </div>\n      <div *ngSwitchCase=\"'Audio'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'audio/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <audio\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"mt-3 w-full\"\n        ></audio>\n      </div>\n\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [placeholder]=\"property.Name\"\n          [filter]=\"true\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [multiselect]=\"true\"\n          [placeholder]=\"property.Name\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload\n          [multiple]=\"false\"\n          [selectedFiles]=\"getFiles(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [label]=\"formatLabel(property)\"\n        ></file-upload>\n        <ng-container [ngSwitch]=\"getFileExtension(property.Value)\">\n          <img\n            *ngSwitchCase=\"'jpg'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n          <img\n            *ngSwitchCase=\"'png'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n\n          <video\n            *ngSwitchCase=\"'mp4'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[150px] rounded-md shadow\"\n            controls\n          ></video>\n\n          <audio\n            *ngSwitchCase=\"'mp3'\"\n            [src]=\"setPreview(property.Value)\"\n            controls\n            class=\"w-[150px]\"\n          ></audio>\n        </ng-container>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [multiple]=\"true\"\n          [label]=\"formatLabel(property)\"\n        >\n        </file-upload>\n\n        <div *ngIf=\"property.Value !== ''\" class=\"flex flex-wrap gap-3 mt-3\">\n          <div *ngFor=\"let file of getFileArray(property.Value)\">\n            <ng-container [ngSwitch]=\"getFileExtension(file)\">\n              <img\n                *ngSwitchCase=\"'jpg'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n              <img\n                *ngSwitchCase=\"'png'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n\n              <video\n                *ngSwitchCase=\"'mp4'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[150px] rounded-md shadow\"\n                controls\n              ></video>\n\n              <audio\n                *ngSwitchCase=\"'mp3'\"\n                [src]=\"setPreview(file)\"\n                controls\n                class=\"w-[150px]\"\n              ></audio>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>Unsupported data type: {{ property.DataType }}</div>\n    </ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i4.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i4.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.FileUploadComponent, selector: "file-upload", inputs: ["multiple", "label", "accept", "selectedFiles", "disabled"], outputs: ["selectedFilesChange"] }, { kind: "component", type: i4.VerbenaTextareaComponent, selector: "verbena-textarea", inputs: ["label", "required", "rows", "cols", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "value", "errorMessageColor"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormControlComponent, deps: [{ token: i1.HttpWebRequestService }, { token: i1.UtilService }, { token: i0.ChangeDetectorRef }, { token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormControlComponent, selector: "form-control", inputs: { dataType: "dataType", value: "value", boolInputType: "boolInputType", formProperties: "formProperties", disabled: "disabled" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6 w-full\">\n  <div *ngFor=\"let property of formProperties\">\n    <ng-container [ngSwitch]=\"property.DataType\">\n      <!-- Text, URL, and Color -->\n      <verbena-input\n        *ngSwitchCase=\"'Text'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'MailAddress'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'email'\"\n        [placeHolder]=\"'Enter email'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'URL'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'url'\"\n        [placeHolder]=\"'https://example.com'\"\n      ></verbena-input>\n      <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{ formatLabel(property) }}\n          <span class=\"flex items-center gap-1\">\n            <input\n              [id]=\"property.id\"\n              [disabled]=\"disabled || property.IsReadOnly\"\n              [(ngModel)]=\"property.Value\"\n              class=\"block mt-2 w-[100px]\"\n              [type]=\"'color'\"\n            />\n            <span\n              *ngIf=\"property.Value !== ''\"\n              class=\"font-semibold\"\n              [style.color]=\"property.Value\"\n              >:{{ property.Value }}</span\n            >\n          </span>\n        </label>\n      </div>\n      <verbena-textarea\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'MultilineText'\"\n        [label]=\"formatLabel(property)\"\n      ></verbena-textarea>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'PhoneNumber'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Number'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'number'\"\n        [placeHolder]=\"'Enter an integer'\"\n        [max]=\"property.MaxValue\"\n        [min]=\"property.MinValue\"\n      ></verbena-input>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Decimal'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter decimal value'\"\n      ></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\">\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{\n          formatLabel(property)\n        }}</label>\n        <verbena-switch\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [ngModel]=\"property.Value == 'true' || property.Value == 'True'\"\n          (ngModelChange)=\"property.Value = $event.toString()\"\n          [onText]=\"''\"\n          [offText]=\"''\"\n          [onColor]=\"'var(--vbn-color-text)'\"\n          [label]=\"formatLabel(property)\"\n        ></verbena-switch>\n      </ng-container>\n\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'video/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <video\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"w-full h-[100px] mt-3 rounded-md shadow\"\n        ></video>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'image/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <img\n          class=\"w-[100px] mx-auto\"\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n        />\n      </div>\n      <div *ngSwitchCase=\"'Audio'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'audio/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <audio\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"mt-3 w-full\"\n        ></audio>\n      </div>\n\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [placeholder]=\"property.Name\"\n          [filter]=\"true\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [multiselect]=\"true\"\n          [placeholder]=\"property.Name\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload\n          [multiple]=\"false\"\n          [selectedFiles]=\"getFiles(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [label]=\"formatLabel(property)\"\n        ></file-upload>\n        <ng-container [ngSwitch]=\"getFileExtension(property.Value)\">\n          <img\n            *ngSwitchCase=\"'jpg'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n          <img\n            *ngSwitchCase=\"'png'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n\n          <video\n            *ngSwitchCase=\"'mp4'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[150px] rounded-md shadow\"\n            controls\n          ></video>\n\n          <audio\n            *ngSwitchCase=\"'mp3'\"\n            [src]=\"setPreview(property.Value)\"\n            controls\n            class=\"w-[150px]\"\n          ></audio>\n        </ng-container>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [multiple]=\"true\"\n          [label]=\"formatLabel(property)\"\n        >\n        </file-upload>\n\n        <div *ngIf=\"property.Value !== ''\" class=\"flex flex-wrap gap-3 mt-3\">\n          <div *ngFor=\"let file of getFileArray(property.Value)\">\n            <ng-container [ngSwitch]=\"getFileExtension(file)\">\n              <img\n                *ngSwitchCase=\"'jpg'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n              <img\n                *ngSwitchCase=\"'png'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n\n              <video\n                *ngSwitchCase=\"'mp4'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[150px] rounded-md shadow\"\n                controls\n              ></video>\n\n              <audio\n                *ngSwitchCase=\"'mp3'\"\n                [src]=\"setPreview(file)\"\n                controls\n                class=\"w-[150px]\"\n              ></audio>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>Unsupported data type: {{ property.DataType }}</div>\n    </ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i4.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i4.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.FileUploadComponent, selector: "file-upload", inputs: ["multiple", "label", "accept", "selectedFiles", "disabled"], outputs: ["selectedFilesChange"] }, { kind: "component", type: i4.VerbenaTextareaComponent, selector: "verbena-textarea", inputs: ["disabled", "label", "required", "rows", "cols", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "value", "errorMessageColor"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'form-control', template: "<div class=\"flex flex-col gap-6 w-full\">\n  <div *ngFor=\"let property of formProperties\">\n    <ng-container [ngSwitch]=\"property.DataType\">\n      <!-- Text, URL, and Color -->\n      <verbena-input\n        *ngSwitchCase=\"'Text'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'MailAddress'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'email'\"\n        [placeHolder]=\"'Enter email'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'URL'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'url'\"\n        [placeHolder]=\"'https://example.com'\"\n      ></verbena-input>\n      <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{ formatLabel(property) }}\n          <span class=\"flex items-center gap-1\">\n            <input\n              [id]=\"property.id\"\n              [disabled]=\"disabled || property.IsReadOnly\"\n              [(ngModel)]=\"property.Value\"\n              class=\"block mt-2 w-[100px]\"\n              [type]=\"'color'\"\n            />\n            <span\n              *ngIf=\"property.Value !== ''\"\n              class=\"font-semibold\"\n              [style.color]=\"property.Value\"\n              >:{{ property.Value }}</span\n            >\n          </span>\n        </label>\n      </div>\n      <verbena-textarea\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'MultilineText'\"\n        [label]=\"formatLabel(property)\"\n      ></verbena-textarea>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'PhoneNumber'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Number'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'number'\"\n        [placeHolder]=\"'Enter an integer'\"\n        [max]=\"property.MaxValue\"\n        [min]=\"property.MinValue\"\n      ></verbena-input>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Decimal'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter decimal value'\"\n      ></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\">\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{\n          formatLabel(property)\n        }}</label>\n        <verbena-switch\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [ngModel]=\"property.Value == 'true' || property.Value == 'True'\"\n          (ngModelChange)=\"property.Value = $event.toString()\"\n          [onText]=\"''\"\n          [offText]=\"''\"\n          [onColor]=\"'#1A237E'\"\n          [label]=\"formatLabel(property)\"\n        ></verbena-switch>\n      </ng-container>\n\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'video/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <video\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"w-full h-[100px] mt-3 rounded-md shadow\"\n        ></video>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'image/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <img\n          class=\"w-[100px] mx-auto\"\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n        />\n      </div>\n      <div *ngSwitchCase=\"'Audio'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'audio/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <audio\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"mt-3 w-full\"\n        ></audio>\n      </div>\n\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [placeholder]=\"property.Name\"\n          [filter]=\"true\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [multiselect]=\"true\"\n          [placeholder]=\"property.Name\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload\n          [multiple]=\"false\"\n          [selectedFiles]=\"getFiles(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [label]=\"formatLabel(property)\"\n        ></file-upload>\n        <ng-container [ngSwitch]=\"getFileExtension(property.Value)\">\n          <img\n            *ngSwitchCase=\"'jpg'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n          <img\n            *ngSwitchCase=\"'png'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n\n          <video\n            *ngSwitchCase=\"'mp4'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[150px] rounded-md shadow\"\n            controls\n          ></video>\n\n          <audio\n            *ngSwitchCase=\"'mp3'\"\n            [src]=\"setPreview(property.Value)\"\n            controls\n            class=\"w-[150px]\"\n          ></audio>\n        </ng-container>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [multiple]=\"true\"\n          [label]=\"formatLabel(property)\"\n        >\n        </file-upload>\n\n        <div *ngIf=\"property.Value !== ''\" class=\"flex flex-wrap gap-3 mt-3\">\n          <div *ngFor=\"let file of getFileArray(property.Value)\">\n            <ng-container [ngSwitch]=\"getFileExtension(file)\">\n              <img\n                *ngSwitchCase=\"'jpg'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n              <img\n                *ngSwitchCase=\"'png'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n\n              <video\n                *ngSwitchCase=\"'mp4'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[150px] rounded-md shadow\"\n                controls\n              ></video>\n\n              <audio\n                *ngSwitchCase=\"'mp3'\"\n                [src]=\"setPreview(file)\"\n                controls\n                class=\"w-[150px]\"\n              ></audio>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>Unsupported data type: {{ property.DataType }}</div>\n    </ng-container>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'form-control', template: "<div class=\"flex flex-col gap-6 w-full\">\n  <div *ngFor=\"let property of formProperties\">\n    <ng-container [ngSwitch]=\"property.DataType\">\n      <!-- Text, URL, and Color -->\n      <verbena-input\n        *ngSwitchCase=\"'Text'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'MailAddress'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'email'\"\n        [placeHolder]=\"'Enter email'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'URL'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'url'\"\n        [placeHolder]=\"'https://example.com'\"\n      ></verbena-input>\n      <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{ formatLabel(property) }}\n          <span class=\"flex items-center gap-1\">\n            <input\n              [id]=\"property.id\"\n              [disabled]=\"disabled || property.IsReadOnly\"\n              [(ngModel)]=\"property.Value\"\n              class=\"block mt-2 w-[100px]\"\n              [type]=\"'color'\"\n            />\n            <span\n              *ngIf=\"property.Value !== ''\"\n              class=\"font-semibold\"\n              [style.color]=\"property.Value\"\n              >:{{ property.Value }}</span\n            >\n          </span>\n        </label>\n      </div>\n      <verbena-textarea\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'MultilineText'\"\n        [label]=\"formatLabel(property)\"\n      ></verbena-textarea>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'PhoneNumber'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Number'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'number'\"\n        [placeHolder]=\"'Enter an integer'\"\n        [max]=\"property.MaxValue\"\n        [min]=\"property.MinValue\"\n      ></verbena-input>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Decimal'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter decimal value'\"\n      ></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\">\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{\n          formatLabel(property)\n        }}</label>\n        <verbena-switch\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [ngModel]=\"property.Value == 'true' || property.Value == 'True'\"\n          (ngModelChange)=\"property.Value = $event.toString()\"\n          [onText]=\"''\"\n          [offText]=\"''\"\n          [onColor]=\"'var(--vbn-color-text)'\"\n          [label]=\"formatLabel(property)\"\n        ></verbena-switch>\n      </ng-container>\n\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'video/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <video\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"w-full h-[100px] mt-3 rounded-md shadow\"\n        ></video>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'image/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <img\n          class=\"w-[100px] mx-auto\"\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n        />\n      </div>\n      <div *ngSwitchCase=\"'Audio'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'audio/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <audio\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"mt-3 w-full\"\n        ></audio>\n      </div>\n\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [placeholder]=\"property.Name\"\n          [filter]=\"true\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [multiselect]=\"true\"\n          [placeholder]=\"property.Name\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload\n          [multiple]=\"false\"\n          [selectedFiles]=\"getFiles(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [label]=\"formatLabel(property)\"\n        ></file-upload>\n        <ng-container [ngSwitch]=\"getFileExtension(property.Value)\">\n          <img\n            *ngSwitchCase=\"'jpg'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n          <img\n            *ngSwitchCase=\"'png'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n\n          <video\n            *ngSwitchCase=\"'mp4'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[150px] rounded-md shadow\"\n            controls\n          ></video>\n\n          <audio\n            *ngSwitchCase=\"'mp3'\"\n            [src]=\"setPreview(property.Value)\"\n            controls\n            class=\"w-[150px]\"\n          ></audio>\n        </ng-container>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [multiple]=\"true\"\n          [label]=\"formatLabel(property)\"\n        >\n        </file-upload>\n\n        <div *ngIf=\"property.Value !== ''\" class=\"flex flex-wrap gap-3 mt-3\">\n          <div *ngFor=\"let file of getFileArray(property.Value)\">\n            <ng-container [ngSwitch]=\"getFileExtension(file)\">\n              <img\n                *ngSwitchCase=\"'jpg'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n              <img\n                *ngSwitchCase=\"'png'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n\n              <video\n                *ngSwitchCase=\"'mp4'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[150px] rounded-md shadow\"\n                controls\n              ></video>\n\n              <audio\n                *ngSwitchCase=\"'mp3'\"\n                [src]=\"setPreview(file)\"\n                controls\n                class=\"w-[150px]\"\n              ></audio>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>Unsupported data type: {{ property.DataType }}</div>\n    </ng-container>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.HttpWebRequestService }, { type: i1.UtilService }, { type: i0.ChangeDetectorRef }, { type: i1.EnvironmentService }], propDecorators: { dataType: [{
                 type: Input
             }], value: [{
@@ -160,8 +160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class FormControlerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FormControlerModule, declarations: [FormControlComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormControlerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FormControlerModule, declarations: [FormControlComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             DataTableModule,
@@ -179,7 +179,7 @@ class FormControlerModule {
             VerbenaInputModule,
             FileUploadModule,
             VerbenaTextareaModule], exports: [FormControlComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlerModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormControlerModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             DataTableModule,
@@ -198,7 +198,7 @@ class FormControlerModule {
             FileUploadModule,
             VerbenaTextareaModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormControlerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FormControlComponent],

package/fesm2022/verben-workflow-ui-src-lib-components-form-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"verben-workflow-ui-src-lib-components-form-control.mjs","sources":["../../../projects/verben-workflow-ui/src/lib/components/form-control/form-control.component.ts","../../../projects/verben-workflow-ui/src/lib/components/form-control/form-control.component.html","../../../projects/verben-workflow-ui/src/lib/components/form-control/form-control.module.ts","../../../projects/verben-workflow-ui/src/lib/components/form-control/verben-workflow-ui-src-lib-components-form-control.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport {\n  ErrorResponse,\n  FormProperty,\n  ObjectState,\n} from 'verben-workflow-ui/src/lib/models';\nimport { DataType, File as FileData } from 'verben-workflow-ui/src/lib/models';\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\nimport {\n  HttpWebRequestService,\n  UtilService,\n} from 'verben-workflow-ui/src/lib/services';\nimport { EnvironmentService } from 'verben-workflow-ui/src/lib/services';\nimport { ChangeDetectorRef } from '@angular/core';\nexport type BoolInputType = 'switch' | 'checkbox' | 'radio';\n\n@Component({\n  selector: 'form-control',\n  templateUrl: './form-control.component.html',\n  styleUrls: ['./form-control.component.css'],\n})\nexport class FormControlComponent implements OnInit {\n  @Input() dataType!: DataType;\n  @Input() value: any = '';\n  @Input() boolInputType: BoolInputType = 'checkbox';\n  @Input() formProperties: FormProperty[] = [];\n  @Input() disabled: boolean = false;\n\n  fileBaseUrl: string = '';\n  fileUrl: string = '';\n  constructor(\n    private server: HttpWebRequestService,\n    private utilService: UtilService,\n    private cdr: ChangeDetectorRef,\n    private envSvc: EnvironmentService,\n  ) {\n    this.fileBaseUrl = this.envSvc.environment.FILE_BASE_URL;\n    this.fileUrl = this.envSvc.environment.FILE_URL;\n  }\n\n  ngOnInit(): void {\n    this.initializeDefaultValue();\n  }\n\n  initializeDefaultValue() {\n    if (this.dataType === DataType.YesNo && this.value === '') {\n      this.value = false;\n    } else if (!this.value) {\n      this.value = '';\n    }\n  }\n  onFileSelect(data: any, property: FormProperty): void {\n    const files: any = data;\n\n    if (!files || files.length === 0) return;\n\n    const fileArray: FileData[] = [];\n    const readers: Promise<void>[] = [];\n\n    for (let i = 0; i < files.length; i++) {\n      const file = files[i];\n      const reader = new FileReader();\n\n      const promise = new Promise<void>((resolve, reject) => {\n        reader.onload = () => {\n          const base64 = reader.result as string;\n          fileArray.push({\n            Extension: file.name.split('.').pop(),\n            Name: this.generateRandomCode(),\n            Data: base64,\n            DataState: ObjectState.New,\n          });\n          resolve();\n        };\n\n        reader.onerror = (error) => reject(error);\n        reader.readAsDataURL(file);\n      });\n\n      readers.push(promise);\n    }\n\n    Promise.all(readers).then(() => {\n      console.log('Files ready to upload:', fileArray);\n      this.uploadFile(fileArray, property);\n    });\n  }\n  private generateRandomCode(length: number = 10): string {\n    const chars =\n      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n    let result = '';\n    for (let i = 0; i < length; i++) {\n      result += chars.charAt(Math.floor(Math.random() * chars.length));\n    }\n    return result;\n  }\n  setPreview(val: string): string {\n    if (!val) return '';\n    const first = val.split(',')[0].trim();\n\n    if (first.startsWith('http') || first.startsWith('data:')) {\n      return first;\n    }\n    return `${this.envSvc.environment.FILE_URL}/${first}`;\n  }\n\n  getFileArray(value: string): string[] {\n    if (!value) return [];\n    return value\n      .split(',')\n      .map((v) => v.trim())\n      .filter((v) => v);\n  }\n\n  getFileExtension(fileUrl: string): string {\n    const parts = fileUrl.split('.');\n    return parts[parts.length - 1].toLowerCase();\n  }\n\n  async uploadFile(\n    files: FileData[],\n    property: FormProperty,\n  ): Promise<any[] | undefined> {\n    this.utilService.sendBI(true);\n    const res = await this.server.post(\n      `SaveFiles`,\n      files,\n      this.envSvc.environment.FILE_BASE_URL,\n    );\n    this.utilService.sendBI(false);\n    if (res instanceof ErrorResponse) {\n      return undefined;\n    } else {\n      var result = res as any;\n      const joinedResult = result.join(',');\n      property.Value = joinedResult;\n\n      this.cdr.detectChanges();\n      return result;\n    }\n  }\n  formatLabel(property: any): string {\n    return property.IsRequired\n      ? `${property.Name} *`\n      : `${property.Name} (Optional)`;\n  }\n  optionsArray(property: any) {\n    property.Options?.split(',').map((option: any) => option.trim());\n    return property.Options?.split(',').map((option: any) => option.trim());\n  }\n  onSelectedFileChange(files: File[]) {\n    console.log(files);\n  }\n\n  getSelectedFilesIfAny(property: FormProperty): File[] {\n    var fileMock: any = {\n      name: property.Value,\n    };\n\n    return property.Value.trim().length > 0 ? [fileMock] : [];\n  }\n\n  selectedFilesMap = new Map<any, File[]>();\n\n  getFiles(property: any): File[] {\n    if (!this.selectedFilesMap.has(property)) {\n      this.selectedFilesMap.set(property, this.getSelectedFilesIfAny(property));\n    }\n    return this.selectedFilesMap.get(property)!;\n  }\n}\n","<div class=\"flex flex-col gap-6 w-full\">\n  <div *ngFor=\"let property of formProperties\">\n    <ng-container [ngSwitch]=\"property.DataType\">\n      <!-- Text, URL, and Color -->\n      <verbena-input\n        *ngSwitchCase=\"'Text'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'MailAddress'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'email'\"\n        [placeHolder]=\"'Enter email'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'URL'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'url'\"\n        [placeHolder]=\"'https://example.com'\"\n      ></verbena-input>\n      <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{ formatLabel(property) }}\n          <span class=\"flex items-center gap-1\">\n            <input\n              [id]=\"property.id\"\n              [disabled]=\"disabled || property.IsReadOnly\"\n              [(ngModel)]=\"property.Value\"\n              class=\"block mt-2 w-[100px]\"\n              [type]=\"'color'\"\n            />\n            <span\n              *ngIf=\"property.Value !== ''\"\n              class=\"font-semibold\"\n              [style.color]=\"property.Value\"\n              >:{{ property.Value }}</span\n            >\n          </span>\n        </label>\n      </div>\n      <verbena-textarea\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'MultilineText'\"\n        [label]=\"formatLabel(property)\"\n      ></verbena-textarea>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'PhoneNumber'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Number'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'number'\"\n        [placeHolder]=\"'Enter an integer'\"\n        [max]=\"property.MaxValue\"\n        [min]=\"property.MinValue\"\n      ></verbena-input>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Decimal'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter decimal value'\"\n      ></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\">\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{\n          formatLabel(property)\n        }}</label>\n        <verbena-switch\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [ngModel]=\"property.Value == 'true' || property.Value == 'True'\"\n          (ngModelChange)=\"property.Value = $event.toString()\"\n          [onText]=\"''\"\n          [offText]=\"''\"\n          [onColor]=\"'#1A237E'\"\n          [label]=\"formatLabel(property)\"\n        ></verbena-switch>\n      </ng-container>\n\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'video/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <video\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"w-full h-[100px] mt-3 rounded-md shadow\"\n        ></video>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'image/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <img\n          class=\"w-[100px] mx-auto\"\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n        />\n      </div>\n      <div *ngSwitchCase=\"'Audio'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'audio/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <audio\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"mt-3 w-full\"\n        ></audio>\n      </div>\n\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [placeholder]=\"property.Name\"\n          [filter]=\"true\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [multiselect]=\"true\"\n          [placeholder]=\"property.Name\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload\n          [multiple]=\"false\"\n          [selectedFiles]=\"getFiles(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [label]=\"formatLabel(property)\"\n        ></file-upload>\n        <ng-container [ngSwitch]=\"getFileExtension(property.Value)\">\n          <img\n            *ngSwitchCase=\"'jpg'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n          <img\n            *ngSwitchCase=\"'png'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n\n          <video\n            *ngSwitchCase=\"'mp4'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[150px] rounded-md shadow\"\n            controls\n          ></video>\n\n          <audio\n            *ngSwitchCase=\"'mp3'\"\n            [src]=\"setPreview(property.Value)\"\n            controls\n            class=\"w-[150px]\"\n          ></audio>\n        </ng-container>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [multiple]=\"true\"\n          [label]=\"formatLabel(property)\"\n        >\n        </file-upload>\n\n        <div *ngIf=\"property.Value !== ''\" class=\"flex flex-wrap gap-3 mt-3\">\n          <div *ngFor=\"let file of getFileArray(property.Value)\">\n            <ng-container [ngSwitch]=\"getFileExtension(file)\">\n              <img\n                *ngSwitchCase=\"'jpg'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n              <img\n                *ngSwitchCase=\"'png'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n\n              <video\n                *ngSwitchCase=\"'mp4'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[150px] rounded-md shadow\"\n                controls\n              ></video>\n\n              <audio\n                *ngSwitchCase=\"'mp3'\"\n                [src]=\"setPreview(file)\"\n                controls\n                class=\"w-[150px]\"\n              ></audio>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>Unsupported data type: {{ property.DataType }}</div>\n    </ng-container>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport {\n  CardDataViewModule,\n  DataExportModule,\n  DataTableModule,\n  DataViewModule,\n  DropDownModule,\n  SortTableModule,\n  SvgModule,\n  TableFilterModule,\n  VerbenaButtonModule,\n  VerbenaInputModule,\n  VerbenaSwitchModule,\n  VerbenaTextareaModule,\n  VerbenPopUpModule,\n  VisibleColumnModule,\n} from 'verben-ng-ui';\nimport { FormControlComponent } from './form-control.component';\nimport { FileUploadModule } from 'verben-workflow-ui/src/lib/components/file-upload';\n@NgModule({\n  declarations: [FormControlComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    DataTableModule,\n    SvgModule,\n    VerbenPopUpModule,\n    DataViewModule,\n    VerbenaButtonModule,\n    CardDataViewModule,\n    DropDownModule,\n    VerbenaSwitchModule,\n    TableFilterModule,\n    VisibleColumnModule,\n    SortTableModule,\n    DataExportModule,\n    VerbenaInputModule,\n    FileUploadModule,\n    VerbenaTextareaModule,\n  ],\n  exports: [FormControlComponent],\n})\nexport class FormControlerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAqBa,oBAAoB,CAAA;AAUrB,IAAA,MAAA,CAAA;AACA,IAAA,WAAA,CAAA;AACA,IAAA,GAAA,CAAA;AACA,IAAA,MAAA,CAAA;AAZD,IAAA,QAAQ,CAAY;IACpB,KAAK,GAAQ,EAAE,CAAC;IAChB,aAAa,GAAkB,UAAU,CAAC;IAC1C,cAAc,GAAmB,EAAE,CAAC;IACpC,QAAQ,GAAY,KAAK,CAAC;IAEnC,WAAW,GAAW,EAAE,CAAC;IACzB,OAAO,GAAW,EAAE,CAAC;AACrB,IAAA,WAAA,CACU,MAA6B,EAC7B,WAAwB,EACxB,GAAsB,EACtB,MAA0B,EAAA;QAH1B,IAAM,CAAA,MAAA,GAAN,MAAM,CAAuB;QAC7B,IAAW,CAAA,WAAA,GAAX,WAAW,CAAa;QACxB,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;QACtB,IAAM,CAAA,MAAA,GAAN,MAAM,CAAoB;QAElC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC;QACzD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC;KACjD;IAED,QAAQ,GAAA;QACN,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,sBAAsB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;AACzD,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;AAAM,aAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;SACjB;KACF;IACD,YAAY,CAAC,IAAS,EAAE,QAAsB,EAAA;QAC5C,MAAM,KAAK,GAAQ,IAAI,CAAC;AAExB,QAAA,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAEzC,MAAM,SAAS,GAAe,EAAE,CAAC;QACjC,MAAM,OAAO,GAAoB,EAAE,CAAC;AAEpC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrC,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AACtB,YAAA,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;YAEhC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,KAAI;AACpD,gBAAA,MAAM,CAAC,MAAM,GAAG,MAAK;AACnB,oBAAA,MAAM,MAAM,GAAG,MAAM,CAAC,MAAgB,CAAC;oBACvC,SAAS,CAAC,IAAI,CAAC;wBACb,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE;AACrC,wBAAA,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE;AAC/B,wBAAA,IAAI,EAAE,MAAM;wBACZ,SAAS,EAAE,WAAW,CAAC,GAAG;AAC3B,qBAAA,CAAC,CAAC;AACH,oBAAA,OAAO,EAAE,CAAC;AACZ,iBAAC,CAAC;AAEF,gBAAA,MAAM,CAAC,OAAO,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;AAC1C,gBAAA,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;AAC7B,aAAC,CAAC,CAAC;AAEH,YAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACvB;QAED,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AAC7B,YAAA,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;AACjD,YAAA,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AACvC,SAAC,CAAC,CAAC;KACJ;IACO,kBAAkB,CAAC,SAAiB,EAAE,EAAA;QAC5C,MAAM,KAAK,GACT,gEAAgE,CAAC;QACnE,IAAI,MAAM,GAAG,EAAE,CAAC;AAChB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;AAC/B,YAAA,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;SAClE;AACD,QAAA,OAAO,MAAM,CAAC;KACf;AACD,IAAA,UAAU,CAAC,GAAW,EAAA;AACpB,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,EAAE,CAAC;AACpB,QAAA,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AAEvC,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;AACzD,YAAA,OAAO,KAAK,CAAC;SACd;QACD,OAAO,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAC;KACvD;AAED,IAAA,YAAY,CAAC,KAAa,EAAA;AACxB,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE,CAAC;AACtB,QAAA,OAAO,KAAK;aACT,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;aACpB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACrB;AAED,IAAA,gBAAgB,CAAC,OAAe,EAAA;QAC9B,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACjC,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC9C;AAED,IAAA,MAAM,UAAU,CACd,KAAiB,EACjB,QAAsB,EAAA;AAEtB,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9B,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAChC,CAAA,SAAA,CAAW,EACX,KAAK,EACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,CACtC,CAAC;AACF,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC/B,QAAA,IAAI,GAAG,YAAY,aAAa,EAAE;AAChC,YAAA,OAAO,SAAS,CAAC;SAClB;aAAM;YACL,IAAI,MAAM,GAAG,GAAU,CAAC;YACxB,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACtC,YAAA,QAAQ,CAAC,KAAK,GAAG,YAAY,CAAC;AAE9B,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;AACzB,YAAA,OAAO,MAAM,CAAC;SACf;KACF;AACD,IAAA,WAAW,CAAC,QAAa,EAAA;QACvB,OAAO,QAAQ,CAAC,UAAU;AACxB,cAAE,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAI,EAAA,CAAA;AACtB,cAAE,CAAG,EAAA,QAAQ,CAAC,IAAI,aAAa,CAAC;KACnC;AACD,IAAA,YAAY,CAAC,QAAa,EAAA;QACxB,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAW,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QACjE,OAAO,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAW,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;KACzE;AACD,IAAA,oBAAoB,CAAC,KAAa,EAAA;AAChC,QAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KACpB;AAED,IAAA,qBAAqB,CAAC,QAAsB,EAAA;AAC1C,QAAA,IAAI,QAAQ,GAAQ;YAClB,IAAI,EAAE,QAAQ,CAAC,KAAK;SACrB,CAAC;QAEF,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;KAC3D;AAED,IAAA,gBAAgB,GAAG,IAAI,GAAG,EAAe,CAAC;AAE1C,IAAA,QAAQ,CAAC,QAAa,EAAA;QACpB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AACxC,YAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,CAAC;SAC3E;QACD,OAAO,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,CAAE,CAAC;KAC7C;wGApJU,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,WAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,8LCrBjC,wgSA8PA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,YAAA,EAAA,OAAA,EAAA,aAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,cAAA,EAAA,SAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,YAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,SAAA,EAAA,OAAA,EAAA,QAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,SAAA,EAAA,QAAA,EAAA,cAAA,EAAA,WAAA,EAAA,OAAA,EAAA,eAAA,EAAA,YAAA,EAAA,SAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,KAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,eAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,cAAA,EAAA,IAAA,EAAA,OAAA,EAAA,QAAA,EAAA,OAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDzOa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,SAAS;+BACE,cAAc,EAAA,QAAA,EAAA,wgSAAA,EAAA,CAAA;qLAKf,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;;;MEoBK,mBAAmB,CAAA;wGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAnB,mBAAmB,EAAA,YAAA,EAAA,CAvBf,oBAAoB,CAAA,EAAA,OAAA,EAAA,CAEjC,YAAY;YACZ,WAAW;YACX,mBAAmB;YACnB,eAAe;YACf,SAAS;YACT,iBAAiB;YACjB,cAAc;YACd,mBAAmB;YACnB,kBAAkB;YAClB,cAAc;YACd,mBAAmB;YACnB,iBAAiB;YACjB,mBAAmB;YACnB,eAAe;YACf,gBAAgB;YAChB,kBAAkB;YAClB,gBAAgB;AAChB,YAAA,qBAAqB,aAEb,oBAAoB,CAAA,EAAA,CAAA,CAAA;AAEnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YArB5B,YAAY;YACZ,WAAW;YACX,mBAAmB;YACnB,eAAe;YACf,SAAS;YACT,iBAAiB;YACjB,cAAc;YACd,mBAAmB;YACnB,kBAAkB;YAClB,cAAc;YACd,mBAAmB;YACnB,iBAAiB;YACjB,mBAAmB;YACnB,eAAe;YACf,gBAAgB;YAChB,kBAAkB;YAClB,gBAAgB;YAChB,qBAAqB,CAAA,EAAA,CAAA,CAAA;;4FAIZ,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAxB/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;AACpC,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBACX,mBAAmB;wBACnB,eAAe;wBACf,SAAS;wBACT,iBAAiB;wBACjB,cAAc;wBACd,mBAAmB;wBACnB,kBAAkB;wBAClB,cAAc;wBACd,mBAAmB;wBACnB,iBAAiB;wBACjB,mBAAmB;wBACnB,eAAe;wBACf,gBAAgB;wBAChB,kBAAkB;wBAClB,gBAAgB;wBAChB,qBAAqB;AACtB,qBAAA;oBACD,OAAO,EAAE,CAAC,oBAAoB,CAAC;AAChC,iBAAA,CAAA;;;AC7CD;;AAEG;;;;"}
+{"version":3,"file":"verben-workflow-ui-src-lib-components-form-control.mjs","sources":["../../../projects/verben-workflow-ui/src/lib/components/form-control/form-control.component.ts","../../../projects/verben-workflow-ui/src/lib/components/form-control/form-control.component.html","../../../projects/verben-workflow-ui/src/lib/components/form-control/form-control.module.ts","../../../projects/verben-workflow-ui/src/lib/components/form-control/verben-workflow-ui-src-lib-components-form-control.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport {\n  ErrorResponse,\n  FormProperty,\n  ObjectState,\n} from 'verben-workflow-ui/src/lib/models';\nimport { DataType, File as FileData } from 'verben-workflow-ui/src/lib/models';\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\nimport {\n  HttpWebRequestService,\n  UtilService,\n} from 'verben-workflow-ui/src/lib/services';\nimport { EnvironmentService } from 'verben-workflow-ui/src/lib/services';\nimport { ChangeDetectorRef } from '@angular/core';\nexport type BoolInputType = 'switch' | 'checkbox' | 'radio';\n\n@Component({\n  selector: 'form-control',\n  templateUrl: './form-control.component.html',\n  styleUrls: ['./form-control.component.css'],\n})\nexport class FormControlComponent implements OnInit {\n  @Input() dataType!: DataType;\n  @Input() value: any = '';\n  @Input() boolInputType: BoolInputType = 'checkbox';\n  @Input() formProperties: FormProperty[] = [];\n  @Input() disabled: boolean = false;\n\n  fileBaseUrl: string = '';\n  fileUrl: string = '';\n  constructor(\n    private server: HttpWebRequestService,\n    private utilService: UtilService,\n    private cdr: ChangeDetectorRef,\n    private envSvc: EnvironmentService,\n  ) {\n    this.fileBaseUrl = this.envSvc.environment.FILE_BASE_URL;\n    this.fileUrl = this.envSvc.environment.FILE_URL;\n  }\n\n  ngOnInit(): void {\n    this.initializeDefaultValue();\n  }\n\n  initializeDefaultValue() {\n    if (this.dataType === DataType.YesNo && this.value === '') {\n      this.value = false;\n    } else if (!this.value) {\n      this.value = '';\n    }\n  }\n  onFileSelect(data: any, property: FormProperty): void {\n    const files: any = data;\n\n    if (!files || files.length === 0) return;\n\n    const fileArray: FileData[] = [];\n    const readers: Promise<void>[] = [];\n\n    for (let i = 0; i < files.length; i++) {\n      const file = files[i];\n      const reader = new FileReader();\n\n      const promise = new Promise<void>((resolve, reject) => {\n        reader.onload = () => {\n          const base64 = reader.result as string;\n          fileArray.push({\n            Extension: file.name.split('.').pop(),\n            Name: this.generateRandomCode(),\n            Data: base64,\n            DataState: ObjectState.New,\n          });\n          resolve();\n        };\n\n        reader.onerror = (error) => reject(error);\n        reader.readAsDataURL(file);\n      });\n\n      readers.push(promise);\n    }\n\n    Promise.all(readers).then(() => {\n      console.log('Files ready to upload:', fileArray);\n      this.uploadFile(fileArray, property);\n    });\n  }\n  private generateRandomCode(length: number = 10): string {\n    const chars =\n      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n    let result = '';\n    for (let i = 0; i < length; i++) {\n      result += chars.charAt(Math.floor(Math.random() * chars.length));\n    }\n    return result;\n  }\n  setPreview(val: string): string {\n    if (!val) return '';\n    const first = val.split(',')[0].trim();\n\n    if (first.startsWith('http') || first.startsWith('data:')) {\n      return first;\n    }\n    return `${this.envSvc.environment.FILE_URL}/${first}`;\n  }\n\n  getFileArray(value: string): string[] {\n    if (!value) return [];\n    return value\n      .split(',')\n      .map((v) => v.trim())\n      .filter((v) => v);\n  }\n\n  getFileExtension(fileUrl: string): string {\n    const parts = fileUrl.split('.');\n    return parts[parts.length - 1].toLowerCase();\n  }\n\n  async uploadFile(\n    files: FileData[],\n    property: FormProperty,\n  ): Promise<any[] | undefined> {\n    this.utilService.sendBI(true);\n    const res = await this.server.post(\n      `SaveFiles`,\n      files,\n      this.envSvc.environment.FILE_BASE_URL,\n    );\n    this.utilService.sendBI(false);\n    if (res instanceof ErrorResponse) {\n      return undefined;\n    } else {\n      var result = res as any;\n      const joinedResult = result.join(',');\n      property.Value = joinedResult;\n\n      this.cdr.detectChanges();\n      return result;\n    }\n  }\n  formatLabel(property: any): string {\n    return property.IsRequired\n      ? `${property.Name} *`\n      : `${property.Name} (Optional)`;\n  }\n  optionsArray(property: any) {\n    property.Options?.split(',').map((option: any) => option.trim());\n    return property.Options?.split(',').map((option: any) => option.trim());\n  }\n  onSelectedFileChange(files: File[]) {\n    console.log(files);\n  }\n\n  getSelectedFilesIfAny(property: FormProperty): File[] {\n    var fileMock: any = {\n      name: property.Value,\n    };\n\n    return property.Value.trim().length > 0 ? [fileMock] : [];\n  }\n\n  selectedFilesMap = new Map<any, File[]>();\n\n  getFiles(property: any): File[] {\n    if (!this.selectedFilesMap.has(property)) {\n      this.selectedFilesMap.set(property, this.getSelectedFilesIfAny(property));\n    }\n    return this.selectedFilesMap.get(property)!;\n  }\n}\n","<div class=\"flex flex-col gap-6 w-full\">\n  <div *ngFor=\"let property of formProperties\">\n    <ng-container [ngSwitch]=\"property.DataType\">\n      <!-- Text, URL, and Color -->\n      <verbena-input\n        *ngSwitchCase=\"'Text'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'MailAddress'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'email'\"\n        [placeHolder]=\"'Enter email'\"\n      ></verbena-input>\n      <verbena-input\n        *ngSwitchCase=\"'URL'\"\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'url'\"\n        [placeHolder]=\"'https://example.com'\"\n      ></verbena-input>\n      <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{ formatLabel(property) }}\n          <span class=\"flex items-center gap-1\">\n            <input\n              [id]=\"property.id\"\n              [disabled]=\"disabled || property.IsReadOnly\"\n              [(ngModel)]=\"property.Value\"\n              class=\"block mt-2 w-[100px]\"\n              [type]=\"'color'\"\n            />\n            <span\n              *ngIf=\"property.Value !== ''\"\n              class=\"font-semibold\"\n              [style.color]=\"property.Value\"\n              >:{{ property.Value }}</span\n            >\n          </span>\n        </label>\n      </div>\n      <verbena-textarea\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'MultilineText'\"\n        [label]=\"formatLabel(property)\"\n      ></verbena-textarea>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'PhoneNumber'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter text'\"\n      ></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Number'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'number'\"\n        [placeHolder]=\"'Enter an integer'\"\n        [max]=\"property.MaxValue\"\n        [min]=\"property.MinValue\"\n      ></verbena-input>\n      <verbena-input\n        [disabled]=\"disabled || property.IsReadOnly\"\n        [(ngModel)]=\"property.Value\"\n        *ngSwitchCase=\"'Decimal'\"\n        [label]=\"formatLabel(property)\"\n        [type]=\"'text'\"\n        [placeHolder]=\"'Enter decimal value'\"\n      ></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\">\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{\n          formatLabel(property)\n        }}</label>\n        <verbena-switch\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [ngModel]=\"property.Value == 'true' || property.Value == 'True'\"\n          (ngModelChange)=\"property.Value = $event.toString()\"\n          [onText]=\"''\"\n          [offText]=\"''\"\n          [onColor]=\"'var(--vbn-color-text)'\"\n          [label]=\"formatLabel(property)\"\n        ></verbena-switch>\n      </ng-container>\n\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'video/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <video\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"w-full h-[100px] mt-3 rounded-md shadow\"\n        ></video>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'image/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <img\n          class=\"w-[100px] mx-auto\"\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n        />\n      </div>\n      <div *ngSwitchCase=\"'Audio'\">\n        <file-upload\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n          [label]=\"formatLabel(property)\"\n          [accept]=\"'audio/*'\"\n          [multiple]=\"false\"\n        ></file-upload>\n        <audio\n          *ngIf=\"property.Value !== ''\"\n          [src]=\"setPreview(property.Value)\"\n          controls\n          class=\"mt-3 w-full\"\n        ></audio>\n      </div>\n\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [placeholder]=\"property.Name\"\n          [filter]=\"true\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{ formatLabel(property) }}</div>\n        <verben-drop-down\n          width=\"100%\"\n          [multiselect]=\"true\"\n          [placeholder]=\"property.Name\"\n          [options]=\"optionsArray(property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [(ngModel)]=\"property.Value\"\n        ></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload\n          [multiple]=\"false\"\n          [selectedFiles]=\"getFiles(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [label]=\"formatLabel(property)\"\n        ></file-upload>\n        <ng-container [ngSwitch]=\"getFileExtension(property.Value)\">\n          <img\n            *ngSwitchCase=\"'jpg'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n          <img\n            *ngSwitchCase=\"'png'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n          />\n\n          <video\n            *ngSwitchCase=\"'mp4'\"\n            [src]=\"setPreview(property.Value)\"\n            class=\"w-[150px] rounded-md shadow\"\n            controls\n          ></video>\n\n          <audio\n            *ngSwitchCase=\"'mp3'\"\n            [src]=\"setPreview(property.Value)\"\n            controls\n            class=\"w-[150px]\"\n          ></audio>\n        </ng-container>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload\n          [disabled]=\"disabled || property.IsReadOnly\"\n          [selectedFiles]=\"getSelectedFilesIfAny(property)\"\n          (selectedFilesChange)=\"onFileSelect($event, property)\"\n          [multiple]=\"true\"\n          [label]=\"formatLabel(property)\"\n        >\n        </file-upload>\n\n        <div *ngIf=\"property.Value !== ''\" class=\"flex flex-wrap gap-3 mt-3\">\n          <div *ngFor=\"let file of getFileArray(property.Value)\">\n            <ng-container [ngSwitch]=\"getFileExtension(file)\">\n              <img\n                *ngSwitchCase=\"'jpg'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n              <img\n                *ngSwitchCase=\"'png'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[100px] h-[100px] object-cover rounded-md border\"\n              />\n\n              <video\n                *ngSwitchCase=\"'mp4'\"\n                [src]=\"setPreview(file)\"\n                class=\"w-[150px] rounded-md shadow\"\n                controls\n              ></video>\n\n              <audio\n                *ngSwitchCase=\"'mp3'\"\n                [src]=\"setPreview(file)\"\n                controls\n                class=\"w-[150px]\"\n              ></audio>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>Unsupported data type: {{ property.DataType }}</div>\n    </ng-container>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport {\n  CardDataViewModule,\n  DataExportModule,\n  DataTableModule,\n  DataViewModule,\n  DropDownModule,\n  SortTableModule,\n  SvgModule,\n  TableFilterModule,\n  VerbenaButtonModule,\n  VerbenaInputModule,\n  VerbenaSwitchModule,\n  VerbenaTextareaModule,\n  VerbenPopUpModule,\n  VisibleColumnModule,\n} from 'verben-ng-ui';\nimport { FormControlComponent } from './form-control.component';\nimport { FileUploadModule } from 'verben-workflow-ui/src/lib/components/file-upload';\n@NgModule({\n  declarations: [FormControlComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    DataTableModule,\n    SvgModule,\n    VerbenPopUpModule,\n    DataViewModule,\n    VerbenaButtonModule,\n    CardDataViewModule,\n    DropDownModule,\n    VerbenaSwitchModule,\n    TableFilterModule,\n    VisibleColumnModule,\n    SortTableModule,\n    DataExportModule,\n    VerbenaInputModule,\n    FileUploadModule,\n    VerbenaTextareaModule,\n  ],\n  exports: [FormControlComponent],\n})\nexport class FormControlerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}