simpo-component-library 2.0.91 → 2.0.92

package/fesm2022/simpo-component-library.mjs

@@ -44,7 +44,7 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i14 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i13$1 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
+import { MatNativeDateModule, MatOptionModule } from '@angular/material/core';
 import moment from 'moment';
 import { isBlurhashValid, decode } from 'blurhash';
 import * as i14$1 from 'ngx-image-zoom';
@@ -3673,6 +3673,37 @@ class RestService {
     getAvailableSlots(data) {
         return this.http.put(this.BASE_URL + `crm/appointment/config/available/timeslots`, data);
     }
+    getSelectedListFields(bId, showInErp, formName) {
+        return this.http.get(this.BASE_URL + `crm/fields?businessId=${bId}&status=true&showInErp=${showInErp}&isPagination=false&fieldCategory=${formName}`);
+    }
+    createRegistration(payload) {
+        return this.http.post(this.BASE_URL + `crm/registration/?enquiryId=${payload?.enquiryId || ''}`, payload);
+    }
+    createAdmission(payload) {
+        return this.http.post(this.BASE_URL + `crm/registration/admission?registrationId=${payload?.registrationId || ''}`, payload);
+    }
+    getFieldsToDisplay(fieldsList) {
+        let map = {};
+        for (let field of fieldsList) {
+            for (let fieldGroup of field.fieldGroup) {
+                if (!fieldGroup.fieldStepId)
+                    continue;
+                let stepName = fieldGroup.fieldStepName ? fieldGroup.fieldStepName : 'undefined';
+                let groupName = fieldGroup.fieldGroupName;
+                if (!map[stepName]) {
+                    map[stepName] = {};
+                }
+                if (!map[stepName][groupName]) {
+                    map[stepName][groupName] = [];
+                }
+                field['fieldStepId'] = fieldGroup.fieldStepId;
+                field['fieldGroupId'] = fieldGroup.fieldGroupId;
+                const newField = JSON.parse(JSON.stringify(field));
+                map[stepName][groupName].push(newField);
+            }
+        }
+        return map;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, providedIn: 'root' }); }
 }
@@ -7758,6 +7789,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class RegistrationFormComponent extends BaseSection {
+    constructor(restService, snackBar) {
+        super();
+        this.restService = restService;
+        this.snackBar = snackBar;
+        this.Object = Object;
+        this.payload = {
+            "businessDetails": {
+                "id": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+                "name": localStorage.getItem("bName") ?? localStorage.getItem("businessName")
+            },
+            "fieldItems": [],
+        };
+        this.fieldData = {};
+    }
+    ngOnInit() {
+        this.businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId");
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        this.getAllFields();
+    }
+    getAllFields() {
+        this.restService.getSelectedListFields(this.businessId, this.data?.sectionType === 'registrationForm' ? 'REGISTRATION' : 'ADMISSION', this.data?.sectionType === 'registrationForm' ? 'REGISTRATION' : 'ADMISSION').subscribe((res) => {
+            this.fieldData = this.restService.getFieldsToDisplay(res.data.data);
+            this.selectedKey = this.Object.keys(this.fieldData)[0];
+        });
+    }
+    submitForm() {
+        this.payload.fieldItems = this.convertToListOfFields();
+        this.data?.sectionType === 'registrationForm' ? this.createRegistration() : this.createAdmission();
+    }
+    createRegistration() {
+        this.registrationSubscription = this.restService.createRegistration(this.payload).subscribe((res) => {
+            this.snackBar.open('Registration created successfully', 'close', { duration: 2000 });
+        });
+    }
+    createAdmission() {
+        this.registrationSubscription = this.restService.createAdmission(this.payload).subscribe((res) => {
+            this.snackBar.open('Admission created successfully', 'close', { duration: 2000 });
+        });
+    }
+    convertToListOfFields() {
+        let fieldList = [];
+        for (let step of this.Object.keys(this.fieldData)) {
+            for (let group of Object.keys(this.fieldData[step])) {
+                for (let field of this.fieldData[step][group]) {
+                    fieldList.push({
+                        fieldId: field.fieldId,
+                        fieldName: field.fieldLabel,
+                        fieldValue: field.fieldValue,
+                        fieldGroupId: field.fieldGroupId,
+                        fieldGroupName: group,
+                        fieldStepId: field.fieldStepId,
+                        fieldStepName: step
+                    });
+                }
+            }
+        }
+        return fieldList;
+    }
+    updateAdmissionImage(ev) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section  simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n            [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div>\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button.styles\" [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n            (click)=\"submitForm()\" [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-registration-form', standalone: true, imports: [
+                        CommonModule,
+                        MatGridListModule,
+                        SimpoElementsModule,
+                        SimpoComponentModule,
+                        MatDialogModule,
+                        SimpoButtonComponent,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective,
+                        MatOptionModule,
+                        MatSelectModule,
+                        FormsModule
+                    ], template: "<section  simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n            [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div>\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button.styles\" [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n            (click)=\"submitForm()\" [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: i2$3.MatSnackBar }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], nextComponentColor: [{
+                type: Input
+            }] } });
+
 class SimpoWrapComntainer {
     constructor(eventService, el) {
         this.eventService = eventService;
@@ -11228,5 +11366,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
 //# sourceMappingURL=simpo-component-library.mjs.map