import { Component, Input } from '@angular/core';
import { DataType } from '../../models/DataType';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "verben-ng-ui";
import * as i4 from "../file-upload/file-upload.component";
export class FormControlComponent {
    dataType;
    value = '';
    boolInputType = 'checkbox';
    formProperties = [];
    ngOnInit() {
        this.initializeDefaultValue();
    }
    initializeDefaultValue() {
        if (this.dataType === DataType.YesNo && this.value === '') {
            this.value = false;
        }
        else if (!this.value) {
            this.value = '';
        }
    }
    onFileSelect(event, property) {
        const files = event.target.files;
        property.Value = files.length > 1 ? Array.from(files) : files[0];
    }
    formatLabel(property) {
        return property.IsRequired ? `${property.Name} *` : `${property.Name} (Optional)`;
    }
    optionsArray(property) {
        property.Options?.split(',').map((option) => (option.trim()));
        return property.Options?.split(',').map((option) => (option.trim()));
    }
    onSelectedFileChange(files) {
        console.log(files);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlComponent, deps: [], 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" }, 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 *ngSwitchCase=\"'Text'\" [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\"  [type]=\"'text'\" [placeHolder]=\"'Enter text'\"></verbena-input>\n      <verbena-input *ngSwitchCase=\"'MailAddress'\" [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\"  [type]=\"'email'\" [placeHolder]=\"'Enter email'\"></verbena-input>\n      <verbena-input *ngSwitchCase=\"'URL'\" [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [type]=\"'url'\" [placeHolder]=\"'https://example.com'\"></verbena-input>\n       <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{formatLabel(property)}}\n         <span class=\"flex items-center gap-1\">\n          <input [id]=\"property.id\" [(ngModel)]=\"property.Value\"  class=\"block mt-2 w-[100px]\"  [type]=\"'color'\"/> <span *ngIf=\"property.Value!==''\" class=\"font-semibold\" [style.color]=\"property.Value\">:{{property.Value}}</span>\n         </span>\n        </label>\n       \n\n       </div>\n      <verbena-textarea [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'MultilineText'\" [label]=\"formatLabel(property)\"></verbena-textarea>\n      <verbena-input [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'PhoneNumber'\" [label]=\"formatLabel(property)\"  [type]=\"'text'\" [placeHolder]=\"'Enter text'\"></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'Number'\" [label]=\"formatLabel(property)\"  [type]=\"'number'\" [placeHolder]=\"'Enter an integer'\" [max]=\"property.MaxValue\" [min]=\"property.MinValue\"></verbena-input>\n      <verbena-input [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'Decimal'\" [label]=\"formatLabel(property)\"  [type]=\"'text'\" [placeHolder]=\"'Enter decimal value'\"></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\" >\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{formatLabel(property)}}</label>\n        <verbena-switch [(ngModel)]=\"property.Value\" [onText]=\"''\" [offText]=\"''\" [onColor]=\"'#1A237E'\" [label]=\"formatLabel(property)\" ></verbena-switch>\n      </ng-container>\n\n      <!-- File selection for Video, Audio -->\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [accept]=\"'video/*'\" [multiple]=\"false\"></file-upload>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [accept]=\"'image/*'\" [multiple]=\"false\"></file-upload>\n      </div>\n      <div  *ngSwitchCase=\"'Audio'\">\n        <file-upload [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [accept]=\"'audio/*'\" [multiple]=\"false\"></file-upload>\n      </div>\n\n      <!-- Multi/Single selection -->\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{formatLabel(property)}}</div>\n        <verben-drop-down width=\"100%\" [placeholder]=\"property.Name\" [filter]=\"true\" [options]=\"optionsArray(property)\" [(ngModel)]=\"property.Value\"></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{formatLabel(property)}}</div>\n        <verben-drop-down width=\"100%\" [multiselect]=\"true\" [placeholder]=\"property.Name\" [options]=\"optionsArray(property)\" [(ngModel)]=\"property.Value\"></verben-drop-down>\n      </div>\n\n      <!-- Single and Multi file selection -->\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload [multiple]=\"false\" [label]=\"formatLabel(property)\"></file-upload>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload (selectedFilesChange)=\"onSelectedFileChange($event)\"  [multiple]=\"true\" [label]=\"formatLabel(property)\"></file-upload>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>\n        Unsupported data type: {{ property.DataType }}\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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: i3.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i3.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: i4.FileUploadComponent, selector: "file-upload", inputs: ["multiple", "label", "accept", "selectedFiles"], outputs: ["selectedFilesChange"] }, { kind: "component", type: i3.VerbenaTextareaComponent, selector: "verbena-textarea", inputs: ["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: [{
            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 *ngSwitchCase=\"'Text'\" [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\"  [type]=\"'text'\" [placeHolder]=\"'Enter text'\"></verbena-input>\n      <verbena-input *ngSwitchCase=\"'MailAddress'\" [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\"  [type]=\"'email'\" [placeHolder]=\"'Enter email'\"></verbena-input>\n      <verbena-input *ngSwitchCase=\"'URL'\" [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [type]=\"'url'\" [placeHolder]=\"'https://example.com'\"></verbena-input>\n       <div *ngSwitchCase=\"'Colour'\">\n        <label [htmlFor]=\"property.id\">\n          {{formatLabel(property)}}\n         <span class=\"flex items-center gap-1\">\n          <input [id]=\"property.id\" [(ngModel)]=\"property.Value\"  class=\"block mt-2 w-[100px]\"  [type]=\"'color'\"/> <span *ngIf=\"property.Value!==''\" class=\"font-semibold\" [style.color]=\"property.Value\">:{{property.Value}}</span>\n         </span>\n        </label>\n       \n\n       </div>\n      <verbena-textarea [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'MultilineText'\" [label]=\"formatLabel(property)\"></verbena-textarea>\n      <verbena-input [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'PhoneNumber'\" [label]=\"formatLabel(property)\"  [type]=\"'text'\" [placeHolder]=\"'Enter text'\"></verbena-input>\n\n      <!-- Numeric inputs -->\n      <verbena-input [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'Number'\" [label]=\"formatLabel(property)\"  [type]=\"'number'\" [placeHolder]=\"'Enter an integer'\" [max]=\"property.MaxValue\" [min]=\"property.MinValue\"></verbena-input>\n      <verbena-input [(ngModel)]=\"property.Value\" *ngSwitchCase=\"'Decimal'\" [label]=\"formatLabel(property)\"  [type]=\"'text'\" [placeHolder]=\"'Enter decimal value'\"></verbena-input>\n\n      <!-- Boolean input -->\n      <ng-container *ngSwitchCase=\"'YesNo'\" >\n        <label [htmlFor]=\"property.id\" class=\"block mb-2\">{{formatLabel(property)}}</label>\n        <verbena-switch [(ngModel)]=\"property.Value\" [onText]=\"''\" [offText]=\"''\" [onColor]=\"'#1A237E'\" [label]=\"formatLabel(property)\" ></verbena-switch>\n      </ng-container>\n\n      <!-- File selection for Video, Audio -->\n      <div *ngSwitchCase=\"'Video'\">\n        <file-upload [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [accept]=\"'video/*'\" [multiple]=\"false\"></file-upload>\n      </div>\n      <div *ngSwitchCase=\"'Image'\">\n        <file-upload [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [accept]=\"'image/*'\" [multiple]=\"false\"></file-upload>\n      </div>\n      <div  *ngSwitchCase=\"'Audio'\">\n        <file-upload [(ngModel)]=\"property.Value\" [label]=\"formatLabel(property)\" [accept]=\"'audio/*'\" [multiple]=\"false\"></file-upload>\n      </div>\n\n      <!-- Multi/Single selection -->\n      <div *ngSwitchCase=\"'SingleSelection'\">\n        <div class=\"mb-2\">{{formatLabel(property)}}</div>\n        <verben-drop-down width=\"100%\" [placeholder]=\"property.Name\" [filter]=\"true\" [options]=\"optionsArray(property)\" [(ngModel)]=\"property.Value\"></verben-drop-down>\n      </div>\n      <div *ngSwitchCase=\"'MultiSelection'\">\n        <div class=\"mb-2\">{{formatLabel(property)}}</div>\n        <verben-drop-down width=\"100%\" [multiselect]=\"true\" [placeholder]=\"property.Name\" [options]=\"optionsArray(property)\" [(ngModel)]=\"property.Value\"></verben-drop-down>\n      </div>\n\n      <!-- Single and Multi file selection -->\n      <div *ngSwitchCase=\"'SingleFileSelection'\">\n        <file-upload [multiple]=\"false\" [label]=\"formatLabel(property)\"></file-upload>\n      </div>\n      <div *ngSwitchCase=\"'MultiFileSelection'\">\n        <file-upload (selectedFilesChange)=\"onSelectedFileChange($event)\"  [multiple]=\"true\" [label]=\"formatLabel(property)\"></file-upload>\n      </div>\n\n      <!-- Fallback for unsupported types -->\n      <div *ngSwitchDefault>\n        Unsupported data type: {{ property.DataType }}\n      </div>\n    </ng-container>\n  </div>\n</div>\n" }]
        }], propDecorators: { dataType: [{
                type: Input
            }], value: [{
                type: Input
            }], boolInputType: [{
                type: Input
            }], formProperties: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 