@rangertechnologies/ngnxt 2.1.83 → 2.1.84

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

@@ -0,0 +1,153 @@
+// AP 22JAN25 - form preview and All form elements
+import { Component, EventEmitter, Input, Output, ViewChild, } 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;
+    elementButtonClicked = new EventEmitter();
+    formContainer;
+    bookletJSON;
+    bookletId;
+    formElements = [];
+    constructor(formBuilderService) {
+        this.formBuilderService = formBuilderService;
+    }
+    ngOnInit() {
+        // Subscribe to the formElements$ observable
+        this.formBuilderService.formElements$.subscribe((elements) => {
+            this.formElements = elements; // Update the local array with the latest data
+            console.log('Form Elements:', this.formElements);
+        });
+        console.log("bookletJSON==" + this.bookletJSON);
+        if (this.bookletJSON) {
+            localStorage.setItem('status', ("edit"));
+            localStorage.setItem('unique_id', (this.bookletId));
+            this.formElements = [];
+            this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
+                this.formBuilderService.addElement(newElement);
+                this.formElements = this.formBuilderService.getElements();
+            });
+        }
+        else {
+            localStorage.setItem('status', ("new"));
+        }
+    }
+    drop(event) {
+        moveItemInArray(this.formElements, event.previousIndex, event.currentIndex);
+    }
+    // Add this method to handle element selection
+    selectElement(index) {
+        this.formBuilderService.setSelectedElement(index);
+        const element = this.formElements[index];
+        this.elementButtonClicked.emit(element.type); // Emit the type when selecting
+    }
+    addElement(type) {
+        const unique_id = uuidv4();
+        const newElement = {
+            id: unique_id,
+            uid: unique_id,
+            name: '',
+            type,
+            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 === 'CheckBox' || type === 'Radio' || type === 'Dropdown' ? [
+                { label: 'Option 1', value: '', type: 'text', key: 'option1' },
+                { label: 'Option 2', value: '', type: 'text', key: 'option2' }
+            ] : null,
+        };
+        this.formBuilderService.addElement(newElement);
+        this.formElements = this.formBuilderService.getElements();
+    }
+    addOption(options) {
+        options.push({ label: `Option ${options.length + 1}`, value: '' });
+    }
+    removeOption(options, index) {
+        options.splice(index, 1);
+    }
+    // Remove an element by index
+    removeElement(field, index) {
+        console.log('remove', index);
+        this.formBuilderService.removeElementComponent(field.uid);
+        this.formElements = this.formBuilderService.getElements();
+    }
+    getFontStyles(field) {
+        const styles = {
+            'font-family': field.font || 'Helvetica Neue',
+            'font-weight': field.fontWeight || '400',
+            'width': `${field.width || 980}px`,
+            'height': `${field.height || 91}px`,
+            'text-align': field.textAlign || 'left'
+        };
+        // Handle array of style classes
+        if (field.styles && Array.isArray(field.styles)) {
+            if (field.styles.includes('bold')) {
+                styles['font-weight'] = '700';
+            }
+            if (field.styles.includes('italic')) {
+                styles['font-style'] = 'italic';
+            }
+            if (field.styles.includes('underline')) {
+                styles['text-decoration'] = 'underline';
+            }
+            if (field.styles.includes('capitalize')) {
+                styles['text-transform'] = 'capitalize';
+            }
+            if (field.styles.includes('lowercase')) {
+                styles['text-transform'] = 'lowercase';
+            }
+        }
+        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" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"box\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n    background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n           <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <span class=\"label-text\">{{ field.questionText }}</span>\r\n            <div class=\"checkbox-container\">\r\n              <label class=\"option-label\">\r\n            <!-- Options Section -->\r\n             <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n    <div *ngFor=\"let option of field.options; let i = index\"      class=\"option-item\">\r\n      <!-- Option Input -->\r\n      <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n      <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n      <!-- Remove Button -->\r\n      <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n        <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n      </button>\r\n    </div>\r\n    <!-- Add Option Button -->\r\n    <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n      <span class=\"text-lg\">+</span>\r\n    </button>\r\n            </div>\r\n              </label>\r\n    <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n                <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n    <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- Calendar -->\r\n    <div *ngIf=\"['Calendar'].includes(field.type)\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"date\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Email -->\r\n    <div *ngIf=\"field.type === 'Email'\" class=\"email-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"email\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Numbers -->\r\n          <div *ngIf=\"field.type === 'Numbers'\"  class=\"numbers-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"number\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- TextArea -->\r\n    <div *ngIf=\"field.type === 'TextArea'\" class=\"textarea-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText }}<span *ngIf=\"field.required\" class=\"text-red-500\">*</span></label>\r\n      <textarea [placeholder]=\"field.question || 'Enter text'\" [style.height.px]=\"field.size\" [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\"></textarea>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n    <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" accept=\"image/*\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n          <div *ngIf=\"field.type === 'Book'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"text\" placeholder=\"Enter book title\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n\r\n          <!-- Label -->\r\n          <div *ngIf=\"field.type === 'Label'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" >\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"Label\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n", styles: [".center-frame{position:absolute;top:68px;right:24%;width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.inner-border{box-sizing:border-box;height:39rem;border-radius:10px}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:relative;right:6px;bottom:91px;width:78%;height:46px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{margin-top:0;padding:16px;height:39rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.textbox-container,.CheckBox-options,.dropdown-container,.date-container{margin-bottom:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.email-comtainer{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.email-comtainer input[type=email]{width:95%;padding:10px;font-size:14px;border:none;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.email-comtainer img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.email-comtainer label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\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.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 -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"box\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n    background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n           <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <span class=\"label-text\">{{ field.questionText }}</span>\r\n            <div class=\"checkbox-container\">\r\n              <label class=\"option-label\">\r\n            <!-- Options Section -->\r\n             <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n    <div *ngFor=\"let option of field.options; let i = index\"      class=\"option-item\">\r\n      <!-- Option Input -->\r\n      <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n      <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n      <!-- Remove Button -->\r\n      <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n        <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n      </button>\r\n    </div>\r\n    <!-- Add Option Button -->\r\n    <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n      <span class=\"text-lg\">+</span>\r\n    </button>\r\n            </div>\r\n              </label>\r\n    <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n                <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n    <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n         <!-- Calendar -->\r\n    <div *ngIf=\"['Calendar'].includes(field.type)\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"date\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Email -->\r\n    <div *ngIf=\"field.type === 'Email'\" class=\"email-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"email\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Numbers -->\r\n          <div *ngIf=\"field.type === 'Numbers'\"  class=\"numbers-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"number\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- List -->\r\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- TextArea -->\r\n    <div *ngIf=\"field.type === 'TextArea'\" class=\"textarea-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText }}<span *ngIf=\"field.required\" class=\"text-red-500\">*</span></label>\r\n      <textarea [placeholder]=\"field.question || 'Enter text'\" [style.height.px]=\"field.size\" [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\"></textarea>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n\r\n          <!-- Radio -->\r\n    <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n      <label>{{ field.questionText }}</label>\r\n      <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n        <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n      </div>\r\n      <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n    </div>\r\n\r\n          <!-- Image -->\r\n    <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" accept=\"image/*\" />\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- Button -->\r\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n\r\n          <!-- File -->\r\n    <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"file\" />\r\n      <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n  </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n          <!-- Book -->\r\n          <div *ngIf=\"field.type === 'Book'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"text\" placeholder=\"Enter book title\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n\r\n          <!-- Label -->\r\n          <div *ngIf=\"field.type === 'Label'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" >\r\n            <label>{{ field.questionText }}</label>\r\n            <input type=\"Label\" />\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n", styles: [".center-frame{position:absolute;top:68px;right:24%;width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.inner-border{box-sizing:border-box;height:39rem;border-radius:10px}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:relative;right:6px;bottom:91px;width:78%;height:46px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{margin-top:0;padding:16px;height:39rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.textbox-container,.CheckBox-options,.dropdown-container,.date-container{margin-bottom:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.email-comtainer{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.email-comtainer input[type=email]{width:95%;padding:10px;font-size:14px;border:none;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.email-comtainer img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.email-comtainer label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilderService }], propDecorators: { elementButtonClicked: [{
+                type: Output
+            }], formContainer: [{
+                type: ViewChild,
+                args: ['formContainer']
+            }], bookletJSON: [{
+                type: Input
+            }], bookletId: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvcGFnZXMvYnVpbGRlci9lbGVtZW50L2VsZW1lbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvZWxlbWVudC9lbGVtZW50LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtEQUFrRDtBQUNsRCxPQUFPLEVBQ0wsU0FBUyxFQUVULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQWUsZUFBZSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFdEUsT0FBTyxFQUFFLEVBQUUsSUFBSSxNQUFNLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7OztBQVFwQyxNQUFNLE9BQU8sZ0JBQWdCO0lBUVA7SUFOVixvQkFBb0IsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBQ2hDLGFBQWEsQ0FBYTtJQUM3QyxXQUFXLENBQU07SUFDakIsU0FBUyxDQUFNO0lBRXhCLFlBQVksR0FBVSxFQUFFLENBQUM7SUFDekIsWUFBb0Isa0JBQXNDO1FBQXRDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBb0I7SUFDMUQsQ0FBQztJQUNELFFBQVE7UUFDTiw0Q0FBNEM7UUFDNUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRTtZQUMzRCxJQUFJLENBQUMsWUFBWSxHQUFHLFFBQVEsQ0FBQyxDQUFDLDhDQUE4QztZQUM1RSxPQUFPLENBQUMsR0FBRyxDQUFDLGdCQUFnQixFQUFFLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNuRCxDQUFDLENBQUMsQ0FBQztRQUNILE9B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LENBQUM7Z0JBQ3ZDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLFdBQVcsQ0FBQztZQUN6QyxDQUFDO1FBQ0gsQ0FBQztRQUVELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7d0dBMUlVLGdCQUFnQjs0RkFBaEIsZ0JBQWdCLDhSQ25CN0IsNjJYQXNPQTs7NEZEbk5hLGdCQUFnQjtrQkFONUIsU0FBUzsrQkFDRSxhQUFhO3VGQU9iLG9CQUFvQjtzQkFBN0IsTUFBTTtnQkFDcUIsYUFBYTtzQkFBeEMsU0FBUzt1QkFBQyxlQUFlO2dCQUNqQixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBBUCAyMkpBTjI1IC0gZm9ybSBwcmV2aWV3IGFuZCBBbGwgZm9ybSBlbGVtZW50c1xyXG5pbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBFbGVtZW50UmVmLFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBJbnB1dCxcclxuICBPdXRwdXQsXHJcbiAgVmlld0NoaWxkLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDZGtEcmFnRHJvcCwgbW92ZUl0ZW1JbkFycmF5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2RyYWctZHJvcCc7XHJcbmltcG9ydCB7IEZvcm1CdWlsZGVyU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzL2Zvcm0tYnVpbGRlci5zZXJ2aWNlJztcclxuaW1wb3J0IHsgdjQgYXMgdXVpZHY0IH0gZnJvbSAndXVpZCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1lbGVtZW50JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZWxlbWVudC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZWxlbWVudC5jb21wb25lbnQuY3NzJ10sXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgRWxlbWVudENvbXBvbmVudCB7XHJcblxyXG4gIEBPdXRwdXQoKSBlbGVtZW50QnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xyXG4gIEBWaWV3Q2hpbGQoJ2Zvcm1Db250YWluZXInKSBmb3JtQ29udGFpbmVyOiBFbGVtZW50UmVmO1xyXG4gIEBJbnB1dCgpIGJvb2tsZXRKU09OOiBhbnk7XHJcbiAgQElucHV0KCkgYm9va2xldElkOiBhbnk7XHJcblxyXG4gIGZvcm1FbGVtZW50czogYW55W10gPSBbXTtcclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGZvcm1CdWlsZGVyU2VydmljZTogRm9ybUJ1aWxkZXJTZXJ2aWNlKSB7XHJcbiAgfVxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgLy8gU3Vic2NyaWJlIHRvIHRoZSBmb3JtRWxlbWVudHMkIG9ic2VydmFibGVcclxuICAgIHRoaXMuZm9ybUJ1aWxkZXJTZXJ2aWNlLmZvcm1FbGVtZW50cyQuc3Vic2NyaWJlKChlbGVtZW50cykgPT4ge1xyXG4gICAgICB0aGlzLmZvcm1FbGVtZW50cyA9IGVsZW1lbnRzOyAvLyBVcGRhdGUgdGhlIGxvY2FsIGFycmF5IHdpdGggdGhlIGxhdGVzdCBkYXRhXHJcbiAgICAgIGNvbnNvbGUubG9nKCdGb3JtIEVsZW1lbnRzOicsIHRoaXMuZm9ybUVsZW1lbnRzKTtcclxuICAgIH0pO1xyXG4gICAgY29uc29sZS5sb2coXCJib29rbGV0SlNPTj09XCIrdGhpcy5ib29rbGV0SlNPTik7XHJcbiAgICBpZiAodGhpcy5ib29rbGV0SlNPTikge1xyXG4gICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnc3RhdHVzJywgKFwiZWRpdFwiKSk7XHJcbiAgICAgIGxvY2FsU3RvcmFnZS5zZXRJdGVtKCd1bmlxdWVfaWQnLCAodGhpcy5ib29rbGV0SWQpKTtcclxuICAgICAgdGhpcy5mb3JtRWxlbWVudHMgPSBbXTtcclxuICAgICAgdGhpcy5ib29rbGV0SlNPTi5ib29rUXVlc3Rpb25zTWFwW3RoaXMuYm9va2xldElkXS5zdWJRdWVzdGlvbnMuZm9yRWFjaChuZXdFbGVtZW50ID0+IHtcclxuICAgICAgICB0aGlzLmZvcm1CdWlsZGVyU2VydmljZS5hZGRFbGVtZW50KG5ld0VsZW1lbnQpO1xyXG4gICAgICAgIHRoaXMuZm9ybUVsZW1lbnRzID0gdGhpcy5mb3JtQnVpbGRlclNlcnZpY2UuZ2V0RWxlbWVudHMoKTtcclxuICAgICAgfSk7XHJcbiAgICB9XHJcbiAgICBlbHNle1xyXG4gICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnc3RhdHVzJywgKFwibmV3XCIpKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGRyb3AoZXZlbnQ6IENka0RyYWdEcm9wPHN0cmluZ1tdPikge1xyXG4gICAgbW92ZUl0ZW1JbkFycmF5KHRoaXMuZm9ybUVsZW1lbnRzLCBldmVudC5wcmV2aW91c0luZGV4LCBldmVudC5jdXJyZW50SW5kZXgpO1xyXG4gIH1cclxuXHJcblxyXG4gIC8vIEFkZCB0aGlzIG1ldGhvZCB0byBoYW5kbGUgZWxlbWVudCBzZWxlY3Rpb25cclxuICBzZWxlY3RFbGVtZW50KGluZGV4OiBudW1iZXIpIHtcclxuICAgIHRoaXMuZm9ybUJ1aWxkZXJTZXJ2aWNlLnNldFNlbGVjdGVkRWxlbWVudChpbmRleCk7XHJcbiAgICBjb25zdCBlbGVtZW50ID0gdGhpcy5mb3JtRWxlbWVudHNbaW5kZXhdO1xyXG4gICAgdGhpcy5lbGVtZW50QnV0dG9uQ2xpY2tlZC5lbWl0KGVsZW1lbnQudHlwZSk7IC8vIEVtaXQgdGhlIHR5cGUgd2hlbiBzZWxlY3RpbmdcclxuICB9XHJcblxyXG4gIGFkZEVsZW1lbnQodHlwZTogc3RyaW5nKTogdm9pZCB7XHJcbiAgIGNvbnN0IHVuaXF1ZV9pZCA9IHV1aWR2NCgpO1xyXG4gICAgY29uc3QgbmV3RWxlbWVudCA9IHtcclxuICAgICAgaWQ6IHVuaXF1ZV9pZCxcclxuICAgICAgdWlkOiB1bmlxdWVfaWQsXHJcbiAgICAgIG5hbWU6ICcnLFxyXG4gICAgICB0eXBlLFxyXG4gICAgICBxdWVzdGlvblRleHQ6ICcnLFxyXG4gICAgICBxdWVzdGlvbjogJycsXHJcbiAgICAgIGhlbHBUZXh0OiAnJyxcclxuICAgICAgZXJyb3JNZXNzYWdlOiAnJyxcclxuICAgICAgaXNSZWFkT25seTogZmFsc2UsXHJcbiAgICAgIGlzSGlkZGVuOiBmYWxzZSxcclxuICAgICAgcmVxdWlyZWQ6IGZhbHNlLFxyXG4gICAgICBzdWJUZXh0OiAnJyxcclxuICAgICAgcmVmZXJlbmNlRmllbGQ6ICcnLFxyXG4gICAgICBhZGRpdGlvbmFsUmljaENvbnRlbnQ6ICcnLFxyXG4gICAgICBncm91cE5hbWU6ICcnLFxyXG4gICAgICBpc0RhdGVCYWNrd2FyZDogZmFsc2UsXHJcbiAgICAgIHRpdGxlOiAnJyxcclxuICAgICAgc3ViVGl0bGU6ICcnLFxyXG4gICAgICBpc0RhdGVGb3J3YXJkOiBmYWxzZSxcclxuICAgICAgaXNPcHRpb25hbDogZmFsc2UsXHJcbiAgICAgIGlzVGl0bGU6IGZhbHNlLFxyXG4gICAgICBuZXh0UXVlc3Rpb246ICcnLFxyXG4gICAgICBhbGxvd2VkRmlsZUV4dGVuc2lvbnM6ICcnLFxyXG4gICAgICBxdWVzdGlvbk51bWJlcjogdGhpcy5mb3JtQnVpbGRlclNlcnZpY2UuZ2V0RWxlbWVudHMoKS5sZW5ndGggKyAxLFxyXG4gICAgICBxdWVzdGlvbkJvb2tJZDogJycsXHJcbiAgICAgIHBhcmVudFF1ZXN0aW9uOiAnJyxcclxuICAgICAgZmllbGRzTWV0YTogJycsXHJcbiAgICAgIHJlY29yZFR5cGVOYW1lOiAnJyxcclxuICAgICAgcmVjb3JkVHlwZUlkOiAnJyxcclxuICAgICAgdHJhY2tpbmdJZDogJycsXHJcbiAgICAgIGRhdGVUZXh0OiAnJyxcclxuICAgICAgdGltZVRleHQ6ICcnLFxyXG4gICAgICByZWNvcmRJZDogJycsXHJcbiAgICAgIHFiUmVmZXJlbmNlOiAnJyxcclxuICAgICAgcWJSZWZlcmVuY2VRdWVzdGlvbnM6ICcnLFxyXG4gICAgICBxdWVzdGlvbkJvb2tTdWJUaXRsZTogJycsXHJcbiAgICAgIHN0eWxlOiAnJyxcclxuICAgICAgb3B0aW9uczogdHlwZSA9PT0gJ0NoZWNrQm94JyB8fCB0eXBlID09PSAnUmFkaW8nIHx8IHR5cGUgPT09ICdEcm9wZG93bicgPyBbXHJcbiAgICAgICAgeyBsYWJlbDogJ09wdGlvbiAxJywgdmFsdWU6ICcnLCB0eXBlOiAndGV4dCcsIGtleTogJ29wdGlvbjEnIH0sXHJcbiAgICAgICAgeyBsYWJlbDogJ09wdGlvbiAyJywgdmFsdWU6ICcnLCB0eXBlOiAndGV4dCcsIGtleTogJ29wdGlvbjInIH1cclxuICAgICAgXSA6IG51bGwsXHJcblxyXG4gICAgfTtcclxuICAgIHRoaXMuZm9ybUJ1aWxkZXJTZXJ2aWNlLmFkZEVsZW1lbnQobmV3RWxlbWVudCk7XHJcbiAgICB0aGlzLmZvcm1FbGVtZW50cyA9IHRoaXMuZm9ybUJ1aWxkZXJTZXJ2aWNlLmdldEVsZW1lbnRzKCk7XHJcbiAgfVxyXG5cclxuICBhZGRPcHRpb24ob3B0aW9uczogQXJyYXk8eyBsYWJlbDogc3RyaW5nOyB2YWx1ZTogc3RyaW5nIH0+KSB7XHJcbiAgICBvcHRpb25zLnB1c2goeyBsYWJlbDogYE9wdGlvbiAke29wdGlvbnMubGVuZ3RoICsgMX1gLCB2YWx1ZTogJycgfSk7XHJcbiAgfVxyXG5cclxuICByZW1vdmVPcHRpb24ob3B0aW9uczogQXJyYXk8eyBsYWJlbDogc3RyaW5nOyB2YWx1ZTogc3RyaW5nIH0+LCBpbmRleDogbnVtYmVyKSB7XHJcbiAgICBvcHRpb25zLnNwbGljZShpbmRleCwxKTtcclxuICB9XHJcblxyXG4gIC8vIFJlbW92ZSBhbiBlbGVtZW50IGJ5IGluZGV4XHJcbiAgcmVtb3ZlRWxlbWVudChmaWVsZDogYW55LGluZGV4OiBudW1iZXIpOiB2b2lkIHtcclxuICAgIGNvbnNvbGUubG9nKCdyZW1vdmUnLCBpbmRleCk7XHJcbiAgICB0aGlzLmZvcm1CdWlsZGVyU2VydmljZS5yZW1vdmVFbGVtZW50Q29tcG9uZW50KGZpZWxkLnVpZCk7XHJcbiAgICB0aGlzLmZvcm1FbGVtZW50cz10aGlzLmZvcm1CdWlsZGVyU2VydmljZS5nZXRFbGVtZW50cygpO1xyXG4gIH1cclxuXHJcblxyXG4gIGdldEZvbnRTdHlsZXMoZmllbGQ6IGFueSk6IGFueSB7XHJcbiAgICBjb25zdCBzdHlsZXMgPSB7XHJcbiAgICAgICdmb250LWZhbWlseSc6IGZpZWxkLmZvbnQgfHwgJ0hlbHZldGljYSBOZXVlJyxcclxuICAgICAgJ2ZvbnQtd2VpZ2h0JzogZmllbGQuZm9udFdlaWdodCB8fCAnNDAwJyxcclxuICAgICAgJ3dpZHRoJzogYCR7ZmllbGQud2lkdGggfHwgOTgwfXB4YCxcclxuICAgICAgJ2hlaWdodCc6IGAke2ZpZWxkLmhlaWdodCB8fCA5MX1weGAsXHJcbiAgICAgICd0ZXh0LWFsaWduJzogZmllbGQudGV4dEFsaWduIHx8ICdsZWZ0J1xyXG4gICAgfTtcclxuXHJcbiAgICAvLyBIYW5kbGUgYXJyYXkgb2Ygc3R5bGUgY2xhc3Nlc1xyXG4gICAgaWYgKGZpZWxkLnN0eWxlcyAmJiBBcnJheS5pc0FycmF5KGZpZWxkLnN0eWxlcykpIHtcclxuICAgICAgaWYgKGZpZWxkLnN0eWxlcy5pbmNsdWRlcygnYm9sZCcpKSB7XHJcbiAgICAgICAgc3R5bGVzWydmb250LXdlaWdodCddID0gJzcwMCc7XHJcbiAgICAgIH1cclxuICAgICAgaWYgKGZpZWxkLnN0eWxlcy5pbmNsdWRlcygnaXRhbGljJykpIHtcclxuICAgICAgICBzdHlsZXNbJ2ZvbnQtc3R5bGUnXSA9ICdpdGFsaWMnO1xyXG4gICAgICB9XHJcbiAgICAgIGlmIChmaWVsZC5zdHlsZXMuaW5jbHVkZXMoJ3VuZGVybGluZScpKSB7XHJcbiAgICAgICAgc3R5bGVzWyd0ZXh0LWRlY29yYXRpb24nXSA9ICd1bmRlcmxpbmUnO1xyXG4gICAgICB9XHJcbiAgICAgIGlmIChmaWVsZC5zdHlsZXMuaW5jbHVkZXMoJ2NhcGl0YWxpemUnKSkge1xyXG4gICAgICAgIHN0eWxlc1sndGV4dC10cmFuc2Zvcm0nXSA9ICdjYXBpdGFsaXplJztcclxuICAgICAgfVxyXG4gICAgICBpZiAoZmllbGQuc3R5bGVzLmluY2x1ZGVzKCdsb3dlcmNhc2UnKSkge1xyXG4gICAgICAgIHN0eWxlc1sndGV4dC10cmFuc2Zvcm0nXSA9ICdsb3dlcmNhc2UnO1xyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcmV0dXJuIHN0eWxlcztcclxuICB9XHJcblxyXG4gIH1cclxuXHJcblxyXG4iLCI8IS0tIEFQIDIySkFOMjUgLSBmb3JtIHByZXZpZXcgYW5kIEFsbCBmb3JtIGVsZW1lbnRzIC0tPlxyXG48ZGl2IGNsYXNzPVwiY2VudGVyLWZyYW1lXCI+XHJcbiAgPGxpbmsgaHJlZj1cImh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzP2ZhbWlseT1Sb2JvdG86MzAwLDQwMCw1MDAmZGlzcGxheT1zd2FwXCIgcmVsPVwic3R5bGVzaGVldFwiPlxyXG4gIDxkaXYgY2xhc3M9XCJib3hcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cImZvcm0tcHJldmlld1wiIGNka0Ryb3BMaXN0IFtjZGtEcm9wTGlzdERhdGFdPVwiZm9ybUVsZW1lbnRzXCIgKGNka0Ryb3BMaXN0RHJvcHBlZCk9XCJkcm9wKCRldmVudClcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBmaWVsZCBvZiBmb3JtRWxlbWVudHM7IGxldCBpID0gaW5kZXhcIiBnZXRQcm9wZXJ0aWVzKCkuZWxlbWVudFByb3BzPlxyXG5cclxuICAgICAgICAgIDwhLS0gVGV4dEJveCAtLT5cclxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnVGV4dCdcIiBjbGFzcz1cIlwiIHN0eWxlPVwicGFkZGluZzogMTBweDtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHdoaXRlc21va2U7XCIgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiIGNka0RyYWc+XHJcbiAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXhcIiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7XCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJhbGwtZG90c1wiPjxkaXYgKm5nRm9yPVwibGV0IF8gb2YgWzEsMiwzLDQsNSw2LDcsOF1cIj48L2Rpdj48L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBzdHlsZT1cIndpZHRoOiA5NyU7XCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGxhYi1jb25hdGluZXJcIj5cclxuICAgICAgICAgICAgPGxhYmVsIFtjbGFzcy5yZXF1aXJlZF09XCJmaWVsZC5yZXF1aXJlZFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCA/IGZpZWxkLnF1ZXN0aW9uVGV4dCA6ICdsYWJsZScgfX08L2xhYmVsPlxyXG4gICAgICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiAvPlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFtwbGFjZWhvbGRlcl09XCJmaWVsZC5xdWVzdGlvbiB8fCAnRW50ZXIgdGV4dCdcIiBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIiBbKG5nTW9kZWwpXT1cImZpZWxkLnRleHRcIiAvPlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgICA8IS0tIENoZWNrQm94IC0tPlxyXG4gICAgICAgICAgIDxkaXYgY2xhc3M9XCJDaGVja0JveC1vcHRpb25zXCIgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnQ2hlY2tCb3gnXCIgY2RrRHJhZyAoY2xpY2spPVwic2VsZWN0RWxlbWVudChpKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwibGFiZWwtdGV4dFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fTwvc3Bhbj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNoZWNrYm94LWNvbnRhaW5lclwiPlxyXG4gICAgICAgICAgICAgIDxsYWJlbCBjbGFzcz1cIm9wdGlvbi1sYWJlbFwiPlxyXG4gICAgICAgICAgICA8IS0tIE9wdGlvbnMgU2VjdGlvbiAtLT5cclxuICAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJmaWVsZC5vcHRpb25zPy5sZW5ndGggPiAwXCIgY2xhc3M9XCJvcHRpb25zLWNvbnRhaW5lclwiPlxyXG4gICAgPGRpdiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGZpZWxkLm9wdGlvbnM7IGxldCBpID0gaW5kZXhcIiAgICAgIGNsYXNzPVwib3B0aW9uLWl0ZW1cIj5cclxuICAgICAgPCEtLSBPcHRpb24gSW5wdXQgLS0+XHJcbiAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFsobmdNb2RlbCldPVwib3B0aW9uLmxhYmVsXCIgcGxhY2Vob2xkZXI9XCJMYWJlbFwiIGNsYXNzPVwib3B0aW9uLWxhYmVsXCIvPlxyXG4gICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBbKG5nTW9kZWwpXT1cIm9wdGlvbi52YWx1ZVwiIHBsYWNlaG9sZGVyPVwiVmFsdWVcImNsYXNzPVwib3B0aW9uLXZhbHVlXCIvPlxyXG4gICAgICA8IS0tIFJlbW92ZSBCdXR0b24gLS0+XHJcbiAgICAgIDxidXR0b24gY2xhc3M9XCJyZW1vdmUtb3B0aW9uLWJ0blwiIChjbGljayk9XCJyZW1vdmVPcHRpb24oZmllbGQub3B0aW9ucywgaSlcIj5cclxuICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiBhbHQ9XCJSZW1vdmUgT3B0aW9uXCIgLz5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICAgIDwhLS0gQWRkIE9wdGlvbiBCdXR0b24gLS0+XHJcbiAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImFkZC1vcHRpb24tYnRuXCIgKGNsaWNrKT1cImFkZE9wdGlvbihmaWVsZC5vcHRpb25zKVwiPlxyXG4gICAgICA8c3BhbiBjbGFzcz1cInRleHQtbGdcIj4rPC9zcGFuPlxyXG4gICAgPC9idXR0b24+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgIDwvbGFiZWw+XHJcbiAgICA8YnV0dG9uIGNsYXNzPVwidHJhc2gtcmlnaHRcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIj5cclxuICAgICAgICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIGFsdD1cIkRlbGV0ZVwiIC8+XHJcbiAgICAgICAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgPCEtLSBEcm9wZG93biAtLT5cclxuICAgIDxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnRHJvcGRvd24nXCIgY2xhc3M9XCJkcm9wZG93bi1jb250YWluZXJcIiBjZGtEcmFnIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIj5cclxuICAgICAgICAgICAgPGxhYmVsPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fTwvbGFiZWw+XHJcbiAgICAgIDxzZWxlY3QgY2xhc3M9XCJkcm9wZG93bi1vcHRpb25zXCI+PG9wdGlvbiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGZpZWxkLm9wdGlvbnNcIiA+e3sgb3B0aW9uIH19PC9vcHRpb24+PC9zZWxlY3Q+XHJcbiAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIC8+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgIDwhLS0gQ2FsZW5kYXIgLS0+XHJcbiAgICA8ZGl2ICpuZ0lmPVwiWydDYWxlbmRhciddLmluY2x1ZGVzKGZpZWxkLnR5cGUpXCIgY2xhc3M9XCJjYWxlbmRlci1jb250YWluZXJcIiBjZGtEcmFnIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIj5cclxuICAgICAgICAgICAgPGxhYmVsPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fTwvbGFiZWw+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiZGF0ZVwiIC8+XHJcbiAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIC8+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgICA8IS0tIEVtYWlsIC0tPlxyXG4gICAgPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdFbWFpbCdcIiBjbGFzcz1cImVtYWlsLWNvbnRhaW5lclwiIGNka0RyYWcgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiPlxyXG4gICAgICAgICAgICA8bGFiZWw+e3sgZmllbGQucXVlc3Rpb25UZXh0IH19PC9sYWJlbD5cclxuICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJlbWFpbFwiIFtwbGFjZWhvbGRlcl09XCJmaWVsZC5xdWVzdGlvbiB8fCAnRW50ZXIgdGV4dCdcIiBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIiAvPlxyXG4gICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiAvPlxyXG4gICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgPCEtLSBOdW1iZXJzIC0tPlxyXG4gICAgICAgICAgPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdOdW1iZXJzJ1wiICBjbGFzcz1cIm51bWJlcnMtY29udGFpbmVyXCIgY2RrRHJhZyAoY2xpY2spPVwic2VsZWN0RWxlbWVudChpKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCI+XHJcbiAgICAgICAgICAgIDxsYWJlbD57eyBmaWVsZC5xdWVzdGlvblRleHQgfX08L2xhYmVsPlxyXG4gICAgICAgICAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiIFtwbGFjZWhvbGRlcl09XCJmaWVsZC5xdWVzdGlvbiB8fCAnRW50ZXIgdGV4dCdcIiBbcmVhZG9ubHldPVwiZmllbGQuaXNSZWFkT25seVwiIFtjbGFzcy5oaWRkZW5dPVwiZmllbGQuaXNIaWRkZW5cIiAvPlxyXG4gICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiAvPlxyXG4gICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgPCEtLSBMaXN0IC0tPlxyXG4gICAgPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdMaXN0J1wiIGNsYXNzPVwibGlzdC1jb250YWluZXJcIiBjZGtEcmFnIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIj5cclxuICAgICAgICAgICAgPGxhYmVsPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fTwvbGFiZWw+XHJcbiAgICAgIDx1bD48bGkgKm5nRm9yPVwibGV0IGl0ZW0gb2YgZmllbGQuaXRlbXNcIj57eyBpdGVtIH19PC9saT48L3VsPlxyXG4gICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiAvPlxyXG4gICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgPCEtLSBUZXh0QXJlYSAtLT5cclxuICAgIDxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnVGV4dEFyZWEnXCIgY2xhc3M9XCJ0ZXh0YXJlYS1jb250YWluZXJcIiBjZGtEcmFnIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIj5cclxuICAgICAgICAgICAgPGxhYmVsIFtjbGFzcy5yZXF1aXJlZF09XCJmaWVsZC5yZXF1aXJlZFwiPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fTxzcGFuICpuZ0lmPVwiZmllbGQucmVxdWlyZWRcIiBjbGFzcz1cInRleHQtcmVkLTUwMFwiPio8L3NwYW4+PC9sYWJlbD5cclxuICAgICAgPHRleHRhcmVhIFtwbGFjZWhvbGRlcl09XCJmaWVsZC5xdWVzdGlvbiB8fCAnRW50ZXIgdGV4dCdcIiBbc3R5bGUuaGVpZ2h0LnB4XT1cImZpZWxkLnNpemVcIiBbcmVhZG9ubHldPVwiZmllbGQucmVhZE9ubHlcIiBbY2xhc3MuaGlkZGVuXT1cImZpZWxkLmlzSGlkZVwiPjwvdGV4dGFyZWE+XHJcbiAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIC8+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuXHJcblxyXG4gICAgICAgICAgPCEtLSBSYWRpbyAtLT5cclxuICAgIDxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnUmFkaW8nXCIgY2xhc3M9XCJSYWRpby1vcHRpb25zXCIgY2RrRHJhZyAoY2xpY2spPVwic2VsZWN0RWxlbWVudChpKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCI+XHJcbiAgICAgIDxsYWJlbD57eyBmaWVsZC5xdWVzdGlvblRleHQgfX08L2xhYmVsPlxyXG4gICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZmllbGQub3B0aW9uc1wiIGNsYXNzPVwicmFkaW8taXRlbVwiPlxyXG4gICAgICAgIDxsYWJlbD48aW5wdXQgdHlwZT1cInJhZGlvXCIgbmFtZT1cInt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fVwiIC8+PHNwYW4+e3sgb3B0aW9uIH19PC9zcGFuPjwvbGFiZWw+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICA8YnV0dG9uIGNsYXNzPVwiZGVsZXRlLWJ0bjJcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIj48aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiBhbHQ9XCJEZWxldGVcIiAvPjwvYnV0dG9uPlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgPCEtLSBJbWFnZSAtLT5cclxuICAgIDxkaXYgKm5nSWY9XCJmaWVsZC50eXBlID09PSAnSW1hZ2UnXCIgY2xhc3M9XCJpbWFnZS1jb250YWluZXJcIiBjZGtEcmFnIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIj5cclxuICAgICAgICAgICAgPGxhYmVsPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fTwvbGFiZWw+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiZmlsZVwiIGFjY2VwdD1cImltYWdlLypcIiAvPlxyXG4gICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UcmFzaC5zdmdcIiAoY2xpY2spPVwicmVtb3ZlRWxlbWVudChmaWVsZCwgaSlcIiAvPlxyXG4gICAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgICAgPCEtLSBCdXR0b24gLS0+XHJcbiAgICA8ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ0J1dHRvbidcIiAgY2xhc3M9XCJidXR0b24tY29udGFpbmVyXCIgY2RrRHJhZyAoY2xpY2spPVwic2VsZWN0RWxlbWVudChpKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCI+XHJcbiAgICAgICAgICAgIDxidXR0b24+e3sgZmllbGQucXVlc3Rpb25UZXh0IH19PC9idXR0b24+XHJcbiAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIC8+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgICA8IS0tIEZpbGUgLS0+XHJcbiAgICA8ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ0ZpbGUnXCIgY2xhc3M9XCJmaWxlLWZpZWxkLWNvbnRhaW5lclwiIGNka0RyYWcgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiIFtuZ1N0eWxlXT1cImdldEZvbnRTdHlsZXMoZmllbGQpXCI+XHJcbiAgICAgICAgICAgIDxsYWJlbD57eyBmaWVsZC5xdWVzdGlvblRleHQgfX08L2xhYmVsPlxyXG4gICAgICAgICAgICA8aW5wdXQgdHlwZT1cImZpbGVcIiAvPlxyXG4gICAgICA8aW1nIGNsYXNzPVwidHJhc2gtcmlnaHRcIiBzcmM9XCIuLi9hc3NldHMvaWNvbnMvVHJhc2guc3ZnXCIgKGNsaWNrKT1cInJlbW92ZUVsZW1lbnQoZmllbGQsIGkpXCIgLz5cclxuICA8L2Rpdj5cclxuXHJcbjwhLS0gVGFibGVzIC0tPlxyXG48ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ1RhYmxlcydcIiBjbGFzcz1cInRhYmxlLWNvbnRhaW5lclwiIGNka0RyYWcgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiBbbmdTdHlsZV09XCJnZXRGb250U3R5bGVzKGZpZWxkKVwiPlxyXG4gIDxsYWJlbD57eyBmaWVsZC5xdWVzdGlvblRleHQgfX08L2xhYmVsPlxyXG4gIDx0YWJsZSBbc3R5bGUud2lkdGgucHhdPVwiZmllbGQuY29sV2lkdGhcIiBbc3R5bGUuaGVpZ2h0LiVdPVwiZmllbGQucm93SGVpZ2h0XCI+XHJcbiAgICA8dGhlYWQ+PHRyPjx0aCAqbmdGb3I9XCJsZXQgaGVhZGVyIG9mIGZpZWxkLmhlYWRlcnNcIiBbc3R5bGUud2lkdGgucHhdPVwiZmllbGQuY29sV2lkdGggLyBmaWVsZC5jb2xOb3NcIj57eyBoZWFkZXIgfX08L3RoPjwvdHI+PC90aGVhZD5cclxuICAgIDx0Ym9keT48dHIgKm5nRm9yPVwibGV0IHJvdyBvZiBmaWVsZC5yb3dzXCI+PHRkICpuZ0Zvcj1cImxldCBjZWxsIG9mIHJvd1wiPnt7IGNlbGwgfX08L3RkPjwvdHI+PC90Ym9keT5cclxuICA8L3RhYmxlPlxyXG4gIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLCBpKVwiIC8+XHJcbjwvZGl2PlxyXG5cclxuXHJcbiAgICAgICAgICA8IS0tIEJvb2sgLS0+XHJcbiAgICAgICAgICA8ZGl2ICpuZ0lmPVwiZmllbGQudHlwZSA9PT0gJ0Jvb2snXCIgY2xhc3M9XCJjYWxlbmRlci1jb250YWluZXJcIiBjZGtEcmFnIChjbGljayk9XCJzZWxlY3RFbGVtZW50KGkpXCIgW25nU3R5bGVdPVwiZ2V0Rm9udFN0eWxlcyhmaWVsZClcIj5cclxuICAgICAgICAgICAgPGxhYmVsPnt7IGZpZWxkLnF1ZXN0aW9uVGV4dCB9fTwvbGFiZWw+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgYm9vayB0aXRsZVwiIC8+XHJcbiAgICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RyYXNoLnN2Z1wiIChjbGljayk9XCJyZW1vdmVFbGVtZW50KGZpZWxkLGkpXCI+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgICA8IS0tIExhYmVsIC0tPlxyXG4gICAgICAgICAgPGRpdiAqbmdJZj1cImZpZWxkLnR5cGUgPT09ICdMYWJlbCdcIiBjbGFzcz1cImNhbGVuZGVyLWNvbnRhaW5lclwiIGNka0RyYWcgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoaSlcIiA+XHJcbiAgICAgICAgICAgIDxsYWJlbD57eyBmaWVsZC5xdWVzdGlvblRleHQgfX08L2xhYmVsPlxyXG4gICAgICAgICAgICA8aW5wdXQgdHlwZT1cIkxhYmVsXCIgLz5cclxuICAgICAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvVHJhc2guc3ZnXCIgKGNsaWNrKT1cInJlbW92ZUVsZW1lbnQoZmllbGQsaSlcIj5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDwhLS0gRm9ybSBCdWlsZGVyIFNlY3Rpb24gQWxsIEVsZW1lbnRzIC0tPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1idWlsZGVyXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImVsZW1lbnRcIiAoY2xpY2spPVwiYWRkRWxlbWVudCgnQ2FsZW5kYXInKVwiPlxyXG4gICAgICAgICAgPGltZyBjbGFzcz1cImNhbGVuZGFyLWltZ1wiIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9DYWxlbmRhci5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPkNhbGVuZGFyPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJlbGVtZW50XCIgKGNsaWNrKT1cImFkZEVsZW1lbnQoJ0NoZWNrQm94JylcIj5cclxuICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL0NoZWNrQm94LnN2Z1wiPlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImhvdmVyLWxhYmVsXCI+Q2hlY2sgQm94PC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJlbGVtZW50XCIgKGNsaWNrKT1cImFkZEVsZW1lbnQoJ0VtYWlsJylcIj5cclxuICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL0VtYWlsLnN2Z1wiPlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImhvdmVyLWxhYmVsXCI+RW1haWw8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImVsZW1lbnRcIiAoY2xpY2spPVwiYWRkRWxlbWVudCgnRmlsZScpXCI+XHJcbiAgICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9GaWxlLnN2Z1wiPlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImhvdmVyLWxhYmVsXCI+RmlsZTwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWxlbWVudFwiIChjbGljayk9XCJhZGRFbGVtZW50KCdMaXN0JylcIj5cclxuICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL0xpc3Quc3ZnXCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaG92ZXItbGFiZWxcIj5MaXN0PC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJlbGVtZW50XCIgKGNsaWNrKT1cImFkZEVsZW1lbnQoJ1RhYmxlcycpXCI+XHJcbiAgICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UYWJsZS5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPlRhYmxlczwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWxlbWVudFwiIChjbGljayk9XCJhZGRFbGVtZW50KCdUZXh0JylcIj5cclxuICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL1RleHQuc3ZnXCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaG92ZXItbGFiZWxcIj5UZXh0IEJveDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWxlbWVudFwiIChjbGljayk9XCJhZGRFbGVtZW50KCdUZXh0QXJlYScpXCI+XHJcbiAgICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9UZXh0QXJlYS5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPlRleHQgQXJlYTwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWxlbWVudFwiIChjbGljayk9XCJhZGRFbGVtZW50KCdOdW1iZXJzJylcIj5cclxuICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL051bWJlci5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPk51bWJlcnM8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImVsZW1lbnRcIiAoY2xpY2spPVwiYWRkRWxlbWVudCgnRHJvcGRvd24nKVwiPlxyXG4gICAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvRHJvcC5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPkRyb3Bkb3duPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJlbGVtZW50XCIgKGNsaWNrKT1cImFkZEVsZW1lbnQoJ0ltYWdlJylcIj5cclxuICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL0ltYWdlLnN2Z1wiPlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImhvdmVyLWxhYmVsXCI+SW1hZ2U8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImVsZW1lbnRcIiAoY2xpY2spPVwiYWRkRWxlbWVudCgnUmFkaW8nKVwiPlxyXG4gICAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvUmFkaW8uc3ZnXCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaG92ZXItbGFiZWxcIj5SYWRpbzwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWxlbWVudFwiIChjbGljayk9XCJhZGRFbGVtZW50KCdMYWJlbCcpXCI+XHJcbiAgICAgICAgICA8aW1nIHNyYz1cIi4uL2Fzc2V0cy9pY29ucy9MYWJlbC5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPkxhYmVsPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJlbGVtZW50XCIgKGNsaWNrKT1cImFkZEVsZW1lbnQoJ0Jvb2snKVwiPlxyXG4gICAgICAgICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvQm9vay5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPkJvb2s8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImVsZW1lbnRcIiAoY2xpY2spPVwiYWRkRWxlbWVudCgnQnV0dG9uJylcIj5cclxuICAgICAgICAgIDxpbWcgc3JjPVwiLi4vYXNzZXRzL2ljb25zL0J1dHRvbi5zdmdcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3Zlci1sYWJlbFwiPkJ1dHRvbjwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG5cclxuIl19

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  -->\r\n<!-- menu.component.html -->\r\n<div class=\"top-bar\">\r\n    <button class=\"button share-button\">Share</button>\r\n    <button class=\"button publish-button\">Publish</button>\r\n</div>\r\n<div class=\"menu-sidebar\">\r\n  <!-- Logo Section -->\r\n  <div class=\"menu-logo\">\r\n    <img src=\"../assets/Nxt.png\">\r\n  </div>\r\n\r\n  <!-- Menu Items -->\r\n  <ul class=\"menu-list\">\r\n    <li\r\n      *ngFor=\"let item of menuItems; let i = index\"\r\n      class=\"menu-item\"\r\n      [class.active]=\"activeIndex === i\"\r\n      (click)=\"setActiveMenu(i)\"\r\n      [attr.aria-label]=\"item.label\"\r\n    >\r\n      <!-- Dynamic Icon -->\r\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Profile Section -->\r\n  <div class=\"menu-profile\">\r\n    <img src=\"../assets/icons/ProfileImage.svg\" />\r\n  </div>\r\n</div>\r\n\r\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  -->\r\n<!-- menu.component.html -->\r\n<div class=\"top-bar\">\r\n    <button class=\"button share-button\">Share</button>\r\n    <button class=\"button publish-button\">Publish</button>\r\n</div>\r\n<div class=\"menu-sidebar\">\r\n  <!-- Logo Section -->\r\n  <div class=\"menu-logo\">\r\n    <img src=\"../assets/Nxt.png\">\r\n  </div>\r\n\r\n  <!-- Menu Items -->\r\n  <ul class=\"menu-list\">\r\n    <li\r\n      *ngFor=\"let item of menuItems; let i = index\"\r\n      class=\"menu-item\"\r\n      [class.active]=\"activeIndex === i\"\r\n      (click)=\"setActiveMenu(i)\"\r\n      [attr.aria-label]=\"item.label\"\r\n    >\r\n      <!-- Dynamic Icon -->\r\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Profile Section -->\r\n  <div class=\"menu-profile\">\r\n    <img src=\"../assets/icons/ProfileImage.svg\" />\r\n  </div>\r\n</div>\r\n\r\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvcGFnZXMvYnVpbGRlci9tZW51L21lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvbWVudS9tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGFBQWE7QUFDYixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPMUMsTUFBTSxPQUFPLGFBQWE7SUFDeEIsV0FBVyxHQUFXLENBQUMsQ0FBQztJQUV4QixTQUFTLEdBQUc7UUFDVixFQUFFLElBQUksRUFBRSw2QkFBNkIsRUFBRTtRQUN2QyxFQUFFLElBQUksRUFBRSxpQ0FBaUMsRUFBRTtRQUMzQyxFQUFFLElBQUksRUFBRSw4QkFBOEIsRUFBRTtRQUN4QyxFQUFFLElBQUksRUFBRSw4QkFBOEIsRUFBRTtRQUN4QyxFQUFFLElBQUksRUFBRSw2QkFBNkIsRUFBRTtRQUN2QyxFQUFFLElBQUksRUFBRSw4QkFBOEIsRUFBRTtRQUN4QyxFQUFFLElBQUksRUFBRSx5QkFBeUIsRUFBRTtRQUNuQyxFQUFFLElBQUksRUFBRSw2QkFBNkIsRUFBRTtRQUN2QywrQ0FBK0M7S0FDaEQsQ0FBQztJQUVGLGFBQWEsQ0FBQyxLQUFhO1FBQ3pCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO0lBQzNCLENBQUM7d0dBakJVLGFBQWE7NEZBQWIsYUFBYSxnRENSMUIsODdCQWdDQTs7NEZEeEJhLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0UsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbIi8vIEFQIDIySkFOMjVcclxuaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1tZW51JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbWVudS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbWVudS5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIE1lbnVDb21wb25lbnQge1xyXG4gIGFjdGl2ZUluZGV4OiBudW1iZXIgPSAwO1xyXG5cclxuICBtZW51SXRlbXMgPSBbXHJcbiAgICB7IGljb246ICcuLi9hc3NldHMvaWNvbnMvUmVsYXRlZC5zdmcnIH0sXHJcbiAgICB7IGljb246ICcuLi9hc3NldHMvaWNvbnMvVGV4dENvbHVtbnMuc3ZnJyB9LFxyXG4gICAgeyBpY29uOiAnLi4vYXNzZXRzL2ljb25zL01vbm90b25lLnN2ZycgfSxcclxuICAgIHsgaWNvbjogJy4uL2Fzc2V0cy9pY29ucy9QcmV2aWV3MS5zdmcnIH0sXHJcbiAgICB7IGljb246ICcuLi9hc3NldHMvaWNvbnMvV2Vic2l0ZS5zdmcnIH0sXHJcbiAgICB7IGljb246ICcuLi9hc3NldHMvaWNvbnMvUHJldmlldzIuc3ZnJyB9LFxyXG4gICAgeyBpY29uOiAnLi4vYXNzZXRzL2ljb25zL3BkZi5zdmcnIH0sXHJcbiAgICB7IGljb246ICcuLi9hc3NldHMvaWNvbnMvU2V0dGluZy5zdmcnIH1cclxuICAgIC8vIHsgaWNvbjogJy4uL2Fzc2V0cy9pY29ucy9Qcm9maWxlSW1hZ2Uuc3ZnJyB9XHJcbiAgXTtcclxuXHJcbiAgc2V0QWN0aXZlTWVudShpbmRleDogbnVtYmVyKTogdm9pZCB7XHJcbiAgICB0aGlzLmFjdGl2ZUluZGV4ID0gaW5kZXg7XHJcbiAgfVxyXG59XHJcbiIsIjwhLS0gQVAgMjJKQU4yNSAtIFRvcCBtZW51ICxMZWZ0IHNpZGUgbWVudSAgLS0+XHJcbjwhLS0gbWVudS5jb21wb25lbnQuaHRtbCAtLT5cclxuPGRpdiBjbGFzcz1cInRvcC1iYXJcIj5cclxuICAgIDxidXR0b24gY2xhc3M9XCJidXR0b24gc2hhcmUtYnV0dG9uXCI+U2hhcmU8L2J1dHRvbj5cclxuICAgIDxidXR0b24gY2xhc3M9XCJidXR0b24gcHVibGlzaC1idXR0b25cIj5QdWJsaXNoPC9idXR0b24+XHJcbjwvZGl2PlxyXG48ZGl2IGNsYXNzPVwibWVudS1zaWRlYmFyXCI+XHJcbiAgPCEtLSBMb2dvIFNlY3Rpb24gLS0+XHJcbiAgPGRpdiBjbGFzcz1cIm1lbnUtbG9nb1wiPlxyXG4gICAgPGltZyBzcmM9XCIuLi9hc3NldHMvTnh0LnBuZ1wiPlxyXG4gIDwvZGl2PlxyXG5cclxuICA8IS0tIE1lbnUgSXRlbXMgLS0+XHJcbiAgPHVsIGNsYXNzPVwibWVudS1saXN0XCI+XHJcbiAgICA8bGlcclxuICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgbWVudUl0ZW1zOyBsZXQgaSA9IGluZGV4XCJcclxuICAgICAgY2xhc3M9XCJtZW51LWl0ZW1cIlxyXG4gICAgICBbY2xhc3MuYWN0aXZlXT1cImFjdGl2ZUluZGV4ID09PSBpXCJcclxuICAgICAgKGNsaWNrKT1cInNldEFjdGl2ZU1lbnUoaSlcIlxyXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIml0ZW0ubGFiZWxcIlxyXG4gICAgPlxyXG4gICAgICA8IS0tIER5bmFtaWMgSWNvbiAtLT5cclxuICAgICAgPGltZyBbc3JjXT1cIml0ZW0uaWNvblwiIGFsdD1cIk1lbnUgSWNvblwiIGNsYXNzPVwibWVudS1pY29uXCIgLz5cclxuICAgIDwvbGk+XHJcbiAgPC91bD5cclxuXHJcbiAgPCEtLSBQcm9maWxlIFNlY3Rpb24gLS0+XHJcbiAgPGRpdiBjbGFzcz1cIm1lbnUtcHJvZmlsZVwiPlxyXG4gICAgPGltZyBzcmM9XCIuLi9hc3NldHMvaWNvbnMvUHJvZmlsZUltYWdlLnN2Z1wiIC8+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG5cclxuIl19