@rangertechnologies/ngnxt 2.1.106 → 2.1.107

package/esm2022/lib/pages/builder/element/element.component.mjs

@@ -0,0 +1,199 @@
+// AP 22JAN25 - form preview and All form elements
+import { Component, Input } from '@angular/core';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { v4 as uuidv4 } from 'uuid';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../services/form-builder.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/cdk/drag-drop";
+export class ElementComponent {
+    formBuilderService;
+    //@Output() elementButtonClicked = new EventEmitter<string>();
+    bookletJSON;
+    bookletId;
+    field;
+    formElements = [];
+    elements = [];
+    bookId;
+    sections = {
+        basic: true, // Basic Elements open by default
+        advanced: false // Advanced Elements closed by default
+    };
+    basicElements = [];
+    advancedElements = [];
+    //subscription: any;
+    constructor(formBuilderService) {
+        this.formBuilderService = formBuilderService;
+    }
+    //  AP-06MAR25 New Design Change Elements Basic , Advanced
+    // AP-06MAR25 Add RichText Area
+    ngOnInit() {
+        this.basicElements = [
+            { "type": "Heading", "img": "Vector", "label": "Heading" },
+            { "type": "Text", "img": "Text", "label": "Text" },
+            { "type": "TextArea", "img": "TextArea", "label": "Text Area" },
+            { "type": "RichTextArea", "img": "RichText", "label": "Rich Text" },
+            { "type": "Paragraph", "img": "Paragraph", "label": "Paragraph" },
+            { "type": "Number", "img": "Number", "label": "Number" },
+            { "type": "Label", "img": "Label", "label": "Label" },
+            { "type": "Image", "img": "Image", "label": "Image" },
+            { "type": "Button", "img": "Button", "label": "Button" },
+            { "type": "Email", "img": "Email", "label": "Email" }
+        ];
+        this.advancedElements = [
+            { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
+            { "type": "List", "img": "Search", "label": "List" },
+            { "type": "Date", "img": "Date", "label": "Date" },
+            { "type": "Time", "img": "Time", "label": "Time" },
+            { "type": "File", "img": "File", "label": "Files" },
+            { "type": "Table", "img": "Table", "label": "Table" },
+            { "type": "CheckBox", "img": "CheckBox", "label": "CheckBox" },
+            { "type": "Radio", "img": "Radio", "label": "Radio" },
+            { "type": "MultiSelect", "img": "MultiSelect", "label": "Multi Select" },
+            { "type": "Dropdown", "img": "Drop", "label": "Dropdown" }
+        ];
+        this.formBuilderService.formElements$.subscribe(elements => {
+            this.formElements = elements;
+        });
+        if (this.bookletJSON) {
+            this.initializeForm();
+        }
+        else {
+            localStorage.setItem('status', "new");
+        }
+    }
+    // Add these methods
+    toggleSection(section) {
+        this.sections[section] = !this.sections[section];
+    }
+    isSectionOpen(section) {
+        return this.sections[section];
+    }
+    // AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
+    ngOnChanges(changes) {
+        if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
+            this.initializeForm();
+            console.log('changes', changes);
+        }
+    }
+    initializeForm() {
+        if (!this.bookletJSON || !this.bookletJSON.bookQuestionsMap) {
+            console.warn("Invalid bookletJSON structure");
+            return;
+        }
+        localStorage.setItem('status', "edit");
+        localStorage.setItem('unique_id', this.bookletId);
+        this.formElements = [];
+        console.log("formElements", this.formElements);
+        this.formBuilderService.clearElements();
+        const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap);
+        if (bookQuestionsMapKeys.length === 0)
+            return;
+        this.bookId = bookQuestionsMapKeys[0];
+        this.bookletJSON.bookQuestionsMap[this.bookId]?.subQuestions?.forEach(newElement => {
+            if (this.bookletJSON.sqOptions?.[newElement.id]) {
+                newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
+            }
+            this.formBuilderService.addElement(newElement);
+        });
+        this.formElements = this.formBuilderService.getElements();
+    }
+    // ngOnDestroy() {
+    //   this.subscription.unsubscribe();
+    // }
+    drop(event) {
+        moveItemInArray(this.formElements, event.previousIndex, event.currentIndex);
+        //AP-06MAR25- Add this line to update service with new order
+        this.formBuilderService.updateElementsOrder(this.formElements);
+    }
+    // Add this method to handle element selection
+    selectElement(index) {
+        this.selectedFieldIndex = index; // element is selected
+        this.formBuilderService.setSelectedElement(index);
+        //const element = this.formElements[index];
+        // this.elementButtonClicked.emit(element.type);  
+    }
+    //selectedIndex: number | null = null;
+    selectedFieldIndex = null; // element is cleared
+    addElement(type) {
+        const unique_id = uuidv4();
+        const newElement = {
+            id: unique_id,
+            uid: unique_id,
+            type,
+            name: '',
+            questionText: '',
+            question: '',
+            helpText: '',
+            errorMessage: '',
+            isReadOnly: false,
+            isHidden: false,
+            required: false,
+            subText: '',
+            referenceField: '',
+            additionalRichContent: '',
+            groupName: '',
+            isDateBackward: false,
+            title: '',
+            subTitle: '',
+            isDateForward: false,
+            isOptional: false,
+            isTitle: false,
+            nextQuestion: '',
+            allowedFileExtensions: '',
+            questionNumber: this.formBuilderService.getElements().length + 1,
+            questionBookId: '',
+            parentQuestion: '',
+            fieldsMeta: '',
+            recordTypeName: '',
+            recordTypeId: '',
+            trackingId: '',
+            dateText: '',
+            timeText: '',
+            recordId: '',
+            qbReference: '',
+            qbReferenceQuestions: '',
+            questionBookSubTitle: '',
+            style: '',
+            options: type === 'Dropdown' || type === 'Radio' || type === 'CheckBox' ? [] : null,
+        };
+        this.formBuilderService.addElement(newElement);
+        this.formElements = this.formBuilderService.getElements();
+    }
+    // Remove an element by index
+    removeElement(field, index) {
+        this.formBuilderService.removeElementComponent(field.id);
+        this.formElements = this.formBuilderService.getElements();
+    }
+    getFontStyles(field) {
+        const styles = {
+            'font-family': field.font || 'Helvetica Neue',
+            'font-weight': field.fontWeight || '400',
+            'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
+            'min-height': field.height ? `${field.height}px` : 'auto',
+            'text-align': field.textAlign || 'left',
+            'border-radius': '5px',
+            'margin-bottom': '10px'
+        };
+        // if (Array.isArray(field.styles)) {
+        //     styles['font-weight'] = field.styles.includes('bold') ? '700' : styles['font-weight'];
+        //     styles['font-style'] = field.styles.includes('italic') ? 'italic' : undefined;
+        //     styles['text-decoration'] = field.styles.includes('underline') ? 'underline' : undefined;
+        //     styles['text-transform'] = field.styles.includes('capitalize') ? 'capitalize' :
+        //                                field.styles.includes('lowercase') ? 'lowercase' : undefined;
+        // }
+        return styles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: i1.FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n  <!-- Basic Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n    <div class=\"head-elements\">Basic Elements</div>\n    <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n\n  <div *ngIf=\"sections.basic\">\n    <ng-container *ngFor=\"let element of basicElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\" cdkDrag>\n        <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Advanced Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n    <div class=\"head-elements\">Advanced Elements</div>\n    <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n  <div *ngIf=\"sections.advanced\">\n    <ng-container *ngFor=\"let element of advancedElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\"/>\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- RichText -->\n<div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">   \n            <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <div class=\"checkbox-options-container\">\n            <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n              <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n            </div>\n          </div>\n        </div>\n      </div>\n</div>   \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!--  Table  -->\n  <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n  <div class=\"field-content\">\n     <div class=\"label-container\">   \n      <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n     </div>\n   </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n            <div class=\"label-container\">\n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n              <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n        </div>\n    </div>\n</div>\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n      \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.head-elements{font-size:17px}.form-builder{width:33.33%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}\n"], 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n  <!-- Basic Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n    <div class=\"head-elements\">Basic Elements</div>\n    <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n\n  <div *ngIf=\"sections.basic\">\n    <ng-container *ngFor=\"let element of basicElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\" cdkDrag>\n        <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Advanced Elements Toggle -->\n  <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n    <div class=\"head-elements\">Advanced Elements</div>\n    <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n  </div>\n  <div *ngIf=\"sections.advanced\">\n    <ng-container *ngFor=\"let element of advancedElements\">\n      <div class=\"element\" (click)=\"addElement(element.type)\">\n        <img src=\"../assets/icons/{{ element.img }}.svg\">\n        <div class=\"hover-label\">{{ element.label }}</div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n  \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>  \n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n      <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>    \n      <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n      [class.hidden]=\"field.isHidden\" />\n    </div>\n  </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n          <div class=\"field-wrapper\">\n            <div class=\"field-content\">\n              <div class=\"label-container\">\n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\"  class=\"delete-icon\" />\n        </div>\n        <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n      </div>\n    </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">\n            <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>        \n          <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n                 [class.hidden]=\"field.isHidden\" />\n        </div>\n      </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n                   [class.hidden]=\"field.isHidden\"/>\n          </div>\n        </div>\n</div>\n      \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- RichText -->\n<div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n   <div class=\"field-wrapper\">\n     <div class=\"field-content\">\n       <div class=\"label-container\">\n         <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n           <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n         </label>\n         <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n       </div>    \n       <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n       [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n       </textarea>\n     </div>\n   </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n   <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n       <div class=\"field-content\">\n         <div class=\"label-container\">\n        <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n  </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">\n     <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n     <img  src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n   </div>\n   <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n    </div>\n   </div>\n</div>\n  \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n  [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n      <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n          <div class=\"label-container\">   \n            <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <div class=\"checkbox-options-container\">\n            <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n              <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n            </div>\n          </div>\n        </div>\n      </div>\n</div>   \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n  <div class=\"field-wrapper\">\n    <div class=\"field-content\">\n       <div class=\"label-container\">   \n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <div class=\"radio-options-container\">\n                <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                    <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"  [value]=\"option.value\"\n                        [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                    <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n      <div class=\"field-content\">\n        <div class=\"label-container\">   \n          <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n          <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n        </select>\n      </div>\n    </div>\n</div>\n    \n<!--  Table  -->\n  <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n  <div class=\"field-content\">\n     <div class=\"label-container\">   \n      <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n     </div>\n   </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n    <div class=\"field-wrapper\">\n        <div class=\"field-content\">\n            <div class=\"label-container\">\n                <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>          \n              <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n        </div>\n    </div>\n</div>\n\n  <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n    </div>\n  </div>\n</div> -->\n      \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.head-elements{font-size:17px}.form-builder{width:33.33%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilderService }], propDecorators: { bookletJSON: [{
+                type: Input
+            }], bookletId: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvcGFnZXMvYnVpbGRlci9lbGVtZW50L2VsZW1lbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvZWxlbWVudC9lbGVtZW50LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtEQUFrRDtBQUNsRCxPQUFPLEVBQUMsU0FBUyxFQUFnQixLQUFLLEVBQXdCLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBZSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUV0RSxPQUFPLEVBQUUsRUFBRSxJQUFJLE1BQU0sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7Ozs7O0FBUXBDLE1BQU0sT0FBTyxnQkFBZ0I7SUFnQlA7SUFkcEIsOERBQThEO0lBQ3JELFdBQVcsQ0FBTTtJQUNqQixTQUFTLENBQU07SUFDeEIsS0FBSyxDQUFNO0lBQ1gsWUFBWSxHQUFVLEVBQUUsQ0FBQztJQUN6QixRQUFRLEdBQVUsRUFBRSxDQUFDO0lBQ3JCLE1BQU0sQ0FBUztJQUNmLFFBQVEsR0FBRztRQUNULEtBQUssRUFBRSxJQUFJLEVBQUssaUNBQWlDO1FBQ2pELFFBQVEsRUFBRSxLQUFLLENBQUMsc0NBQXNDO0tBQ3ZELENBQUM7SUFDQSxhQUFhLEdBQVUsRUFBRSxDQUFDO0lBQzVCLGdCQUFnQixHQUFVLEVBQUUsQ0FBQztJQUM3QixvQkFBb0I7SUFDcEIsWUFBb0Isa0JBQXNDO1FBQXRDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBb0I7SUFDMUQsQ0FBQztJQUNILDBEQUEwRDtJQUMxRCwrQkFBK0I7SUFDL0IsUUFBUTtRQUNOLElBQUksQ0FBQyxhQUFhLEdBQUc7WUFDckIsRUFBRSxNQUFNLEVBQUUs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LHNGQUFzRjtRQUN0RiwrRkFBK0Y7UUFDL0YsSUFBSTtRQUVKLE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7d0dBbE1ZLGdCQUFnQjs0RkFBaEIsZ0JBQWdCLHdJQ1o3Qix5cWNBK1JBOzs0RkRuUmEsZ0JBQWdCO2tCQU41QixTQUFTOytCQUNFLGFBQWE7dUZBUWQsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQVAgMjJKQU4yNSAtIGZvcm0gcHJldmlldyBhbmQgQWxsIGZvcm0gZWxlbWVudHNcbmltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXN9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2RrRHJhZ0Ryb3AsIG1vdmVJdGVtSW5BcnJheSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xuaW1wb3J0IHsgRm9ybUJ1aWxkZXJTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vc2VydmljZXMvZm9ybS1idWlsZGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgdjQgYXMgdXVpZHY0IH0gZnJvbSAndXVpZCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1lbGVtZW50JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2VsZW1lbnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9lbGVtZW50LmNvbXBvbmVudC5jc3MnXSxcbn0pXG5cbmV4cG9ydCBjbGFzcyBFbGVtZW50Q29tcG9uZW50IHtcblxuICAvL0BPdXRwdXQoKSBlbGVtZW50QnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBASW5wdXQoKSBib29rbGV0SlNPTjogYW55O1xuICBASW5wdXQoKSBib29rbGV0SWQ6IGFueTtcbiAgZmllbGQ6IGFueTtcbiAgZm9ybUVsZW1lbnRzOiBhbnlbXSA9IFtdO1xuICBlbGVtZW50czogYW55W10gPSBbXTtcbiAgYm9va0lkOiBzdHJpbmc7XG4gIHNlY3Rpb25zID0ge1xuICAgIGJhc2ljOiB0cnVlLCAgICAvLyBCYXNpYyBFbGVtZW50cyBvcGVuIGJ5IGRlZmF1bHRcbiAgICBhZHZhbmNlZDogZmFsc2UgLy8gQWR2YW5jZWQgRWxlbWVudHMgY2xvc2VkIGJ5IGRlZmF1bHRcbiAgfTtcbiAgICBiYXNpY0VsZW1lbnRzOiBhbnlbXSA9IFtdO1xuICBhZHZhbmNlZEVsZW1lbnRzOiBhbnlbXSA9IFtdO1xuICAvL3N1YnNjcmlwdGlvbjogYW55O1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGZvcm1CdWlsZGVyU2VydmljZTogRm9ybUJ1aWxkZXJTZXJ2aWNlKSB7XG4gIH1cbi8vICBBUC0wNk1BUjI1IE5ldyBEZXNpZ24gQ2hhbmdlIEVsZW1lbnRzIEJhc2ljICwgQWR2YW5jZWRcbi8vIEFQLTA2TUFSMjUgQWRkIFJpY2hUZXh0IEFyZWFcbm5nT25Jbml0KCkge1xuICB0aGlzLmJhc2ljRWxlbWVudHMgPSBbXG4gIHsgXCJ0eXBlXCI6IFwiSGVhZGluZ1wiLCBcImltZ1wiOiBcIlZlY3RvclwiLCBcImxhYmVsXCI6IFwiSGVhZGluZ1wiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiVGV4dFwiLCBcImltZ1wiOiBcIlRleHRcIiwgXCJsYWJlbFwiOiBcIlRleHRcIiB9LFxuICB7IFwidHlwZVwiOiBcIlRleHRBcmVhXCIsIFwiaW1nXCI6IFwiVGV4dEFyZWFcIiwgXCJsYWJlbFwiOiBcIlRleHQgQXJlYVwiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiUmljaFRleHRBcmVhXCIsIFwiaW1nXCI6IFwiUmljaFRleHRcIiwgXCJsYWJlbFwiOiBcIlJpY2ggVGV4dFwiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiUGFyYWdyYXBoXCIsIFwiaW1nXCI6IFwiUGFyYWdyYXBoXCIsIFwibGFiZWxcIjogXCJQYXJhZ3JhcGhcIiB9LFxuICB7IFwidHlwZVwiOiBcIk51bWJlclwiLCBcImltZ1wiOiBcIk51bWJlclwiLCBcImxhYmVsXCI6IFwiTnVtYmVyXCIgfSxcbiAgeyBcInR5cGVcIjogXCJMYWJlbFwiLCBcImltZ1wiOiBcIkxhYmVsXCIsIFwibGFiZWxcIjogXCJMYWJlbFwiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiSW1hZ2VcIiwgXCJpbWdcIjogXCJJbWFnZVwiLCBcImxhYmVsXCI6IFwiSW1hZ2VcIiB9LFxuICB7IFwidHlwZVwiOiBcIkJ1dHRvblwiLCBcImltZ1wiOiBcIkJ1dHRvblwiLCBcImxhYmVsXCI6IFwiQnV0dG9uXCIgfSxcbiAgeyBcInR5cGVcIjogXCJFbWFpbFwiLCBcImltZ1wiOiBcIkVtYWlsXCIsIFwibGFiZWxcIjogXCJFbWFpbFwiIH1cbl07XG5cbnRoaXMuYWR2YW5jZWRFbGVtZW50cyA9IFtcbiAgeyBcInR5cGVcIjogXCJDYWxlbmRhclwiLCBcImltZ1wiOiBcIkNhbGVuZGFyXCIsIFwibGFiZWxcIjogXCJDYWxlbmRhclwiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiTGlzdFwiLCBcImltZ1wiOiBcIlNlYXJjaFwiLCBcImxhYmVsXCI6IFwiTGlzdFwiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiRGF0ZVwiLCBcImltZ1wiOiBcIkRhdGVcIiwgXCJsYWJlbFwiOiBcIkRhdGVcIiB9LFxuICB7IFwidHlwZVwiOiBcIlRpbWVcIiwgXCJpbWdcIjogXCJUaW1lXCIsIFwibGFiZWxcIjogXCJUaW1lXCIgfSxcbiAgeyBcInR5cGVcIjogXCJGaWxlXCIsIFwiaW1nXCI6IFwiRmlsZVwiLCBcImxhYmVsXCI6IFwiRmlsZXNcIiB9LFxuICB7IFwidHlwZVwiOiBcIlRhYmxlXCIsIFwiaW1nXCI6IFwiVGFibGVcIiwgXCJsYWJlbFwiOiBcIlRhYmxlXCIgfSxcbiAgeyBcInR5cGVcIjogXCJDaGVja0JveFwiLCBcImltZ1wiOiBcIkNoZWNrQm94XCIsIFwibGFiZWxcIjogXCJDaGVja0JveFwiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiUmFkaW9cIiwgXCJpbWdcIjogXCJSYWRpb1wiLCBcImxhYmVsXCI6IFwiUmFkaW9cIiB9LFxuICB7IFwidHlwZVwiOiBcIk11bHRpU2VsZWN0XCIsIFwiaW1nXCI6IFwiTXVsdGlTZWxlY3RcIiwgXCJsYWJlbFwiOiBcIk11bHRpIFNlbGVjdFwiIH0sXG4gIHsgXCJ0eXBlXCI6IFwiRHJvcGRvd25cIiwgXCJpbWdcIjogXCJEcm9wXCIsIFwibGFiZWxcIjogXCJEcm9wZG93blwiIH1cbl07XG4gICB0aGlzLmZvcm1CdWlsZGVyU2VydmljZS5mb3JtRWxlbWVudHMkLnN1YnNjcmliZShlbGVtZW50cyA9PiB7XG4gICAgdGhpcy5mb3JtRWxlbWVudHMgPSBlbGVtZW50cztcbiB9KTtcbiBpZiAodGhpcy5ib29rbGV0SlNPTikge1xuICB0aGlzLmluaXRpYWxpemVGb3JtKCk7XG59IGVsc2Uge1xuICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnc3RhdHVzJywgXCJuZXdcIik7XG59XG59XG5cbi8vIEFkZCB0aGVzZSBtZXRob2RzXG50b2dnbGVTZWN0aW9uKHNlY3Rpb246ICdiYXNpYycgfCAnYWR2YW5jZWQnKSB7XG4gIHRoaXMuc2VjdGlvbnNbc2VjdGlvbl0gPSAhdGhpcy5zZWN0aW9uc1tzZWN0aW9uXTtcbn1cblxuaXNTZWN0aW9uT3BlbihzZWN0aW9uOiBzdHJpbmcpOiBib29sZWFuIHtcbiAgcmV0dXJuIHRoaXMuc2VjdGlvbnNbc2VjdGlvbl07XG59XG5cbi8vIEFQIC0gMjZGRUIyNSAtIEFkZGVkIG5nT25DaGFuZ2VzIHRvIGhhbmRsZSBjaGFuZ2VzIGluIGJvb2tsZXRKU09OXG5uZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gIGlmIChjaGFuZ2VzWydib29rbGV0SlNPTiddICYmIGNoYW5nZXNbJ2Jvb2tsZXRKU09OJ10uY3VycmVudFZhbHVlKSB7XG4gICAgdGhpcy5pbml0aWFsaXplRm9ybSgpO1xuICAgIGNvbnNvbGUubG9nKCdjaGFuZ2VzJywgY2hhbmdlcyk7XG4gIH1cbn1cblxucHJpdmF0ZSBpbml0aWFsaXplRm9ybSgpIHtcbiAgaWYgKCF0aGlzLmJvb2tsZXRKU09OIHx8ICF0aGlzLmJvb2tsZXRKU09OLmJvb2tRdWVzdGlvbnNNYXApIHtcbiAgICAgIGNvbnNvbGUud2FybihcIkludmFsaWQgYm9va2xldEpTT04gc3RydWN0dXJlXCIpO1xuICAgICAgcmV0dXJuO1xuICB9XG5cbiAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oJ3N0YXR1cycsIFwiZWRpdFwiKTtcbiAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oJ3VuaXF1ZV9pZCcsIHRoaXMuYm9va2xldElkKTtcbiAgdGhpcy5mb3JtRWxlbWVudHMgPSBbXTtcbiAgY29uc29sZS5sb2coXCJmb3JtRWxlbWVudHNcIix0aGlzLmZvcm1FbGVtZW50cyk7XG4gIHRoaXMuZm9ybUJ1aWxkZXJTZXJ2aWNlLmNsZWFyRWxlbWVudHMoKTtcblxuICBjb25zdCBib29rUXVlc3Rpb25zTWFwS2V5cyA9IE9iamVjdC5rZXlzKHRoaXMuYm9va2xldEpTT04uYm9va1F1ZXN0aW9uc01hcCk7XG4gIGlmIChib29rUXVlc3Rpb25zTWFwS2V5cy5sZW5ndGggPT09IDApIHJldHVybjtcblxuICB0aGlzLmJvb2tJZCA9IGJvb2tRdWVzdGlvbnNNYXBLZXlzWzBdO1xuXG4gIHRoaXMuYm9va2xldEpTT04uYm9va1F1ZXN0aW9uc01hcFt0aGlzLmJvb2tJZF0/LnN1YlF1ZXN0aW9ucz8uZm9yRWFjaChuZXdFbGVtZW50ID0+IHtcbiAgICAgIGlmICh0aGlzLmJvb2tsZXRKU09OLnNxT3B0aW9ucz8uW25ld0VsZW1lbnQuaWRdKSB7XG4gICAgICAgICAgbmV3RWxlbWVudC5vcHRpb25zID0gdGhpcy5ib29rbGV0SlNPTi5zcU9wdGlvbnNbbmV3RWxlbWVudC5pZF0ub3B0aW9ucztcbiAgICAgIH1cbiAgICAgIHRoaXMuZm9ybUJ1aWxkZXJTZXJ2aWNlLmFkZEVsZW1lbnQobmV3RWxlbWVudCk7XG4gIH0pO1xuXG4gIHRoaXMuZm9ybUVsZW1lbnRzID0gdGhpcy5mb3JtQnVpbGRlclNlcnZpY2UuZ2V0RWxlbWVudHMoKTtcbn1cblxuLy8gbmdPbkRlc3Ryb3koKSB7XG4vLyAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4vLyB9XG5cbmRyb3AoZXZlbnQ6IENka0RyYWdEcm9wPHN0cmluZ1tdPikge1xuICBtb3ZlSXRlbUluQXJyYXkodGhpcy5mb3JtRWxlbWVudHMsIGV2ZW50LnByZXZpb3VzSW5kZXgsIGV2ZW50LmN1cnJlbnRJbmRleCk7XG4gIFxuICAvL0FQLTA2TUFSMjUtIEFkZCB0aGlzIGxpbmUgdG8gdXBkYXRlIHNlcnZpY2Ugd2l0aCBuZXcgb3JkZXJcbiAgdGhpcy5mb3JtQnVpbGRlclNlcnZpY2UudXBkYXRlRWxlbWVudHNPcmRlcih0aGlzLmZvcm1FbGVtZW50cyk7XG59XG5cbi8vIEFkZCB0aGlzIG1ldGhvZCB0byBoYW5kbGUgZWxlbWVudCBzZWxlY3Rpb25cbnNlbGVjdEVsZW1lbnQoaW5kZXg6IG51bWJlcikge1xuICAgIHRoaXMuc2VsZWN0ZWRGaWVsZEluZGV4ID0gaW5kZXg7IC8vIGVsZW1lbnQgaXMgc2VsZWN0ZWRcbiAgICB0aGlzLmZvcm1CdWlsZGVyU2VydmljZS5zZXRTZWxlY3RlZEVsZW1lbnQoaW5kZXgpO1xuICAgIC8vY29uc3QgZWxlbWVudCA9IHRoaXMuZm9ybUVsZW1lbnRzW2luZGV4XTtcbiAgICAvLyB0aGlzLmVsZW1lbnRCdXR0b25DbGlja2VkLmVtaXQoZWxlbWVudC50eXBlKTsgIFxufVxuLy9zZWxlY3RlZEluZGV4OiBudW1iZXIgfCBudWxsID0gbnVsbDtcbnNlbGVjdGVkRmllbGRJbmRleDogbnVtYmVyIHwgbnVsbCA9IG51bGw7IC8vIGVsZW1lbnQgaXMgY2xlYXJlZFxuXG5hZGRFbGVtZW50KHR5cGU6IHN0cmluZyk6IHZvaWQge1xuICAgY29uc3QgdW5pcXVlX2lkID0gdXVpZHY0KCk7XG4gICAgY29uc3QgbmV3RWxlbWVudCA9IHtcbiAgICAgIGlkOiB1bmlxdWVfaWQsXG4gICAgICB1aWQ6IHVuaXF1ZV9pZCxcbiAgICAgIHR5cGUsXG4gICAgICBuYW1lOiAnJyxcbiAgICAgIHF1ZXN0aW9uVGV4dDogJycsXG4gICAgICBxdWVzdGlvbjogJycsXG4gICAgICBoZWxwVGV4dDogJycsXG4gICAgICBlcnJvck1lc3NhZ2U6ICcnLFxuICAgICAgaXNSZWFkT25seTogZmFsc2UsXG4gICAgICBpc0hpZGRlbjogZmFsc2UsXG4gICAgICByZXF1aXJlZDogZmFsc2UsXG4gICAgICBzdWJUZXh0OiAnJyxcbiAgICAgIHJlZmVyZW5jZUZpZWxkOiAnJyxcbiAgICAgIGFkZGl0aW9uYWxSaWNoQ29udGVudDogJycsXG4gICAgICBncm91cE5hbWU6ICcnLFxuICAgICAgaXNEYXRlQmFja3dhcmQ6IGZhbHNlLFxuICAgICAgdGl0bGU6ICcnLFxuICAgICAgc3ViVGl0bGU6ICcnLFxuICAgICAgaXNEYXRlRm9yd2FyZDogZmFsc2UsXG4gICAgICBpc09wdGlvbmFsOiBmYWxzZSxcbiAgICAgIGlzVGl0bGU6IGZhbHNlLFxuICAgICAgbmV4dFF1ZXN0aW9uOiAnJyxcbiAgICAgIGFsbG93ZWRGaWxlRXh0ZW5zaW9uczogJycsXG4gICAgICBxdWVzdGlvbk51bWJlcjogdGhpcy5mb3JtQnVpbGRlclNlcnZpY2UuZ2V0RWxlbWVudHMoKS5sZW5ndGggKyAxLFxuICAgICAgcXVlc3Rpb25Cb29rSWQ6ICcnLFxuICAgICAgcGFyZW50UXVlc3Rpb246ICcnLFxuICAgICAgZmllbGRzTWV0YTogJycsXG4gICAgICByZWNvcmRUeXBlTmFtZTogJycsXG4gICAgICByZWNvcmRUeXBlSWQ6ICcnLFxuICAgICAgdHJhY2tpbmdJZDogJycsXG4gICAgICBkYXRlVGV4dDogJycsXG4gICAgICB0aW1lVGV4dDogJycsXG4gICAgICByZWNvcmRJZDogJycsXG4gICAgICBxYlJlZmVyZW5jZTogJycsXG4gICAgICBxYlJlZmVyZW5jZVF1ZXN0aW9uczogJycsXG4gICAgICBxdWVzdGlvbkJvb2tTdWJUaXRsZTogJycsXG4gICAgICBzdHlsZTogJycsXG4gICAgICBvcHRpb25zOiB0eXBlID09PSAnRHJvcGRvd24nIHx8IHR5cGUgPT09ICdSYWRpbycgfHwgdHlwZSA9PT0gJ0NoZWNrQm94JyA/IFtdIDogbnVsbCxcbiAgICBcbiAgICB9O1xuICAgIHRoaXMuZm9ybUJ1aWxkZXJTZXJ2aWNlLmFkZEVsZW1lbnQobmV3RWxlbWVudCk7XG4gICAgdGhpcy5mb3JtRWxlbWVudHMgPSB0aGlzLmZvcm1CdWlsZGVyU2VydmljZS5nZXRFbGVtZW50cygpO1xufVxuXG4vLyBSZW1vdmUgYW4gZWxlbWVudCBieSBpbmRleFxucmVtb3ZlRWxlbWVudChmaWVsZDogYW55LGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLmZvcm1CdWlsZGVyU2VydmljZS5yZW1vdmVFbGVtZW50Q29tcG9uZW50KGZpZWxkLmlkKTtcbiAgICB0aGlzLmZvcm1FbGVtZW50cz10aGlzLmZvcm1CdWlsZGVyU2VydmljZS5nZXRFbGVtZW50cygpO1xufVxuICBcbmdldEZvbnRTdHlsZXMoZmllbGQ6IGFueSk6IGFueSB7XG4gIGNvbnN0IHN0eWxlczogYW55ID0ge1xuICAgICAgJ2ZvbnQtZmFtaWx5JzogZmllbGQuZm9udCB8fCAnSGVsdmV0aWNhIE5ldWUnLFxuICAgICAgJ2ZvbnQtd2VpZ2h0JzogZmllbGQuZm9udFdlaWdodCB8fCAnNDAwJyxcbiAgICAgICd3aWR0aCc6IGZpZWxkLnNpemUgPyBgJHsoZmllbGQuc2l6ZSAvIDEyKSAqIDEwMH0lYCA6ICcxMDAlJyxcbiAgICAgICdtaW4taGVpZ2h0JzogZmllbGQuaGVpZ2h0ID8gYCR7ZmllbGQuaGVpZ2h0fXB4YCA6ICdhdXRvJyxcbiAgICAgICd0ZXh0LWFsaWduJzogZmllbGQudGV4dEFsaWduIHx8ICdsZWZ0JyxcbiAgICAgICdib3JkZXItcmFkaXVzJzogJzVweCcsXG4gICAgICAnbWFyZ2luLWJvdHRvbSc6ICcxMHB4J1xuICB9O1xuXG4gIC8vIGlmIChBcnJheS5pc0FycmF5KGZpZWxkLnN0eWxlcykpIHtcbiAgLy8gICAgIHN0eWxlc1snZm9udC13ZWlnaHQnXSA9IGZpZWxkLnN0eWxlcy5pbmNsdWRlcygnYm9sZCcpID8gJzcwMCcgOiBzdHlsZXNbJ2ZvbnQtd2VpZ2h0J107XG4gIC8vICAgICBzdHlsZXNbJ2ZvbnQtc3R5bGUnXSA9IGZpZWxkLnN0eWxlcy5pbmNsdWRlcygnaXRhbGljJykgPyAnaXRhbGljJyA6IHVuZGVmaW5lZDtcbiAgLy8gICAgIHN0eWxlc1sndGV4dC1kZWNvcmF0aW9uJ10gPSBmaWVsZC5zdHlsZXMuaW5jbHVkZXMoJ3VuZGVybGluZScpID8gJ3VuZGVybGluZScgOiB1bmRlZmluZWQ7XG4gIC8vICAgICBzdHlsZXNbJ3RleHQtdHJhbnNmb3JtJ10gPSBmaWVsZC5zdHlsZXMuaW5jbHVkZXMoJ2NhcGl0YWxpemUnKSA/ICdjYXBpdGFsaXplJyA6XG4gIC8vICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWVsZC5zdHlsZXMuaW5jbHVkZXMoJ2xvd2VyY2FzZScpID8gJ2xvd2VyY2FzZScgOiB1bmRlZmluZWQ7XG4gIC8vIH1cblxuICByZXR1cm4gc3R5bGVzO1xufVxuXG59XG5cblxuIiwiPCEtLSBBUCAyMkpBTjI1IC0gZm9ybSBwcmV2aWV3IGFuZCBBbGwgZm9ybSBlbGVtZW50cyAtLT5cbiA8IS0tIEFQIDI1RkVCMjUgLSBBbGwgZWxlbWVudHMgdXBkYXRlIC0tPlxuPGRpdiBjbGFzcz1cImNlbnRlci1mcmFtZVwiPlxuICA8bGluayBocmVmPVwiaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3M/ZmFtaWx5PVJvYm90bzozMDAsNDAwLDUwMCZkaXNwbGF5PXN3YXBcIiByZWw9XCJzdHlsZXNoZWV0XCI+XG5cbjwhLS0gRm9ybSBCdWlsZGVyIFNlY3Rpb24gQWxsIEVsZW1lbnRzIC0tPlxuPGRpdiBjbGFzcz1cImZvcm0tYnVpbGRlclwiPlxuICA8IS0tIEJhc2ljIEVsZW1lbnRzIFRvZ2dsZSAtLT5cbiAgPGRpdiBjbGFzcz1cInRvZ2dsZS1oZWFkZXJcIiAoY2xpY2spPVwidG9nZ2xlU2VjdGlvbignYmFzaWMnKVwiPlxuICAgIDxkaXYgY2xhc3M9XCJoZWFkLWVsZW1lbnRzXCI+QmFzaWMgRWxlbWVudHM8L2Rpdj5cbiAgICA8c3BhbiBjbGFzcz1cInRvZ2dsZS1pY29uXCI+e3sgc2VjdGlvbnMuYmFzaWMgPyAn4pa8JyA6ICfilrYnIH19PC9zcGFuPlxuICA8L2Rpdj5cblxuICA8ZGl2ICpuZ0lmPVwic2VjdGlvbnMuYmFzaWNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBlbGVtZW50IG9mIGJhc2ljRWxlbWVudHNcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJlbGVtZW50XCIgKGNsaWNrKT1cImFkZEVsZW1lbnQoZWxlbWVudC50eXBlKVwiIGNka0RyYWc+XG4gICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL3t7IGVsZW1lbnQuaW1nIH19LnN2Z1wiIGNsYXNzPVwiZWxlbWVudC1pY29uXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPnt7IGVsZW1lbnQubGFiZWwgfX08L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cblxuICA8IS0tIEFkdmFuY2VkIEVsZW1lbnRzIFRvZ2dsZSAtLT5cbiAgPGRpdiBjbGFzcz1cInRvZ2dsZS1oZWFkZXJcIiAoY2xpY2spPVwidG9nZ2xlU2VjdGlvbignYWR2YW5jZWQnKVwiPlxuICAgIDxkaXYgY2xhc3M9XCJoZWFkLWVsZW1lbnRzXCI+QWR2YW5jZWQgRWxlbWVudHM8L2Rpdj5cbiAgICA8c3Bhbj57eyBzZWN0aW9ucy5hZHZhbmNlZCA/ICfilrwnIDogJ+KWticgfX08L3NwYW4+XG4gIDwvZGl2PlxuICA8ZGl2ICpuZ0lmPVwic2VjdGlvbnMuYWR2YW5jZWRcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBlbGVtZW50IG9mIGFkdmFuY2VkRWxlbWVudHNcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJlbGVtZW50XCIgKGNsaWNrKT1cImFkZEVsZW1lbnQoZWxlbWVudC50eXBlKVwiPlxuICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy97eyBlbGVtZW50LmltZyB9fS5zdmdcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhvdmVyLWxhYmVsXCI+e3sgZWxlbWVudC5sYWJlbCB9fTwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9kaXY+XG4gIFxuPGRpdiBjbGFzcz1cImZvcm0tcHJldmlld1wiIGNka0Ryb3BMaXN0IFtjZGtEcm9wTGlzdERhdGFdPVwiZm9ybUVsZW1lbnRzXCIgKGNka0Ryb3BMaXN0RHJvcHBlZCk9XCJkcm9wKCRldmVudClcIj5cbjxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGZpZWxkIG9mIGZvcm1FbGVtZW50czsgbGV0IGkgPSBpbmRleFwiIGdldFByb3BlcnRpZXMoKS5lbGVtZW50UHJvcHM+XG5cbjwhLS0gVGV4dEJveCAtLT5cbjxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnVGV4dCdcIiBjbGFzcz1cImZpZWxkLWNvbnRhaW5lclwiIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIiBcbiAgW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPiAgXG4gIDxkaXYgY2xhc3M9XCJmaWVsZC13cmFwcGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImZpZWxkLWNvbnRlbnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbC1jb250YWluZXJcIj5cbiAgICAgICAgPGxhYmVsIFtjbGFzcy5yZXF1aXJlZF09XCJmaWVsZC5pc1JlcXVpcmVkXCI+e3sgZmllbGQucXVlc3Rpb25UZXh0ID8gZmllbGQucXVlc3Rpb25UZXh0IDogJ0xhYmVsJyB9fTwvbGFiZWw+XG4gICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIGNsYXNzPVwiZGVsZXRlLWljb25cIiAvPlxuICAgICAgPC9kaXY+ICAgIFxuICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgY2xhc3M9XCJjdXN0b20taW5wdXRcIiBbcGxhY2Vob2xkZXJdPVwiZmllbGQucXVlc3Rpb24gfHwgJ0VudGVyIHRleHQnXCIgW3JlYWRvbmx5XT1cImZpZWxkLmlzUmVhZE9ubHlcIiBcbiAgICAgIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIiAvPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48IS0tIENhbGVuZGFyIC0tPlxuPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdDYWxlbmRhcidcIiBjbGFzcz1cImZpZWxkLWNvbnRhaW5lclwiIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIiBcbiAgW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWVsZC13cmFwcGVyXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmllbGQtY29udGVudFwiPlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+XG4gICAgICAgICAgPGxhYmVsIFtjbGFzcy5yZXF1aXJlZF09XCJmaWVsZC5pc1JlcXVpcmVkXCI+e3sgZmllbGQucXVlc3Rpb25UZXh0ID8gZmllbGQucXVlc3Rpb25UZXh0IDogJ1NlbGVjdCBEYXRlJyB9fTwvbGFiZWw+XG4gICAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvVHJhc2guc3ZnXCIgKGNsaWNrKT1cInJlbW92ZUVsZW1lbnQoZmllbGQsIGkpXCIgIGNsYXNzPVwiZGVsZXRlLWljb25cIiAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGlucHV0IHR5cGU9XCJkYXRlXCIgY2xhc3M9XCJjdXN0b20taW5wdXRcIiBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIi8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuXG48IS0tIEVtYWlsIC0tPlxuPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdFbWFpbCdcIiBjbGFzcz1cImZpZWxkLWNvbnRhaW5lclwiIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIiBcbltjbGFzcy5oaWdobGlnaHRdPVwic2VsZWN0ZWRGaWVsZEluZGV4ID09PSBpXCIgY2RrRHJhZz5cbiAgIDxkaXYgY2xhc3M9XCJmaWVsZC13cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImxhYmVsLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGxhYmVsIFtjbGFzcy5yZXF1aXJlZF09XCJmaWVsZC5pc1JlcXVpcmVkXCI+IHt7IGZpZWxkLnF1ZXN0aW9uVGV4dCA/IGZpZWxkLnF1ZXN0aW9uVGV4dCA6ICdMYWJlbCcgfX0gPC9sYWJlbD5cbiAgICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIGNsYXNzPVwiZGVsZXRlLWljb25cIiAvPlxuICAgICAgICAgIDwvZGl2PiAgICAgICAgXG4gICAgICAgICAgPGlucHV0IHR5cGU9XCJlbWFpbFwiIGNsYXNzPVwiY3VzdG9tLWlucHV0XCIgW3BsYWNlaG9sZGVyXT1cImZpZWxkLnF1ZXN0aW9uIHx8ICdFbnRlciBlbWFpbCdcIiBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFxuICAgICAgICAgICAgICAgICBbY2xhc3MuaGlkZGVuXT1cImZpZWxkLmlzSGlkZGVuXCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbjwvZGl2PlxuXG48IS0tIE51bWJlcnMgLS0+XG48ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ051bWJlcidcIiBjbGFzcz1cImZpZWxkLWNvbnRhaW5lclwiIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIiBcbiBbY2xhc3MuaGlnaGxpZ2h0XT1cInNlbGVjdGVkRmllbGRJbmRleCA9PT0gaVwiIGNka0RyYWc+IFxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmllbGQtd3JhcHBlclwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+XG4gICAgICAgICAgICAgIDxsYWJlbCBbY2xhc3MucmVxdWlyZWRdPVwiZmllbGQuaXNSZXF1aXJlZFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCA/IGZpZWxkLnF1ZXN0aW9uVGV4dCA6ICdMYWJlbCcgfX08L2xhYmVsPlxuICAgICAgICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiBjbGFzcz1cImRlbGV0ZS1pY29uXCIgLz5cbiAgICAgICAgICAgIDwvZGl2PiAgICAgICAgICBcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwibnVtYmVyXCIgY2xhc3M9XCJjdXN0b20taW5wdXRcIiBbcGxhY2Vob2xkZXJdPVwiZmllbGQucXVlc3Rpb24gfHwgJ0VudGVyIG51bWJlcidcIiBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFxuICAgICAgICAgICAgICAgICAgIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIi8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuPC9kaXY+XG4gICAgICBcbjwhLS0gVGV4dEFyZWEgLS0+XG48ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ1RleHRBcmVhJ1wiIGNsYXNzPVwiZmllbGQtY29udGFpbmVyXCIgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiIFxuIFtjbGFzcy5oaWdobGlnaHRdPVwic2VsZWN0ZWRGaWVsZEluZGV4ID09PSBpXCIgY2RrRHJhZz5cbiAgIDxkaXYgY2xhc3M9XCJmaWVsZC13cmFwcGVyXCI+XG4gICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICAgICAgPGRpdiBjbGFzcz1cImxhYmVsLWNvbnRhaW5lclwiPlxuICAgICAgICAgPGxhYmVsIFtjbGFzcy5yZXF1aXJlZF09XCJmaWVsZC5pc1JlcXVpcmVkXCI+e3sgZmllbGQucXVlc3Rpb25UZXh0ID8gZmllbGQucXVlc3Rpb25UZXh0IDogJ0VudGVyIHlvdXIgdGV4dCcgfX1cbiAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJmaWVsZC5yZXF1aXJlZFwiIGNsYXNzPVwidGV4dC1yZWQtNTAwXCI+Kjwvc3Bhbj5cbiAgICAgICAgIDwvbGFiZWw+XG4gICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiBjbGFzcz1cImRlbGV0ZS1pY29uXCIgLz5cbiAgICAgICA8L2Rpdj4gICAgXG4gICAgICAgPHRleHRhcmVhIGNsYXNzPVwiY3VzdG9tLXRleHRhcmVhXCIgW3BsYWNlaG9sZGVyXT1cImZpZWxkLnF1ZXN0aW9uIHx8ICdFbnRlciBkZXRhaWxlZCB0ZXh0IGhlcmUuLi4nXCIgW3N0eWxlLmhlaWdodC5weF09XCJmaWVsZC5zaXplIHx8IDEwMFwiXG4gICAgICAgW3JlYWRvbmx5XT1cImZpZWxkLmlzUmVhZE9ubHlcIiBbY2xhc3MuaGlkZGVuXT1cImZpZWxkLmlzSGlkZGVuXCI+XG4gICAgICAgPC90ZXh0YXJlYT5cbiAgICAgPC9kaXY+XG4gICA8L2Rpdj5cbjwvZGl2PlxuXG48IS0tIFJpY2hUZXh0IC0tPlxuPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdSaWNoVGV4dEFyZWEnXCIgY2xhc3M9XCJmaWVsZC1jb250YWluZXJcIiAoY2xpY2spPVwic2VsZWN0RWxlbWVudChpKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCIgXG4gW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPlxuICAgPGRpdiBjbGFzcz1cImZpZWxkLXdyYXBwZXJcIj5cbiAgICAgPGRpdiBjbGFzcz1cImZpZWxkLWNvbnRlbnRcIj5cbiAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+XG4gICAgICAgICA8bGFiZWwgW2NsYXNzLnJlcXVpcmVkXT1cImZpZWxkLmlzUmVxdWlyZWRcIj57eyBmaWVsZC5xdWVzdGlvblRleHQgPyBmaWVsZC5xdWVzdGlvblRleHQgOiAnRW50ZXIgeW91ciB0ZXh0JyB9fVxuICAgICAgICAgICA8c3BhbiAqbmdJZj1cImZpZWxkLnJlcXVpcmVkXCIgY2xhc3M9XCJ0ZXh0LXJlZC01MDBcIj4qPC9zcGFuPlxuICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIGNsYXNzPVwiZGVsZXRlLWljb25cIiAvPlxuICAgICAgIDwvZGl2PiAgICBcbiAgICAgICA8dGV4dGFyZWEgY2xhc3M9XCJjdXN0b20tdGV4dGFyZWFcIiBbcGxhY2Vob2xkZXJdPVwiZmllbGQucXVlc3Rpb24gfHwgJ0VudGVyIGRldGFpbGVkIHRleHQgaGVyZS4uLidcIiBbc3R5bGUuaGVpZ2h0LnB4XT1cImZpZWxkLnNpemUgfHwgMTAwXCJcbiAgICAgICBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIj5cbiAgICAgICA8L3RleHRhcmVhPlxuICAgICA8L2Rpdj5cbiAgIDwvZGl2PlxuPC9kaXY+XG5cbjwhLS0gTGFiZWwgLS0+XG48ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ0xhYmVsJ1wiIGNsYXNzPVwiZmllbGQtY29udGFpbmVyXCIgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiXG5bY2xhc3MuaGlnaGxpZ2h0XT1cInNlbGVjdGVkRmllbGRJbmRleCA9PT0gaVwiIGNka0RyYWc+XG48ZGl2IGNsYXNzPVwiZmllbGQtd3JhcHBlclwiPlxuIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+XG4gICAgICAgIDxsYWJlbCBbY2xhc3MucmVxdWlyZWRdPVwiZmllbGQuaXNSZXF1aXJlZFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCA/IGZpZWxkLnF1ZXN0aW9uVGV4dCA6ICdMYWJlbCcgfX08L2xhYmVsPlxuICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiBjbGFzcz1cImRlbGV0ZS1pY29uXCIvPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG5cbjwhLS0gSW1hZ2UgLS0+XG48ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ0ltYWdlJ1wiIGNsYXNzPVwiZmllbGQtY29udGFpbmVyXCIgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiIFxuW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPlxuICAgICAgPGRpdiBjbGFzcz1cImZpZWxkLXdyYXBwZXJcIj5cbiAgICAgICA8ZGl2IGNsYXNzPVwiZmllbGQtY29udGVudFwiPlxuICAgICAgICAgPGRpdiBjbGFzcz1cImxhYmVsLWNvbnRhaW5lclwiPlxuICAgICAgICA8bGFiZWwgW2NsYXNzLnJlcXVpcmVkXT1cImZpZWxkLmlzUmVxdWlyZWRcIj4ge3sgZmllbGQucXVlc3Rpb25UZXh0ID8gZmllbGQucXVlc3Rpb25UZXh0IDogJ1VwbG9hZCBJbWFnZScgfX0gPC9sYWJlbD5cbiAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvVHJhc2guc3ZnXCIgKGNsaWNrKT1cInJlbW92ZUVsZW1lbnQoZmllbGQsIGkpXCIgY2xhc3M9XCJkZWxldGUtaWNvblwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxpbnB1dCB0eXBlPVwiZmlsZVwiIGFjY2VwdD1cImltYWdlLypcIiBjbGFzcz1cImN1c3RvbS1pbnB1dFwiIFtyZWFkb25seV09XCJmaWVsZC5pc1JlYWRPbmx5XCIgW2NsYXNzLmhpZGRlbl09XCJmaWVsZC5pc0hpZGRlblwiLz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cblxuIDwhLS0gRmlsZSAtLT5cbjxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnRmlsZSdcIiBjbGFzcz1cImZpZWxkLWNvbnRhaW5lclwiIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIiBcbiAgW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPlxuICAgIDxkaXYgY2xhc3M9XCJmaWVsZC13cmFwcGVyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmllbGQtY29udGVudFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+XG4gICAgIDxsYWJlbCBbY2xhc3MucmVxdWlyZWRdPVwiZmllbGQuaXNSZXF1aXJlZFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCA/IGZpZWxkLnF1ZXN0aW9uVGV4dCA6ICdVcGxvYWQgRmlsZScgfX08L2xhYmVsPlxuICAgICA8aW1nICBzcmM9XCIuLi9hc3NldHMvaWNvbnMvVHJhc2guc3ZnXCIgKGNsaWNrKT1cInJlbW92ZUVsZW1lbnQoZmllbGQsIGkpXCIgY2xhc3M9XCJkZWxldGUtaWNvblwiIC8+XG4gICA8L2Rpdj5cbiAgIDxpbnB1dCB0eXBlPVwiZmlsZVwiIGNsYXNzPVwiY3VzdG9tLWlucHV0XCIgW3JlYWRvbmx5XT1cImZpZWxkLmlzUmVhZE9ubHlcIiBbY2xhc3MuaGlkZGVuXT1cImZpZWxkLmlzSGlkZGVuXCIvPlxuICAgIDwvZGl2PlxuICAgPC9kaXY+XG48L2Rpdj5cbiAgXG48IS0tIENoZWNrQm94IC0tPlxuPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdDaGVja0JveCdcIiBjbGFzcz1cImNoZWNrYm94LWZpZWxkLWNvbnRhaW5lclwiIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIiBcbiAgW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPlxuICAgICAgPGRpdiBjbGFzcz1cImZpZWxkLXdyYXBwZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZpZWxkLWNvbnRlbnRcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+ICAgXG4gICAgICAgICAgICA8bGFiZWwgW2NsYXNzLnJlcXVpcmVkXT1cImZpZWxkLmlzUmVxdWlyZWRcIj57eyBmaWVsZC5xdWVzdGlvblRleHQgPyBmaWVsZC5xdWVzdGlvblRleHQgOiAnTGFiZWwnIH19PC9sYWJlbD5cbiAgICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIGNsYXNzPVwiZGVsZXRlLWljb25cIiAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaGVja2JveC1vcHRpb25zLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGZpZWxkLm9wdGlvbnNcIiBjbGFzcz1cImNoZWNrYm94LW9wdGlvblwiPlxuICAgICAgICAgICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgW2lkXT1cIm9wdGlvbi52YWx1ZSArIGlcIiBbbmFtZV09XCJmaWVsZC5pZFwiIFt2YWx1ZV09XCJvcHRpb24udmFsdWVcIiBjbGFzcz1cImNoZWNrYm94LWlucHV0XCJcbiAgICAgICAgICAgICAgW3JlYWRvbmx5XT1cImZpZWxkLmlzUmVhZE9ubHlcIiBbY2xhc3MuaGlkZGVuXT1cImZpZWxkLmlzSGlkZGVuXCI+XG4gICAgICAgICAgICAgIDxsYWJlbCBbZm9yXT1cIm9wdGlvbi52YWx1ZSArIGlcIiBjbGFzcz1cImNoZWNrYm94LWxhYmVsXCI+e3sgb3B0aW9uLnZhbHVlIH19PC9sYWJlbD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuPC9kaXY+ICAgXG5cbjwhLS0gUmFkaW8gLS0+XG48ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ1JhZGlvJ1wiIGNsYXNzPVwiZmllbGQtY29udGFpbmVyXCIgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiIFxuW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPlxuICA8ZGl2IGNsYXNzPVwiZmllbGQtd3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICAgICAgPGRpdiBjbGFzcz1cImxhYmVsLWNvbnRhaW5lclwiPiAgIFxuICAgICAgICAgICAgICAgIDxsYWJlbCBbY2xhc3MucmVxdWlyZWRdPVwiZmllbGQuaXNSZXF1aXJlZFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCA/IGZpZWxkLnF1ZXN0aW9uVGV4dCA6ICdMYWJlbCcgfX08L2xhYmVsPlxuICAgICAgICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIGNsYXNzPVwiZGVsZXRlLWljb25cIiAvPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicmFkaW8tb3B0aW9ucy1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZmllbGQub3B0aW9uczsgbGV0IGogPSBpbmRleFwiIGNsYXNzPVwicmFkaW8tb3B0aW9uXCI+XG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwicmFkaW9cIiBbaWRdPVwiJ3JhZGlvLScgKyBmaWVsZC5pZCArICctJyArIGpcIiBbbmFtZV09XCIncmFkaW8tZ3JvdXAtJyArIGZpZWxkLmlkXCIgIFt2YWx1ZV09XCJvcHRpb24udmFsdWVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJmaWVsZC5zZWxlY3RlZFZhbHVlXCIgY2xhc3M9XCJyYWRpby1pbnB1dFwiIFtyZWFkb25seV09XCJmaWVsZC5pc1JlYWRPbmx5XCIgW2NsYXNzLmhpZGRlbl09XCJmaWVsZC5pc0hpZGRlblwiPlxuICAgICAgICAgICAgICAgICAgICA8bGFiZWwgW2Zvcl09XCIncmFkaW8tJyArIGZpZWxkLmlkICsgJy0nICsgalwiIGNsYXNzPVwicmFkaW8tbGFiZWxcIj4ge3sgb3B0aW9uLnZhbHVlIH19PC9sYWJlbD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIFxuPCEtLSBEcm9wZG93biAtLT5cbjxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnRHJvcGRvd24nXCIgY2xhc3M9XCJmaWVsZC1jb250YWluZXJcIiAoY2xpY2spPVwic2VsZWN0RWxlbWVudChpKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCIgXG5bY2xhc3MuaGlnaGxpZ2h0XT1cInNlbGVjdGVkRmllbGRJbmRleCA9PT0gaVwiIGNka0RyYWc+XG4gICAgPGRpdiBjbGFzcz1cImZpZWxkLXdyYXBwZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbC1jb250YWluZXJcIj4gICBcbiAgICAgICAgICA8bGFiZWwgW2NsYXNzLnJlcXVpcmVkXT1cImZpZWxkLmlzUmVxdWlyZWRcIj57eyBmaWVsZC5xdWVzdGlvblRleHQgPyBmaWVsZC5xdWVzdGlvblRleHQgOiAnTGFiZWwnIH19PC9sYWJlbD5cbiAgICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiBjbGFzcz1cImRlbGV0ZS1pY29uXCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxzZWxlY3QgaWQ9XCJvcHRpb25zXCIgY2xhc3M9XCJkcm9wZG93blwiW2Rpc2FibGVkXT1cImZpZWxkLmlzUmVhZE9ubHlcIiBbY2xhc3MuaGlkZGVuXT1cImZpZWxkLmlzSGlkZGVuXCIgPlxuICAgICAgICAgIDxvcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBmaWVsZC5vcHRpb25zXCIgW3ZhbHVlXT1cIm9wdGlvbi52YWx1ZVwiPiB7eyBvcHRpb24udmFsdWUgfX0gPC9vcHRpb24+XG4gICAgICAgIDwvc2VsZWN0PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiAgICBcbjwhLS0gIFRhYmxlICAtLT5cbiAgPCEtLSBBUC0wNk1BUjI1IC0tPlxuPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdUYWJsZSdcIiBjbGFzcz1cImZpZWxkLWNvbnRhaW5lclwiIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIiBcbltjbGFzcy5oaWdobGlnaHRdPVwic2VsZWN0ZWRGaWVsZEluZGV4ID09PSBpXCIgY2RrRHJhZz5cbjxkaXYgY2xhc3M9XCJmaWVsZC13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICAgIDxkaXYgY2xhc3M9XCJsYWJlbC1jb250YWluZXJcIj4gICBcbiAgICAgIDxsYWJlbCBbY2xhc3MucmVxdWlyZWRdPVwiZmllbGQuaXNSZXF1aXJlZFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCA/IGZpZWxkLnF1ZXN0aW9uVGV4dCA6ICdMYWJlbCcgfX08L2xhYmVsPlxuICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIGNsYXNzPVwiZGVsZXRlLWljb25cIiAvPlxuICAgICA8L2Rpdj5cbiAgIDwvZGl2PlxuIDwvZGl2PlxuPC9kaXY+XG5cbjwhLS0gTGlzdCAtLT5cbiA8IS0tIEFQLTA2TUFSMjUgLSBMaXN0IGRhdGEgc2hvdy0tPlxuPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdMaXN0J1wiIGNsYXNzPVwiZmllbGQtY29udGFpbmVyXCIgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiIFxuW2NsYXNzLmhpZ2hsaWdodF09XCJzZWxlY3RlZEZpZWxkSW5kZXggPT09IGlcIiBjZGtEcmFnPlxuICAgIDxkaXYgY2xhc3M9XCJmaWVsZC13cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1jb250ZW50XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWwtY29udGFpbmVyXCI+XG4gICAgICAgICAgICAgICAgPGxhYmVsIFtjbGFzcy5yZXF1aXJlZF09XCJmaWVsZC5pc1JlcXVpcmVkXCI+e3sgZmllbGQucXVlc3Rpb25UZXh0ID8gZmllbGQucXVlc3Rpb25UZXh0IDogJ0xhYmVsJyB9fTwvbGFiZWw+XG4gICAgICAgICAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvVHJhc2guc3ZnXCIgKGNsaWNrKT1cInJlbW92ZUVsZW1lbnQoZmllbGQsIGkpXCIgY2xhc3M9XCJkZWxldGUtaWNvblwiIC8+XG4gICAgICAgICAgICA8L2Rpdj4gICAgICAgICAgXG4gICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIGNsYXNzPVwiY3VzdG9tLWlucHV0XCIgcGxhY2Vob2xkZXI9XCJTZWFyY2guLi5cIiBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIi8+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG5cbiAgPCEtLSBCb29rIC0tPlxuPCEtLSA8ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ0Jvb2snXCIgIHN0eWxlPVwicGFkZGluZzogMTBweDsgYmFja2dyb3VuZC1jb2xvcjogd2hpdGVzbW9rZTtcIiAoY2xpY2spPVwic2VsZWN0RWxlbWVudChpKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCIgY2RrRHJhZz5cbiAgPGRpdiBjbGFzcz1cImZsZXhcIiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7XCI+XG4gICAgPGRpdiBjbGFzcz1cImFsbC1kb3RzXCI+PGRpdiAqbmdGb3I9XCJsZXQgXyBvZiBbMSwyLDMsNCw1LDYsNyw4XVwiPjwvZGl2PjwvZGl2PlxuICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogOTclO1wiPlxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggbGFiLWNvbmF0aW5lclwiPlxuICAgICAgICA8bGFiZWwgW2NsYXNzLnJlcXVpcmVkXT1cImZpZWxkLnJlcXVpcmVkXCI+e3sgZmllbGQucXVlc3Rpb25UZXh0ID8gZmllbGQucXVlc3Rpb25UZXh0IDogJ0Jvb2sgVGl0bGUnIH19PC9sYWJlbD5cbiAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvVHJhc2guc3ZnXCIgKGNsaWNrKT1cInJlbW92ZUVsZW1lbnQoZmllbGQsIGkpXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PiAtLT5cbiAgICAgIFxuPCEtLSBCdXR0b24gLS0+XG48IS0tIDxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnQnV0dG9uJ1wiIGNsYXNzPVwiYnV0dG9uLWNvbnRhaW5lclwiIGNka0RyYWcgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiPlxuICAgICAgICAgICAgPGJ1dHRvbj57eyBmaWVsZC5xdWVzdGlvblRleHQgfX08L2J1dHRvbj5cbiAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIC8+XG4gICAgICAgICAgPC9kaXY+IC0tPlxuXG48L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuPC9kaXY+XG5cblxuXG5cbiJdfQ==

package/esm2022/lib/pages/builder/form/form.component.mjs

@@ -0,0 +1,34 @@
+// AP-29JAN25 
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../element/element.component";
+import * as i2 from "../properties/properties.component";
+export class FormComponent {
+    // Input data for app-element
+    // bookletJson: any = {}; // Replace with your actual JSON object
+    // bookletId: string = '123'; // Replace with your actual booklet ID
+    bookletJSON;
+    bookletId;
+    formButtonHandler = new EventEmitter();
+    // Input data for app-properties
+    // api: string = 'https://example.com/api'; // Replace with your actual API endpoint
+    // apiMethod: string = 'GET'; // Replace with your actual API method
+    selectedElementType = 'button'; // Replace with the default selected element type
+    // Event handler for app-element
+    formButtonHandlerClick(event) {
+        this.formButtonHandler.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%}app-properties{width:25%;overflow-y:auto;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: i1.ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"] }, { kind: "component", type: i2.PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%}app-properties{width:25%;overflow-y:auto;border:10px solid #86A8CD}\n"] }]
+        }], propDecorators: { bookletJSON: [{
+                type: Input
+            }], bookletId: [{
+                type: Input
+            }], formButtonHandler: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvcGFnZXMvYnVpbGRlci9mb3JtL2Zvcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvZm9ybS9mb3JtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWM7QUFDZCxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3ZFLE1BQU0sT0FBTyxhQUFhO0lBQ3hCLDZCQUE2QjtJQUM3QixpRUFBaUU7SUFDakUsb0VBQW9FO0lBQ3pELFdBQVcsQ0FBTTtJQUNqQixTQUFTLENBQU07SUFDZCxpQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBRTNELGdDQUFnQztJQUNoQyxvRkFBb0Y7SUFDcEYsb0VBQW9FO0lBQ3BFLG1CQUFtQixHQUFXLFFBQVEsQ0FBQyxDQUFDLGlEQUFpRDtJQUV6RixnQ0FBZ0M7SUFDaEMsc0JBQXNCLENBQUMsS0FBSztRQUMxQixJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3JDLENBQUM7d0dBaEJVLGFBQWE7NEZBQWIsYUFBYSw2S0NSMUIsMFVBUUU7OzRGREFXLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0Usa0JBQWtCOzhCQVFqQixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0ksaUJBQWlCO3NCQUExQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQVAtMjlKQU4yNSBcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1mb3JtLWJ1aWxkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvcm0uY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBGb3JtQ29tcG9uZW50IHtcbiAgLy8gSW5wdXQgZGF0YSBmb3IgYXBwLWVsZW1lbnRcbiAgLy8gYm9va2xldEpzb246IGFueSA9IHt9OyAvLyBSZXBsYWNlIHdpdGggeW91ciBhY3R1YWwgSlNPTiBvYmplY3RcbiAgLy8gYm9va2xldElkOiBzdHJpbmcgPSAnMTIzJzsgLy8gUmVwbGFjZSB3aXRoIHlvdXIgYWN0dWFsIGJvb2tsZXQgSURcbiAgICBASW5wdXQoKSBib29rbGV0SlNPTjogYW55O1xuICAgIEBJbnB1dCgpIGJvb2tsZXRJZDogYW55O1xuICAgIEBPdXRwdXQoKSBmb3JtQnV0dG9uSGFuZGxlciA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8vIElucHV0IGRhdGEgZm9yIGFwcC1wcm9wZXJ0aWVzXG4gIC8vIGFwaTogc3RyaW5nID0gJ2h0dHBzOi8vZXhhbXBsZS5jb20vYXBpJzsgLy8gUmVwbGFjZSB3aXRoIHlvdXIgYWN0dWFsIEFQSSBlbmRwb2ludFxuICAvLyBhcGlNZXRob2Q6IHN0cmluZyA9ICdHRVQnOyAvLyBSZXBsYWNlIHdpdGggeW91ciBhY3R1YWwgQVBJIG1ldGhvZFxuICBzZWxlY3RlZEVsZW1lbnRUeXBlOiBzdHJpbmcgPSAnYnV0dG9uJzsgLy8gUmVwbGFjZSB3aXRoIHRoZSBkZWZhdWx0IHNlbGVjdGVkIGVsZW1lbnQgdHlwZVxuXG4gIC8vIEV2ZW50IGhhbmRsZXIgZm9yIGFwcC1lbGVtZW50XG4gIGZvcm1CdXR0b25IYW5kbGVyQ2xpY2soZXZlbnQpe1xuICAgIHRoaXMuZm9ybUJ1dHRvbkhhbmRsZXIuZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIjwhLS0gQVAtMjlKQU4yNSAtLT5cbjxkaXYgY2xhc3M9XCJmb3JtLWNvbnRhaW5lciBcIj5cbiAgICA8IS0tIGFwcC1lbGVtZW50IENvbXBvbmVudCAtLT5cbiAgICA8YXBwLWVsZW1lbnQgW2Jvb2tsZXRKU09OXT1cImJvb2tsZXRKU09OXCIgW2Jvb2tsZXRJZF09XCJib29rbGV0SWRcIj48L2FwcC1lbGVtZW50PlxuICBcbiAgICA8IS0tIGFwcC1wcm9wZXJ0aWVzIENvbXBvbmVudCAtLT5cbiAgICA8YXBwLXByb3BlcnRpZXMgKGZvcm1CdXR0b25IYW5kbGVyKT1cImZvcm1CdXR0b25IYW5kbGVyQ2xpY2soJGV2ZW50KVwiPjwvYXBwLXByb3BlcnRpZXM+XG4gIDwvZGl2PlxuICAiXX0=

package/esm2022/lib/pages/builder/menu/menu.component.mjs

@@ -0,0 +1,28 @@
+// AP 22JAN25
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class MenuComponent {
+    activeIndex = 0;
+    menuItems = [
+        { icon: '../assets/icons/Related.svg' },
+        { icon: '../assets/icons/TextColumns.svg' },
+        { icon: '../assets/icons/Monotone.svg' },
+        { icon: '../assets/icons/Preview1.svg' },
+        { icon: '../assets/icons/Website.svg' },
+        { icon: '../assets/icons/Preview2.svg' },
+        { icon: '../assets/icons/pdf.svg' },
+        { icon: '../assets/icons/Setting.svg' }
+        // { icon: '../assets/icons/ProfileImage.svg' }
+    ];
+    setActiveMenu(index) {
+        this.activeIndex = index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", ngImport: i0, template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n    <button class=\"button share-button\">Share</button>\n    <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n  <!-- Logo Section -->\n  <div class=\"menu-logo\">\n    <img src=\"../assets/Nxt.png\">\n  </div>\n\n  <!-- Menu Items -->\n  <ul class=\"menu-list\">\n    <li\n      *ngFor=\"let item of menuItems; let i = index\"\n      class=\"menu-item\"\n      [class.active]=\"activeIndex === i\"\n      (click)=\"setActiveMenu(i)\"\n      [attr.aria-label]=\"item.label\"\n    >\n      <!-- Dynamic Icon -->\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n    </li>\n  </ul>\n\n  <!-- Profile Section -->\n  <div class=\"menu-profile\">\n    <img src=\"../assets/icons/ProfileImage.svg\" />\n  </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-menu', template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n    <button class=\"button share-button\">Share</button>\n    <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n  <!-- Logo Section -->\n  <div class=\"menu-logo\">\n    <img src=\"../assets/Nxt.png\">\n  </div>\n\n  <!-- Menu Items -->\n  <ul class=\"menu-list\">\n    <li\n      *ngFor=\"let item of menuItems; let i = index\"\n      class=\"menu-item\"\n      [class.active]=\"activeIndex === i\"\n      (click)=\"setActiveMenu(i)\"\n      [attr.aria-label]=\"item.label\"\n    >\n      <!-- Dynamic Icon -->\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n    </li>\n  </ul>\n\n  <!-- Profile Section -->\n  <div class=\"menu-profile\">\n    <img src=\"../assets/icons/ProfileImage.svg\" />\n  </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvcGFnZXMvYnVpbGRlci9tZW51L21lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvbWVudS9tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGFBQWE7QUFDYixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPMUMsTUFBTSxPQUFPLGFBQWE7SUFDeEIsV0FBVyxHQUFXLENBQUMsQ0FBQztJQUV4QixTQUFTLEdBQUc7UUFDVixFQUFFLElBQUksRUFBRSw2QkFBNkIsRUFBRTtRQUN2QyxFQUFFLElBQUksRUFBRSxpQ0FBaUMsRUFBRTtRQUMzQyxFQUFFLElBQUksRUFBRSw4QkFBOEIsRUFBRTtRQUN4QyxFQUFFLElBQUksRUFBRSw4QkFBOEIsRUFBRTtRQUN4QyxFQUFFLElBQUksRUFBRSw2QkFBNkIsRUFBRTtRQUN2QyxFQUFFLElBQUksRUFBRSw4QkFBOEIsRUFBRTtRQUN4QyxFQUFFLElBQUksRUFBRSx5QkFBeUIsRUFBRTtRQUNuQyxFQUFFLElBQUksRUFBRSw2QkFBNkIsRUFBRTtRQUN2QywrQ0FBK0M7S0FDaEQsQ0FBQztJQUVGLGFBQWEsQ0FBQyxLQUFhO1FBQ3pCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO0lBQzNCLENBQUM7d0dBakJVLGFBQWE7NEZBQWIsYUFBYSxnRENSMUIsODNCQWdDQTs7NEZEeEJhLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0UsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbIi8vIEFQIDIySkFOMjVcbmltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtbWVudScsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWVudS5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTWVudUNvbXBvbmVudCB7XG4gIGFjdGl2ZUluZGV4OiBudW1iZXIgPSAwO1xuXG4gIG1lbnVJdGVtcyA9IFtcbiAgICB7IGljb246ICcuLi9hc3NldHMvaWNvbnMvUmVsYXRlZC5zdmcnIH0sXG4gICAgeyBpY29uOiAnLi4vYXNzZXRzL2ljb25zL1RleHRDb2x1bW5zLnN2ZycgfSxcbiAgICB7IGljb246ICcuLi9hc3NldHMvaWNvbnMvTW9ub3RvbmUuc3ZnJyB9LFxuICAgIHsgaWNvbjogJy4uL2Fzc2V0cy9pY29ucy9QcmV2aWV3MS5zdmcnIH0sXG4gICAgeyBpY29uOiAnLi4vYXNzZXRzL2ljb25zL1dlYnNpdGUuc3ZnJyB9LFxuICAgIHsgaWNvbjogJy4uL2Fzc2V0cy9pY29ucy9QcmV2aWV3Mi5zdmcnIH0sXG4gICAgeyBpY29uOiAnLi4vYXNzZXRzL2ljb25zL3BkZi5zdmcnIH0sXG4gICAgeyBpY29uOiAnLi4vYXNzZXRzL2ljb25zL1NldHRpbmcuc3ZnJyB9XG4gICAgLy8geyBpY29uOiAnLi4vYXNzZXRzL2ljb25zL1Byb2ZpbGVJbWFnZS5zdmcnIH1cbiAgXTtcblxuICBzZXRBY3RpdmVNZW51KGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLmFjdGl2ZUluZGV4ID0gaW5kZXg7XG4gIH1cbn1cbiIsIjwhLS0gQVAgMjJKQU4yNSAtIFRvcCBtZW51ICxMZWZ0IHNpZGUgbWVudSAgLS0+XG48IS0tIG1lbnUuY29tcG9uZW50Lmh0bWwgLS0+XG48ZGl2IGNsYXNzPVwidG9wLWJhclwiPlxuICAgIDxidXR0b24gY2xhc3M9XCJidXR0b24gc2hhcmUtYnV0dG9uXCI+U2hhcmU8L2J1dHRvbj5cbiAgICA8YnV0dG9uIGNsYXNzPVwiYnV0dG9uIHB1Ymxpc2gtYnV0dG9uXCI+UHVibGlzaDwvYnV0dG9uPlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwibWVudS1zaWRlYmFyXCI+XG4gIDwhLS0gTG9nbyBTZWN0aW9uIC0tPlxuICA8ZGl2IGNsYXNzPVwibWVudS1sb2dvXCI+XG4gICAgPGltZyBzcmM9XCIuLi9hc3NldHMvTnh0LnBuZ1wiPlxuICA8L2Rpdj5cblxuICA8IS0tIE1lbnUgSXRlbXMgLS0+XG4gIDx1bCBjbGFzcz1cIm1lbnUtbGlzdFwiPlxuICAgIDxsaVxuICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgbWVudUl0ZW1zOyBsZXQgaSA9IGluZGV4XCJcbiAgICAgIGNsYXNzPVwibWVudS1pdGVtXCJcbiAgICAgIFtjbGFzcy5hY3RpdmVdPVwiYWN0aXZlSW5kZXggPT09IGlcIlxuICAgICAgKGNsaWNrKT1cInNldEFjdGl2ZU1lbnUoaSlcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJpdGVtLmxhYmVsXCJcbiAgICA+XG4gICAgICA8IS0tIER5bmFtaWMgSWNvbiAtLT5cbiAgICAgIDxpbWcgW3NyY109XCJpdGVtLmljb25cIiBhbHQ9XCJNZW51IEljb25cIiBjbGFzcz1cIm1lbnUtaWNvblwiIC8+XG4gICAgPC9saT5cbiAgPC91bD5cblxuICA8IS0tIFByb2ZpbGUgU2VjdGlvbiAtLT5cbiAgPGRpdiBjbGFzcz1cIm1lbnUtcHJvZmlsZVwiPlxuICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1Byb2ZpbGVJbWFnZS5zdmdcIiAvPlxuICA8L2Rpdj5cbjwvZGl2PlxuXG4iXX0=