@rangertechnologies/ngnxt 2.1.318 → 2.1.319

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/rangertechnologies-ngnxt.mjs +13 -13
  2. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/rangertechnologies-ngnxt-2.1.319.tgz +0 -0
  5. package/rangertechnologies-ngnxt-2.1.318.tgz +0 -0
package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED
@@ -49321,11 +49321,11 @@ class ListViewFilterComponent {
49321
49321
  }
49322
49322
  }
49323
49323
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListViewFilterComponent, deps: [{ token: i6.FormBuilder }, { token: NxtCustomTranslatePipe }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
49324
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableData: "tableData", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", title: "title", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [NxtCustomTranslatePipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\">\n <div class=\"custom-dropdown\">\n <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n <div>\n {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n </div>\n <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n <div *ngIf=\"!view.system\" class=\"actions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header-div\">\n {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW') | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n </div>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <div style=\"display: flex;\">{{'NAME' | nxtCustomTranslate :'Name'}}<div style=\"color: red; padding-left: 3px;\">*</div></div>\n <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n {{ field.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"listview-custom-select\">\n <input\n [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n (input)=\"onOperatorInput($event.target.value, i)\"\n (focus)=\"onFocus('operator', i)\"\n (blur)=\"onBlur('operator', i)\"\n [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n />\n \n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div\n *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n class=\"dropdown-item\"\n (click)=\"selectOption('operator', i, operator.value)\"\n >\n {{ operator.label }}\n </div>\n </div>\n </div> \n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n </div> -->\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"listview-custom-select\">\n <input \n formControlName=\"name\" \n (focus)=\"onFocus('columnName', i)\" \n (blur)=\"onBlur('columnName', i)\" \n (input)=\"onManualInput($event.target.value, i)\"\n [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n {{ colName.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n </div>\n </div>\n <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n </div> \n <div class=\"form-actions\">\n <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
49324
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableData: "tableData", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", title: "title", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [NxtCustomTranslatePipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\" style=\"line-height: 0px;\">\n <div class=\"custom-dropdown\">\n <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n <div style=\"display: flex; align-items: center;\">\n {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n </div>\n <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n <div *ngIf=\"!view.system\" class=\"actions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header-div\">\n {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW') | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n </div>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <div style=\"display: flex;\">{{'NAME' | nxtCustomTranslate :'Name'}}<div style=\"color: red; padding-left: 3px;\">*</div></div>\n <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n {{ field.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"listview-custom-select\">\n <input\n [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n (input)=\"onOperatorInput($event.target.value, i)\"\n (focus)=\"onFocus('operator', i)\"\n (blur)=\"onBlur('operator', i)\"\n [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n />\n \n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div\n *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n class=\"dropdown-item\"\n (click)=\"selectOption('operator', i, operator.value)\"\n >\n {{ operator.label }}\n </div>\n </div>\n </div> \n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n </div> -->\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"listview-custom-select\">\n <input \n formControlName=\"name\" \n (focus)=\"onFocus('columnName', i)\" \n (blur)=\"onBlur('columnName', i)\" \n (input)=\"onManualInput($event.target.value, i)\"\n [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n {{ colName.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n </div>\n </div>\n <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n </div> \n <div class=\"form-actions\">\n <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
49325
49325
  }
49326
49326
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListViewFilterComponent, decorators: [{
49327
49327
  type: Component,
49328
- args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, NxtCustomTranslatePipe, MatTooltipModule], providers: [NxtCustomTranslatePipe], template: "<div class=\"list-view-filter\">\n <div class=\"custom-dropdown\">\n <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n <div>\n {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n </div>\n <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n <div *ngIf=\"!view.system\" class=\"actions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header-div\">\n {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW') | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n </div>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <div style=\"display: flex;\">{{'NAME' | nxtCustomTranslate :'Name'}}<div style=\"color: red; padding-left: 3px;\">*</div></div>\n <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n {{ field.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"listview-custom-select\">\n <input\n [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n (input)=\"onOperatorInput($event.target.value, i)\"\n (focus)=\"onFocus('operator', i)\"\n (blur)=\"onBlur('operator', i)\"\n [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n />\n \n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div\n *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n class=\"dropdown-item\"\n (click)=\"selectOption('operator', i, operator.value)\"\n >\n {{ operator.label }}\n </div>\n </div>\n </div> \n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n </div> -->\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"listview-custom-select\">\n <input \n formControlName=\"name\" \n (focus)=\"onFocus('columnName', i)\" \n (blur)=\"onBlur('columnName', i)\" \n (input)=\"onManualInput($event.target.value, i)\"\n [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n {{ colName.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n </div>\n </div>\n <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n </div> \n <div class=\"form-actions\">\n <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"] }]
49328
+ args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, NxtCustomTranslatePipe, MatTooltipModule], providers: [NxtCustomTranslatePipe], template: "<div class=\"list-view-filter\" style=\"line-height: 0px;\">\n <div class=\"custom-dropdown\">\n <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n <div style=\"display: flex; align-items: center;\">\n {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n </div>\n <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n <div *ngIf=\"!view.system\" class=\"actions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header-div\">\n {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW') | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n </div>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <div style=\"display: flex;\">{{'NAME' | nxtCustomTranslate :'Name'}}<div style=\"color: red; padding-left: 3px;\">*</div></div>\n <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n </div>\n </div>\n <div class=\"form-group\">\n <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n {{ field.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"listview-custom-select\">\n <input\n [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n (input)=\"onOperatorInput($event.target.value, i)\"\n (focus)=\"onFocus('operator', i)\"\n (blur)=\"onBlur('operator', i)\"\n [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n />\n \n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div\n *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n class=\"dropdown-item\"\n (click)=\"selectOption('operator', i, operator.value)\"\n >\n {{ operator.label }}\n </div>\n </div>\n </div> \n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"listview-custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n </div> -->\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"listview-custom-select\">\n <input \n formControlName=\"name\" \n (focus)=\"onFocus('columnName', i)\" \n (blur)=\"onBlur('columnName', i)\" \n (input)=\"onManualInput($event.target.value, i)\"\n [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n {{ colName.label }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n </div>\n </div>\n <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n </div> \n <div class=\"form-actions\">\n <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"] }]
49329
49329
  }], ctorParameters: () => [{ type: i6.FormBuilder }, { type: NxtCustomTranslatePipe }, { type: DataService }], propDecorators: { listViews: [{
49330
49330
  type: Input
49331
49331
  }], tableData: [{
@@ -52825,7 +52825,7 @@ class NxtDatatable {
52825
52825
  this.sortData(this.currentSortColumn, this.currentSortDirection, undefined, from);
52826
52826
  }
52827
52827
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NxtDatatable, deps: [{ token: CountryService }, { token: StorageService }, { token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
52828
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isListViews: "isListViews", id: "id", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons", isButtonLoading: "isButtonLoading", isPreview: "isPreview", groupFilter: "groupFilter", groupFilterConfig: "groupFilterConfig", groupFilterColumn: "groupFilterColumn", onlyView: "onlyView", tableHeight: "tableHeight" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", onSaveData: "onSaveData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableParamsEmit: "NxtTableParamsEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center; padding-bottom: 5px;\" \n [style.padding-bottom]=\" id && (isListViews !== false && isListViews !== 'false') && from !== 'formBuilder' ? '0px' : '5px' \">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <div class=\"right nxt-resize-handle\"></div>\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"nxt-resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n <div class=\"nxt-resize-handle\"></div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: {{ button.backgroundColor }};\">\n <!-- IMAGE ICON (data URL or http/https) -->\n <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n #imgElement\n [src]=\"button.iconSrc\"\n style=\"cursor: pointer;\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n <!-- CSS ICON (fusion-icon-edit etc.) -->\n <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n class=\"fusion-icon nav-icon\"\n [ngClass]=\"button.iconSrc\"\n style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n </i>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <!-- Data Columns -->\n <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n (buttonClickEmit)=\"saveButton(inlineElement)\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView"], outputs: ["searchValueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableData", "tableFilterArray", "selectedView", "displayedColumns", "title", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUpload,
52828
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isListViews: "isListViews", id: "id", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons", isButtonLoading: "isButtonLoading", isPreview: "isPreview", groupFilter: "groupFilter", groupFilterConfig: "groupFilterConfig", groupFilterColumn: "groupFilterColumn", onlyView: "onlyView", tableHeight: "tableHeight" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", onSaveData: "onSaveData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableParamsEmit: "NxtTableParamsEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center; padding-bottom: 3px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <div class=\"right nxt-resize-handle\"></div>\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"nxt-resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n <div class=\"nxt-resize-handle\"></div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: {{ button.backgroundColor }};\">\n <!-- IMAGE ICON (data URL or http/https) -->\n <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n #imgElement\n [src]=\"button.iconSrc\"\n style=\"cursor: pointer;\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n <!-- CSS ICON (fusion-icon-edit etc.) -->\n <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n class=\"fusion-icon nav-icon\"\n [ngClass]=\"button.iconSrc\"\n style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n </i>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <!-- Data Columns -->\n <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n (buttonClickEmit)=\"saveButton(inlineElement)\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView"], outputs: ["searchValueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableData", "tableFilterArray", "selectedView", "displayedColumns", "title", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUpload,
52829
52829
  QuestionByRowPipe]] });
52830
52830
  }
52831
52831
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NxtDatatable, decorators: [{
@@ -52851,7 +52851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
52851
52851
  QuestionByRowPipe,
52852
52852
  NxtDatePipe
52853
52853
  // RowResizerDirective
52854
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center; padding-bottom: 5px;\" \n [style.padding-bottom]=\" id && (isListViews !== false && isListViews !== 'false') && from !== 'formBuilder' ? '0px' : '5px' \">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <div class=\"right nxt-resize-handle\"></div>\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"nxt-resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n <div class=\"nxt-resize-handle\"></div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: {{ button.backgroundColor }};\">\n <!-- IMAGE ICON (data URL or http/https) -->\n <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n #imgElement\n [src]=\"button.iconSrc\"\n style=\"cursor: pointer;\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n <!-- CSS ICON (fusion-icon-edit etc.) -->\n <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n class=\"fusion-icon nav-icon\"\n [ngClass]=\"button.iconSrc\"\n style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n </i>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <!-- Data Columns -->\n <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n (buttonClickEmit)=\"saveButton(inlineElement)\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"] }]
52854
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center; padding-bottom: 3px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <div class=\"right nxt-resize-handle\"></div>\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"nxt-resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n <div class=\"nxt-resize-handle\"></div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n style=\"\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: {{ button.backgroundColor }};\">\n <!-- IMAGE ICON (data URL or http/https) -->\n <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n #imgElement\n [src]=\"button.iconSrc\"\n style=\"cursor: pointer;\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n <!-- CSS ICON (fusion-icon-edit etc.) -->\n <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n class=\"fusion-icon nav-icon\"\n [ngClass]=\"button.iconSrc\"\n style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n </i>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <!-- Data Columns -->\n <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n (buttonClickEmit)=\"saveButton(inlineElement)\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"] }]
52855
52855
  }], ctorParameters: () => [{ type: CountryService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
52856
52856
  type: Input
52857
52857
  }], summaryValues: [{
@@ -56784,14 +56784,14 @@ class CustomModelComponent {
56784
56784
  this.saveButtonEmit.emit();
56785
56785
  }
56786
56786
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
56787
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CustomModelComponent, isStandalone: true, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onCancel()\">{{\"CANCEL\" | nxtCustomTranslate : 'Cancel'}}</button>\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
56787
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CustomModelComponent, isStandalone: true, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n <button (click)=\"onCancel()\">{{\"CANCEL\" | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
56788
56788
  }
56789
56789
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomModelComponent, decorators: [{
56790
56790
  type: Component,
56791
56791
  args: [{ selector: 'app-custom-model', standalone: true, imports: [
56792
56792
  CommonModule,
56793
56793
  NxtCustomTranslatePipe
56794
- ], template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onCancel()\">{{\"CANCEL\" | nxtCustomTranslate : 'Cancel'}}</button>\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"] }]
56794
+ ], template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n <button (click)=\"onCancel()\">{{\"CANCEL\" | nxtCustomTranslate : 'Cancel'}}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"] }]
56795
56795
  }], ctorParameters: () => [], propDecorators: { modalTitle: [{
56796
56796
  type: Input
56797
56797
  }], isModalOpen: [{
@@ -58622,7 +58622,7 @@ const VERSION = {
58622
58622
  "semver": null,
58623
58623
  "suffix": "68a4eb8b-dirty",
58624
58624
  "semverString": null,
58625
- "version": "2.1.318"
58625
+ "version": "2.1.319"
58626
58626
  };
58627
58627
  /* tslint:enable */
58628
58628
 
@@ -61200,11 +61200,11 @@ class PdfPropertiesComponent {
61200
61200
  }
61201
61201
  }
61202
61202
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PdfPropertiesComponent, deps: [{ token: DataService }, { token: i1$1.HttpClient }, { token: PdfDesignerService }, { token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
61203
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PdfPropertiesComponent, isStandalone: true, selector: "app-pdf-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\"></option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.type === 'fieldSize'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) ) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber)\"\n />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" \n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div class=\"flex-container\">\n <!-- Type select -->\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Type number -->\n <div *ngIf=\"prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n <div *ngIf=\"prop.type === 'marginPicker'\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n </div>\n </div>\n </div> \n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Default Save Button -->\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;width:35px;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView"], outputs: ["searchValueChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: FormulaInputComponent, selector: "app-formula-input", inputs: ["attributes", "initialFormula"], outputs: ["formulaChange", "formulaValidation"] }] });
61203
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PdfPropertiesComponent, isStandalone: true, selector: "app-pdf-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\"></option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.type === 'fieldSize'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) ) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber)\"\n />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" \n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div class=\"flex-container\">\n <!-- Type select -->\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Type number -->\n <div *ngIf=\"prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n <div *ngIf=\"prop.type === 'marginPicker'\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n </div>\n </div>\n </div> \n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Default Save Button -->\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;width:35px;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView"], outputs: ["searchValueChange"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: FormulaInputComponent, selector: "app-formula-input", inputs: ["attributes", "initialFormula"], outputs: ["formulaChange", "formulaValidation"] }] });
61204
61204
  }
61205
61205
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PdfPropertiesComponent, decorators: [{
61206
61206
  type: Component,
61207
- args: [{ selector: 'app-pdf-properties', standalone: true, imports: [CommonModule, FormsModule, NxtSearchBox, ImageCropperComponent, NxtCustomTranslatePipe, FormulaInputComponent], template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\"></option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.type === 'fieldSize'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) ) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber)\"\n />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" \n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div class=\"flex-container\">\n <!-- Type select -->\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Type number -->\n <div *ngIf=\"prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n <div *ngIf=\"prop.type === 'marginPicker'\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n </div>\n </div>\n </div> \n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Default Save Button -->\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;width:35px;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"] }]
61207
+ args: [{ selector: 'app-pdf-properties', standalone: true, imports: [CommonModule, FormsModule, NxtSearchBox, ImageCropperComponent, NxtCustomTranslatePipe, FormulaInputComponent], template: "<!-- - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- Select element type show -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search pdf specific for pdf element -->\n <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n [placeHolderText]=\"selectedElement.question || ''\"\n [mode]=\"'edit'\"\n (searchValueChange)=\"childEventCapture($event)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label \n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\"></option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n\n </div>\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- Change key width -->\n <div *ngIf=\"prop.type === 'fieldSize'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n <select\n class=\"size-select\"\n [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\n <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n </select>\n \n <input\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n type=\"number\"\n class=\"size-input\"\n min=\"1\"\n max=\"100\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber) ) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n $event.target.valueAsNumber > 100 ? 100 :\n $event.target.valueAsNumber)\"\n />\n </div> \n\n <!-- Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- Show elements ID -->\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n </div>\n\n <!-- - handled options with UUID -->\n <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" \n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\" (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div class=\"flex-container\">\n <!-- Type select -->\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.labelPath | nxtCustomTranslate : option.label }}\n </option>\n </select>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Type number -->\n <div *ngIf=\"prop.type === 'number'\">\n <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n </div>\n <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n <div *ngIf=\"prop.type === 'marginPicker'\">\n <div class=\"margin-inputs\">\n <div>\n <label>Right</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n </div>\n <div>\n <label>Top</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n </div>\n <div>\n <label>Left</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n </div>\n <div>\n <label>Bottom</label>\n <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n </div>\n </div>\n </div> \n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n </app-formula-input>\n </div>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Default Save Button -->\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;width:35px;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"] }]
61208
61208
  }], ctorParameters: () => [{ type: DataService }, { type: i1$1.HttpClient }, { type: PdfDesignerService }, { type: TemplateService }], propDecorators: { formButtonHandler: [{
61209
61209
  type: Output
61210
61210
  }], templateSaveHandler: [{
@@ -62079,11 +62079,11 @@ class PdfDesignerComponent {
62079
62079
  field.value = '';
62080
62080
  }
62081
62081
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: DataService }, { token: ChangeService }, { token: CountryService }, { token: PdfDesignerService }], target: i0.ɵɵFactoryTarget.Component });
62082
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from", dataBind: "dataBind", isPropertyHide: "isPropertyHide" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div> \n <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview \" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.color || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n \n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n \n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS21NOV25 signaturePad -->\n <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- SKS21NOV25 Signature Pad Field -->\n <div class=\"signature-pad-container\">\n <!-- SKS21NOV25 Builder mode (editable) -->\n <canvas *ngIf=\"!isPreview\"\n #sigCanvas\n [id]=\"field.id\"\n class=\"signature-pad\"\n (pointerdown)=\"pointerDown($event, field)\"\n (pointermove)=\"pointerMove($event, field)\"\n (pointerup)=\"pointerUp($event, field)\"\n (pointercancel)=\"pointerUp($event, field)\"\n (lostpointercapture)=\"pointerUp($event, field)\">\n </canvas>\n\n <!-- SKS21NOV25 Preview mode (static image) -->\n <img *ngIf=\"isPreview && field.value\"\n [src]=\"field.value\"\n class=\"signature-preview\" />\n <!-- SKS21NOV25 Empty state in preview -->\n <div *ngIf=\"isPreview && !field.value\"\n class=\"signature-placeholder\">\n Signature\n </div>\n <!-- SKS21NOV25 Builder buttons -->\n <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- SKS16SEP25 Date, currency, boolean, text -->\n <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' || field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n </nxt-input>\n </div>\n </div>\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n \n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n \n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n \n \n \n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n </div>\n \n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg> \n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n (drop)=\"onDrop($event, j)\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n 'color': pdfField?.style?.color || '#000000',\n 'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{j}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <!-- display: pdfField.isHidden ? 'none' : 'block' -->\n <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' || pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px ' ,\n }\"[class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"pdfField.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"pdfField?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n </nxt-input>\n </div>\n </div>\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Table -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n [data]=\"field.value?.data\"\n [summaryValues]=\"field.value?.summaryValue\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n <div class=\"color-picker\">\n <label>Change Color</label>\n <div class=\"colors\">\n <!-- Default colors -->\n <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n [style.background]=\"color\"\n (click)=\"selectColor(color)\">\n </div>\n \n <!-- Last box: custom color picker with eyedropper -->\n <label class=\"color-swatch custom-picker\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n </label>\n </div>\n </div> \n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown \n [options]=\"currencyOptions\"\n [id]=\"bookletId\" \n [selectedValue]=\"selectedCurrency\"\n [labelColor]=\"'#ffff'\"\n [inputTextColor]=\"'#ffff'\"\n [inputBgColor]=\"'#585653'\"\n placeholder=\"\" [from]=\"'normalDropDown'\"\n [apiMeta] = \"{'field': 'name','isObject': true}\"\n (valueChange)=\"currencyChange($event.value.valueObj)\">\n </nxt-dropdown> \n </div>\n </div>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;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;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.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;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.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}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.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}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.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:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
62082
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from", dataBind: "dataBind", isPropertyHide: "isPropertyHide" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div> \n <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview \" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.color || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n \n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n \n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS21NOV25 signaturePad -->\n <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- SKS21NOV25 Signature Pad Field -->\n <div class=\"signature-pad-container\">\n <!-- SKS21NOV25 Builder mode (editable) -->\n <canvas *ngIf=\"!isPreview\"\n #sigCanvas\n [id]=\"field.id\"\n class=\"signature-pad\"\n (pointerdown)=\"pointerDown($event, field)\"\n (pointermove)=\"pointerMove($event, field)\"\n (pointerup)=\"pointerUp($event, field)\"\n (pointercancel)=\"pointerUp($event, field)\"\n (lostpointercapture)=\"pointerUp($event, field)\">\n </canvas>\n\n <!-- SKS21NOV25 Preview mode (static image) -->\n <img *ngIf=\"isPreview && field.value\"\n [src]=\"field.value\"\n class=\"signature-preview\" />\n <!-- SKS21NOV25 Empty state in preview -->\n <div *ngIf=\"isPreview && !field.value\"\n class=\"signature-placeholder\">\n Signature\n </div>\n <!-- SKS21NOV25 Builder buttons -->\n <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- SKS16SEP25 Date, currency, boolean, text -->\n <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' || field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n </nxt-input>\n </div>\n </div>\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n \n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n \n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n \n \n \n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n </div>\n \n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg> \n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n (drop)=\"onDrop($event, j)\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n 'color': pdfField?.style?.color || '#000000',\n 'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{j}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <!-- display: pdfField.isHidden ? 'none' : 'block' -->\n <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' || pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px ' ,\n }\"[class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"pdfField.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"pdfField?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n </nxt-input>\n </div>\n </div>\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Table -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n [data]=\"field.value?.data\"\n [summaryValues]=\"field.value?.summaryValue\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n <div class=\"color-picker\">\n <label>Change Color</label>\n <div class=\"colors\">\n <!-- Default colors -->\n <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n [style.background]=\"color\"\n (click)=\"selectColor(color)\">\n </div>\n \n <!-- Last box: custom color picker with eyedropper -->\n <label class=\"color-swatch custom-picker\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n </label>\n </div>\n </div> \n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown \n [options]=\"currencyOptions\"\n [id]=\"bookletId\" \n [selectedValue]=\"selectedCurrency\"\n [labelColor]=\"'#ffff'\"\n [inputTextColor]=\"'#ffff'\"\n [inputBgColor]=\"'#585653'\"\n placeholder=\"\" [from]=\"'normalDropDown'\"\n [apiMeta] = \"{'field': 'name','isObject': true}\"\n (valueChange)=\"currencyChange($event.value.valueObj)\">\n </nxt-dropdown> \n </div>\n </div>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;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;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.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;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.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}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.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}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.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:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
62083
62083
  }
62084
62084
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PdfDesignerComponent, decorators: [{
62085
62085
  type: Component,
62086
- args: [{ selector: 'app-pdf-designer', standalone: true, imports: [nxtDropdown, CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div> \n <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview \" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.color || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n \n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n \n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS21NOV25 signaturePad -->\n <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- SKS21NOV25 Signature Pad Field -->\n <div class=\"signature-pad-container\">\n <!-- SKS21NOV25 Builder mode (editable) -->\n <canvas *ngIf=\"!isPreview\"\n #sigCanvas\n [id]=\"field.id\"\n class=\"signature-pad\"\n (pointerdown)=\"pointerDown($event, field)\"\n (pointermove)=\"pointerMove($event, field)\"\n (pointerup)=\"pointerUp($event, field)\"\n (pointercancel)=\"pointerUp($event, field)\"\n (lostpointercapture)=\"pointerUp($event, field)\">\n </canvas>\n\n <!-- SKS21NOV25 Preview mode (static image) -->\n <img *ngIf=\"isPreview && field.value\"\n [src]=\"field.value\"\n class=\"signature-preview\" />\n <!-- SKS21NOV25 Empty state in preview -->\n <div *ngIf=\"isPreview && !field.value\"\n class=\"signature-placeholder\">\n Signature\n </div>\n <!-- SKS21NOV25 Builder buttons -->\n <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- SKS16SEP25 Date, currency, boolean, text -->\n <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' || field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n </nxt-input>\n </div>\n </div>\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n \n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n \n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n \n \n \n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n </div>\n \n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg> \n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n (drop)=\"onDrop($event, j)\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n 'color': pdfField?.style?.color || '#000000',\n 'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{j}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <!-- display: pdfField.isHidden ? 'none' : 'block' -->\n <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' || pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px ' ,\n }\"[class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"pdfField.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"pdfField?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n </nxt-input>\n </div>\n </div>\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Table -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n [data]=\"field.value?.data\"\n [summaryValues]=\"field.value?.summaryValue\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n <div class=\"color-picker\">\n <label>Change Color</label>\n <div class=\"colors\">\n <!-- Default colors -->\n <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n [style.background]=\"color\"\n (click)=\"selectColor(color)\">\n </div>\n \n <!-- Last box: custom color picker with eyedropper -->\n <label class=\"color-swatch custom-picker\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n </label>\n </div>\n </div> \n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown \n [options]=\"currencyOptions\"\n [id]=\"bookletId\" \n [selectedValue]=\"selectedCurrency\"\n [labelColor]=\"'#ffff'\"\n [inputTextColor]=\"'#ffff'\"\n [inputBgColor]=\"'#585653'\"\n placeholder=\"\" [from]=\"'normalDropDown'\"\n [apiMeta] = \"{'field': 'name','isObject': true}\"\n (valueChange)=\"currencyChange($event.value.valueObj)\">\n </nxt-dropdown> \n </div>\n </div>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;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;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.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;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.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}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.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}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.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:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"] }]
62086
+ args: [{ selector: 'app-pdf-designer', standalone: true, imports: [nxtDropdown, CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n <!-- Form Builder Section All Elements -->\n <div *ngIf=\"!isPreview\" class=\"form-builder\">\n <ng-container *ngFor=\"let element of elementsList\">\n <div\n class=\"element\"\n [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n [matTooltip]=\"\n selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n : null\n \"\n >\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div> \n <div class=\"drag-dots\">\n <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n </div>\n </div>\n </ng-container>\n <!-- SKS10MAR25 footer version show -->\n <div class=\"sticky-footer-version\">\n {{version}}\n </div>\n </div> \n <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n <div class=\"form-preview\">\n <!-- AP-10MAR25 Heading -->\n <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n </div>\n <div class=\"action-buttons\">\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div *ngIf=\"!isPreview \" class=\"line-element\">\n <div></div>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n 'color': field?.style?.color || '#000000',\n 'margin-top': (field?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n \n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n </div>\n \n <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Space Element -->\n <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- SKS21NOV25 signaturePad -->\n <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n \n \n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- SKS21NOV25 Signature Pad Field -->\n <div class=\"signature-pad-container\">\n <!-- SKS21NOV25 Builder mode (editable) -->\n <canvas *ngIf=\"!isPreview\"\n #sigCanvas\n [id]=\"field.id\"\n class=\"signature-pad\"\n (pointerdown)=\"pointerDown($event, field)\"\n (pointermove)=\"pointerMove($event, field)\"\n (pointerup)=\"pointerUp($event, field)\"\n (pointercancel)=\"pointerUp($event, field)\"\n (lostpointercapture)=\"pointerUp($event, field)\">\n </canvas>\n\n <!-- SKS21NOV25 Preview mode (static image) -->\n <img *ngIf=\"isPreview && field.value\"\n [src]=\"field.value\"\n class=\"signature-preview\" />\n <!-- SKS21NOV25 Empty state in preview -->\n <div *ngIf=\"isPreview && !field.value\"\n class=\"signature-placeholder\">\n Signature\n </div>\n <!-- SKS21NOV25 Builder buttons -->\n <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- SKS16SEP25 Date, currency, boolean, text -->\n <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' || field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label-container\">\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n </nxt-input>\n </div>\n </div>\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n \n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n \n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n \n \n \n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div>\n </div>\n \n <!-- Pdf -->\n <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'text-align': field?.style?.alignment || '',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg> \n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n <!-- AP-19MAR25 Line Element -->\n <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n (drop)=\"onDrop($event, j)\">\n <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField.textAlign || 'left',\n 'border-radius': '5px',\n 'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n 'color': pdfField?.style?.color || '#000000',\n 'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n 'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n }\" />\n </div>\n\n <!--SKS25MAR25 Image Upload Element -->\n <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" \n (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div>\n <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n <div style=\"display: flex; justify-content: end;\">\n <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n </div>\n\n <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{j}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n style=\"display: none;\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Space Element -->\n <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'text-align': pdfField?.style?.alignment || '',\n 'border-radius': '5px',\n \n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px',\n \n \n display: pdfField.isHidden ? 'none' : 'block' \n }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n <div *ngIf=\"!isPreview \" class=\"field-content\">\n <div class=\"label-container\">\n <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Date -->\n <!-- display: pdfField.isHidden ? 'none' : 'block' -->\n <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' || pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n [ngStyle]=\"{\n 'font-family': pdfField?.style?.font || 'Helvetica Neue',\n 'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n 'width': (pdfField?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': pdfField?.style?.color || '#000000',\n 'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n 'font-weight': pdfField?.style?.bold ? '700' : '400',\n 'padding': \n (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n (pdfField?.style?.margin?.[0] || 0) + 'px ' ,\n }\"[class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <!-- AP-04JUN25 - replace custom date picker -->\n <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"pdfField.isReadOnly\"\n [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n [inputWeight]=\"\" [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"pdfField?.style?.alignment || ''\"\n [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n </nxt-input>\n </div>\n </div>\n <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n [ngStyle]=\"{\n position: 'absolute',\n background: '#fff',\n border: '1px solid #ccc',\n padding: '6px 10px',\n 'border-radius': '4px',\n 'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n 'z-index': '65535',\n display: 'flex',\n 'text-align': 'center',\n gap: '8px'\n }\">\n \n <!-- Font Size -->\n <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n <option [value]=\"12\">12pt</option>\n <option [value]=\"14\">14pt</option>\n <option [value]=\"16\">16pt</option>\n <option [value]=\"18\">18pt</option>\n <option [value]=\"24\">24pt</option>\n </select>\n\n <!-- Text Color -->\n <label title=\"Text Color\" class=\"color-label\">\n <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n </label>\n\n <!-- Bold -->\n <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n \n <!-- Italic -->\n <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n <!-- Underline -->\n <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n <!-- Align Left -->\n <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n </button>\n \n <!-- Align Center -->\n <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n </button>\n \n <!-- Align Right -->\n <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n </button>\n \n <!-- Close -->\n <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n </div> \n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Table -->\n <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n [ngStyle]=\"{\n 'font-family': field?.style?.font || 'Helvetica Neue',\n 'font-size': (field?.style?.fontSize || 12) + 'px',\n 'width': (field?.width || 100) + '%',\n 'border-radius': '5px',\n 'color': field?.style?.color || '#000000',\n 'font-style': field?.style?.italic ? 'italic' : 'normal',\n 'font-weight': field?.style?.bold ? '700' : '400',\n 'padding': \n (field?.style?.margin?.[1] || 0) + 'px ' +\n (field?.style?.margin?.[2] || 0) + 'px ' +\n (field?.style?.margin?.[3] || 0) + 'px ' +\n (field?.style?.margin?.[0] || 0) + 'px ' ,\n }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\">\n <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n <div class=\"field-content\">\n <div *ngIf=\"!isPreview \" class=\"label2-container\">\n <div>\n <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n [ngStyle]=\"{\n 'padding-top': field.type === 'label' ? '10px' : '',\n \n }\" [style.font-weight]=\"field.labelWeight || field.type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type === 'label' ? '16px' : '14px'\"\n style=\"display: flex; gap: 5px;\"> \n {{ field.questionText }}\n <div *ngIf=\"field.questionText && field.type != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n </div>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n <svg [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n </svg>\n </div>\n <div class=\"nxt-table-container\">\n <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n [data]=\"field.value?.data\"\n [summaryValues]=\"field.value?.summaryValue\"\n (valueChange)=\"onQuestionChange($event, field)\"\n (removeColumn)=removeColumn($event)>\n </nxt-datatable>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n <div class=\"color-picker\">\n <label>Change Color</label>\n <div class=\"colors\">\n <!-- Default colors -->\n <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n [style.background]=\"color\"\n (click)=\"selectColor(color)\">\n </div>\n \n <!-- Last box: custom color picker with eyedropper -->\n <label class=\"color-swatch custom-picker\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n </label>\n </div>\n </div> \n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown \n [options]=\"currencyOptions\"\n [id]=\"bookletId\" \n [selectedValue]=\"selectedCurrency\"\n [labelColor]=\"'#ffff'\"\n [inputTextColor]=\"'#ffff'\"\n [inputBgColor]=\"'#585653'\"\n placeholder=\"\" [from]=\"'normalDropDown'\"\n [apiMeta] = \"{'field': 'name','isObject': true}\"\n (valueChange)=\"currencyChange($event.value.valueObj)\">\n </nxt-dropdown> \n </div>\n </div>\n </div>\n </div>\n <!-- SKS13MAR25 popup conformation box -->\n <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n <div class=\"dialog-box\">\n <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n </div>\n </div>\n </div>\n <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n <div class=\"modal-content\">\n <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n <!-- Image Editor -->\n <div *ngIf=\"selectedImageElement?.type === 'image'\">\n <div style=\"height: 200px;\">\n <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n </image-cropper>\n </div>\n <!-- Controls -->\n <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n </div>\n </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;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;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.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;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.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}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.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}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.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:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"] }]
62087
62087
  }], ctorParameters: () => [{ type: DataService }, { type: ChangeService }, { type: CountryService }, { type: PdfDesignerService }], propDecorators: { textareas: [{
62088
62088
  type: ViewChildren,
62089
62089
  args: ['autoTextarea']
@@ -63792,11 +63792,11 @@ class PropertiesComponent {
63792
63792
  }
63793
63793
  }
63794
63794
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PropertiesComponent, deps: [{ token: FormBuilderService }, { token: TemplateService }, { token: TranslationService }, { token: i0.ChangeDetectorRef }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
63795
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { templateSelected: "templateSelected", selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div>\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <div class=\"form-group\">\n <label>\n <input type=\"checkbox\" [ngModel]=\"btn.updateParentData\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'updateParentData', $event)\"\n />\n {{ 'UPDATE_PARENTDATA' | nxtCustomTranslate : 'updateParentData' }}\n </label>\n </div> \n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text' || subProp.type === 'number'\"\n [type]=\"subProp.type\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getOptimizedSubPropValue(subProp)\"\n (change)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.checked, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.checked, prop.isTranslate)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key , prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) :setValueByPath(prop.key, $event, prop.isTranslate) ) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px!important;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i5.NgClass, i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.NumberValueAccessor, i6.RangeValueAccessor, i6.CheckboxControlValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.MinValidator, i6.NgModel, Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), GetValueByPathPipe, NxtCustomTranslatePipe, Promise.resolve().then(function () { return formulaInput_component; }).then(m => m.FormulaInputComponent)], () => [i5.NgClass, i5.NgIf, Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent), NxtCustomTranslatePipe], () => [i5.NgForOf, i5.NgIf, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe, Promise.resolve().then(function () { return formulaInput_component; }).then(m => m.FormulaInputComponent)], () => [i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe]] });
63795
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { templateSelected: "templateSelected", selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div>\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <div class=\"form-group\">\n <label>\n <input type=\"checkbox\" [ngModel]=\"btn.updateParentData\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'updateParentData', $event)\"\n />\n {{ 'UPDATE_PARENTDATA' | nxtCustomTranslate : 'updateParentData' }}\n </label>\n </div> \n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text' || subProp.type === 'number'\"\n [type]=\"subProp.type\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getOptimizedSubPropValue(subProp)\"\n (change)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.checked, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.checked, prop.isTranslate)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key , prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) :setValueByPath(prop.key, $event, prop.isTranslate) ) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px!important;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i5.NgClass, i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.NumberValueAccessor, i6.RangeValueAccessor, i6.CheckboxControlValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.MinValidator, i6.NgModel, Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), GetValueByPathPipe, NxtCustomTranslatePipe, Promise.resolve().then(function () { return formulaInput_component; }).then(m => m.FormulaInputComponent)], () => [i5.NgClass, i5.NgIf, Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent), NxtCustomTranslatePipe], () => [i5.NgForOf, i5.NgIf, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe, Promise.resolve().then(function () { return formulaInput_component; }).then(m => m.FormulaInputComponent)], () => [i5.NgForOf, i5.NgIf, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.DefaultValueAccessor, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe]] });
63796
63796
  }
63797
63797
  i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.18", ngImport: i0, type: PropertiesComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), Promise.resolve().then(function () { return formulaInput_component; }).then(m => m.FormulaInputComponent), Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent)], resolveMetadata: (NxtSearchBox, FormulaInputComponent, ImageCropperComponent) => ({ decorators: [{
63798
63798
  type: Component,
63799
- args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox, NgClass, NgFor, NgIf, GetValueByPathPipe, NxtCustomTranslatePipe, FormulaInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div>\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <div class=\"form-group\">\n <label>\n <input type=\"checkbox\" [ngModel]=\"btn.updateParentData\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'updateParentData', $event)\"\n />\n {{ 'UPDATE_PARENTDATA' | nxtCustomTranslate : 'updateParentData' }}\n </label>\n </div> \n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text' || subProp.type === 'number'\"\n [type]=\"subProp.type\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getOptimizedSubPropValue(subProp)\"\n (change)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.checked, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.checked, prop.isTranslate)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key , prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) :setValueByPath(prop.key, $event, prop.isTranslate) ) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px!important;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"] }]
63799
+ args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox, NgClass, NgFor, NgIf, GetValueByPathPipe, NxtCustomTranslatePipe, FormulaInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n @defer (when getProperties()) {\n <div>\n @defer (when selectedElement()?.type === 'Image') {\n <image-cropper\n *ngIf=\"selectedElement().imageData\"\n [imageBase64]=\"selectedElement().orgImageData\"\n [disabled]=\"false\"\n [alignImage]=\"alignImage\"\n [roundCropper]=\"roundCropper\"\n [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\"\n [allowMoveImage]=\"false\"\n [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation()\"\n [aspectRatio]=\"aspectRatio\"\n [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\"\n [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\"\n [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\"\n [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\"\n [resetCropOnAspectRatioChange]=\"true\"\n [(cropper)]=\"cropper\"\n [(transform)]=\"transform\"\n [onlyScaleDown]=\"true\"\n output=\"blob\"\n format=\"png\"\n (imageCropped)=\"imageCropped($event)\"\n (cropperReady)=\"cropperReady($event)\"\n ></image-cropper>\n <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n </div>\n }\n <div *ngIf=\"selectedElement()?.type === 'Book'\">\n <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box\n [question]=\"selectedElement()\"\n [apiMeta]=\"bookSubtext()\"\n [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\"\n ></nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <ng-container *ngIf=\"prop.isTranslate && formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"((selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? selectColumn() : selectedElement().id) + '.' + prop.key | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n \n <span>{{ translated }}</span>\n \n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n \n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <input *ngIf=\"prop.type === 'number'\"\n type=\"number\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n <select *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n </div>\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <div *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns()\">\n <label>\n <input\n type=\"radio\"\n [name]=\"subProp.key\"\n [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n >\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <input\n *ngIf=\"subProp.type === 'text'\"\n type=\"text\"\n [placeholder]=\"subProp.placeholder\"\n [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n />\n <input\n *ngIf=\"subProp.type === 'boolean'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n <select\n *ngIf=\"subProp.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"subProp.type === 'checkbox'\"\n type=\"checkbox\"\n [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n <div *ngIf=\"prop.type === 'color'\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n </div>\n <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>{{ 'BUTTON_ID' | nxtCustomTranslate : 'Button ID' }}</label>\n <input type=\"text\" [ngModel]=\"btn.id\" (ngModelChange)=\"onButtonPropertyChange(i, 'id', $event,true)\" placeholder=\"Enter button id\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n <ng-container *ngIf=\"formBuilderLanguageCode && formBuilderLanguageCode !== 'en'\">\n <ng-container *ngIf=\"(btn.id + '.name' | nxtCustomTranslate : '' : 'formBuilder') as translated\">\n <div *ngIf=\"translated?.trim()\" class=\"translation-fallback\">\n <div style=\"font-size: 10px;\">Default (English)</div>\n <div class=\"readonly-box\" style=\"display: flex; align-items: center; gap: 8px; position: relative;\">\n <span>{{ translated }}</span>\n <!-- Copy Icon -->\n <svg *ngIf=\"!copied\"\n (click)=\"copyToClipboard(translated)\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24.00 24.00\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" transform=\"rotate(0)\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#CCCCCC\" stroke-width=\"0.048\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"style=stroke\"> <g id=\"copy\"> <path id=\"rec (Stroke)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 5.25C6.25 2.50265 8.43733 0.25 11.1667 0.25H17.8333C20.5627 0.25 22.75 2.50265 22.75 5.25V13.75C22.75 16.4974 20.5627 18.75 17.8333 18.75C17.4191 18.75 17.0833 18.4142 17.0833 18C17.0833 17.5858 17.4191 17.25 17.8333 17.25C19.7064 17.25 21.25 15.6971 21.25 13.75V5.25C21.25 3.30293 19.7064 1.75 17.8333 1.75H11.1667C9.29363 1.75 7.75 3.30293 7.75 5.25C7.75 5.66421 7.41421 6 7 6C6.58579 6 6.25 5.66421 6.25 5.25Z\" fill=\"#000000\"></path> <path id=\"rec (Stroke)_2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.25 10.25C1.25 7.50265 3.43733 5.25 6.16667 5.25H12.8333C15.5627 5.25 17.75 7.50265 17.75 10.25V18.75C17.75 21.4974 15.5627 23.75 12.8333 23.75H6.16667C3.43733 23.75 1.25 21.4974 1.25 18.75V10.25ZM6.16667 6.75C4.29363 6.75 2.75 8.30293 2.75 10.25V18.75C2.75 20.6971 4.29363 22.25 6.16667 22.25H12.8333C14.7064 22.25 16.25 20.6971 16.25 18.75V10.25C16.25 8.30293 14.7064 6.75 12.8333 6.75H6.16667Z\" fill=\"#000000\"></path> </g> </g> </g></svg>\n <!-- Copied Message -->\n <span *ngIf=\"copied\" class=\"copied-msg\">Copied!</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ACTION_DATA' | nxtCustomTranslate : 'Action Data' }}</label>\n <input type=\"text\" [ngModel]=\"btn.actionData\" (ngModelChange)=\"onButtonPropertyChange(i, 'actionData', $event)\" placeholder=\"Event to actionData\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option value=\"GET\">GET</option>\n <option value=\"POST\">POST</option>\n <option value=\"PUT\">PUT</option>\n <option value=\"DELETE\">DELETE</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_SIZE' | nxtCustomTranslate : 'Border Size' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderSize\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderSize', $event)\">\n <span>{{ btn.borderSize }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_COLOR' | nxtCustomTranslate : 'Border Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.borderColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div>\n <div class=\"form-group\">\n <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n <input type=\"color\" style=\"width: 100%;\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n <div class=\"form-group\">\n <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <div class=\"form-group\">\n <label>\n <input type=\"checkbox\" [ngModel]=\"btn.updateParentData\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'updateParentData', $event)\"\n />\n {{ 'UPDATE_PARENTDATA' | nxtCustomTranslate : 'updateParentData' }}\n </label>\n </div> \n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n @defer (when getProperties()) {\n <div>\n <label>Id</label>\n <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect() ? bookId() : selectedElement()?.id }}\n </div>\n <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n />\n {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n />\n {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" \n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n />\n {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n </label>\n </div>\n </div>\n <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Value\" class=\"options\" />\n <input type=\"text\" style=\"padding: 4px; border-radius: 2px;\" [ngModel]=\"option.label\" (ngModelChange)=\"option.label = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Label\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n </div>\n </button>\n </div>\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\"\n />\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n <input *ngIf=\"subProp.type === 'text' || subProp.type === 'number'\"\n [type]=\"subProp.type\"\n [placeholder]=\"subProp.placeholder\"\n [value]=\"getOptimizedSubPropValue(subProp)\"\n (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n [class.read-only]=\"selectedElement()?.readOnly\"\n [readonly]=\"selectedElement()?.readOnly\" />\n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getOptimizedSubPropValue(subProp)\"\n (change)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.checked, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.checked, prop.isTranslate)\" />\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n />\n </div>\n <!-- SKS16SEP25 formula -->\n <div *ngIf=\"prop.type === 'formula'\">\n <app-formula-input\n [attributes]=\"selectedElement['fieldsMeta']\"\n [initialFormula]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key , prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n (formulaChange)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) :setValueByPath(prop.key, $event, prop.isTranslate) ) : setValueByPath(prop.key, $event, prop.isTranslate)\">\n </app-formula-input>\n </div>\n </div>\n </ng-container>\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input\n type=\"text\"\n [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n placeholder=\"Enter {{ key }}\"\n />\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n @defer (when getProperties()) {\n <div>\n <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n <select\n *ngIf=\"prop.type === 'select'\"\n [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n >\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n </select>\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n\n <div class=\"flex-container\">\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input\n type=\"color\" style=\"width: 100%;\"\n [ngModel]=\"selectedElement()?.color\"\n (ngModelChange)=\"setValueByPath('color', $event, prop.isTranslate)\"\n >\n </div>\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n <input\n type=\"text\"\n [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n />\n </div>\n </div>\n <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button\n type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement())\"\n >\n {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n }\n </div>\n\n <div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n </div>\n\n <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:5px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px!important;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;width:35px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}.translation-fallback label,.translation-input-group label{font-weight:500;font-size:13px;margin-bottom:4px;display:block;color:#666}.readonly-box{font-size:14px;padding:4px;border:1px solid #ddd;border-radius:5px;-webkit-user-select:text;user-select:text;cursor:text;color:#7a7a7a;margin-bottom:3px}.copied-msg{font-size:12px;color:green;opacity:0;animation:fadeInOut 1.5s ease}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"] }]
63800
63800
  }], ctorParameters: () => [{ type: FormBuilderService }, { type: TemplateService }, { type: TranslationService }, { type: i0.ChangeDetectorRef }, { type: DataService }], propDecorators: { templateSelected: [{
63801
63801
  type: Input
63802
63802
  }], selectedElementType: [{