@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
1,106 lines • 280 kB
JavaScript
import { Component, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SearchBoxComponent } from '../../../components/search-box/search-box.component';
import { ImageCropperComponent } from '../../../components/image-cropper/component/image-cropper.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common/http";
import * as i2 from "../../../services/pdf-designer.service";
import * as i3 from "../../../services/template.service";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
export class PdfPropertiesComponent {
http;
pdfDesignerService;
templateService;
formButtonHandler = new EventEmitter();
templateSaveHandler = new EventEmitter();
selectedOption = '';
selectedElementIndex = -1;
selectedElementType = '';
selectedAlign = 'align-left'; // Add this property
selectedStyles = []; // Using array since multiple styles can be selected
selectedElement = null; // Receive the selected element
headerSelect = false;
bookId;
pdf;
activeTab = 'attributes';
selectColumn;
transform = {
translateUnit: 'px',
scale: 1,
rotate: 0,
flipH: false,
flipV: false,
translateH: 0,
translateV: 0
};
canvasRotation = 0;
cropper;
loading = false;
cropperMaxHeight = 0;
cropperMaxWidth = 0;
cropperMinHeight = 0;
cropperMinWidth = 0;
cropperStaticWidth = 0;
cropperStaticHeight = 0;
aspectRatio = 4 / 3;
roundCropper = false;
imageChangedEvent = null;
alignImage = 'center';
// "endpoint": "https://dev-api.valarhr.com/nxt",
// SKS28MAR25 default pdf search endpoint
bookSubtext = {
"endpoint": "https://2f8e4523-bb4e-49d9-a17a-363ad577bb60.mock.pstmn.io/pdf",
"variable": null,
"field": ['title'],
"defaultField": "title"
};
isLinkDropdownOpen = false;
templateSelected = false;
dropdown;
draggedId = null;
pdfElements = [];
unique_id = 'pdf-1234'; // should be consistent
selectedTemplate;
elementProperties = {
// AP-10MAR25 - Defines the Header element with a text input field
// AP-25MAR25 Add subtext all variables
'Header': {
elementProps: [
{ label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'title' }
]
},
'text': {
elementProps: [
{ label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'width', type: 'fieldSize', key: 'width' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text' },
{ label: 'Value', placeholder: 'Enter Text ', type: 'text', key: 'value' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": []
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size',
type: 'number',
key: 'fontSize',
value: 14
},
{
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
options: [
{ label: 'Normal', value: 'normal' },
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' }
]
},
{
label: 'Margin', type: 'marginPicker', key: 'margin',
placeholder: 'Left, Top, Right, Bottom',
value: [0, 0, 0, 0]
},
{
label: 'Align Item', type: 'select', key: 'alignItems', value: '',
options: [
{ label: 'Left', value: 'left' },
{ label: 'Center', value: 'center' },
{ label: 'Right', value: 'right' }
]
}
]
},
'input': {
elementProps: [
{ label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'width', type: 'fieldSize', key: 'width' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text' },
{ label: 'Value', placeholder: 'Enter Text ', type: 'text', key: 'value' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": []
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size',
type: 'number',
key: 'fontSize',
value: 14
},
{
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
options: [
{ label: 'Normal', value: 'normal' },
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' }
]
},
{
label: 'Margin', type: 'marginPicker', key: 'margin',
placeholder: 'Left, Top, Right, Bottom',
value: [0, 0, 0, 0]
},
{
label: 'Align Item', type: 'select', key: 'alignItems', value: '',
options: [
{ label: 'Left', value: 'left' },
{ label: 'Center', value: 'center' },
{ label: 'Right', value: 'right' }
]
}
]
},
'date': {
elementProps: [
{ label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'width', type: 'fieldSize', key: 'width' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text' },
{ label: 'Value', placeholder: 'Enter Text ', type: 'text', key: 'value' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": []
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size',
type: 'number',
key: 'fontSize',
value: 14
},
{
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
options: [
{ label: 'Normal', value: 'normal' },
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' }
]
},
{
label: 'Margin', type: 'marginPicker', key: 'margin',
placeholder: 'Left, Top, Right, Bottom',
value: [0, 0, 0, 0]
},
{
label: 'Align Item', type: 'select', key: 'alignItems', value: '',
options: [
{ label: 'Left', value: 'left' },
{ label: 'Center', value: 'center' },
{ label: 'Right', value: 'right' }
]
}
]
},
'Pdf': {
elementProps: [
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'width', type: 'fieldSize', key: 'width' }
],
fieldProps: [
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text' },
{ label: 'Value', placeholder: 'Enter Text ', type: 'text', key: 'value' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": []
}
],
appearance: []
},
// AP-19MAR25 Add Line Property
'Line': {
elementProps: [
{ label: 'Line Width', type: 'fieldSize', key: 'width' },
{ label: 'Padding Top', type: 'number', key: 'paddingTop', placeholder: 'Enter padding top' },
{ label: 'Padding Bottom', type: 'number', key: 'paddingBottom', placeholder: 'Enter padding bottom' },
{
label: 'Line Style', type: 'select', key: 'lineStyle',
options: ['Solid', 'Dashed', 'Dotted']
}
],
fieldProps: [],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size',
type: 'number',
key: 'fontSize',
value: 14
},
{
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
options: [
{ label: 'Normal', value: 'normal' },
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' }
]
},
{
label: 'Margin', type: 'marginPicker', key: 'margin',
placeholder: 'Left, Top, Right, Bottom',
value: [0, 0, 0, 0]
},
// {
// label: 'Align Item', type: 'select', key: 'alignItems', value: '',
// options: [
// { label: 'Left', value: 'left' },
// { label: 'Center', value: 'center' },
// { label: 'Right', value: 'right' }
// ]
// }
]
},
'Space': {
elementProps: [
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'Field Size', type: 'fieldSize', key: 'width' },
],
fieldProps: [],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size',
type: 'number',
key: 'fontSize',
value: 14
},
{
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
options: [
{ label: 'Normal', value: 'normal' },
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' }
]
},
{
label: 'Margin', type: 'marginPicker', key: 'margin',
placeholder: 'Left, Top, Right, Bottom',
value: [0, 0, 0, 0]
},
// {
// label: 'Align Item', type: 'select', key: 'alignItems', value: '',
// options: [
// { label: 'Left', value: 'left' },
// { label: 'Center', value: 'center' },
// { label: 'Right', value: 'right' }
// ]
// }
]
},
"Table": {
"elementProps": [
{ "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
{ label: 'questionNumber', type: 'number', key: 'questionNumber' },
{ label: 'Table Size', type: 'fieldSize', key: 'width' },
],
"fieldProps": [
{ "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
{ "label": "value", "placeholder": "Value", "type": "text", "key": "value" },
{ label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": []
},
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size',
type: 'number',
key: 'fontSize',
value: 14
},
{
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
options: [
{ label: 'Normal', value: 'normal' },
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' }
]
},
{
label: 'Margin', type: 'marginPicker', key: 'margin',
placeholder: 'Left, Top, Right, Bottom',
value: [0, 0, 0, 0]
},
// {
// label: 'Align Item', type: 'select', key: 'alignItems', value: '',
// options: [
// { label: 'Left', value: 'left' },
// { label: 'Center', value: 'center' },
// { label: 'Right', value: 'right' }
// ]
// }
]
},
"TableColumn": {
"elementProps": [
{ "label": "headerLabels", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "label" },
{ "label": "apiName", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "apiName" },
{
"label": "Summary Column", "placeholder": "Summary Column", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryColumn",
"subQuestion": [
{ "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
{ "label": "Operation", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
{ "label": "Operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
]
},
{
"label": "Summary Row", "placeholder": "Summary Row", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryRow", "subQuestion": [
{ "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
{ "label": "operation", "placeholder": "operation", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
{ "label": "column", "placeholder": "Employee Details", "type": "radio", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "column" },
{ "label": "operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
]
},
{ "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
{ "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
{ "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
{
"label": "quickActionTools",
"type": "group",
"key": "quickActionTools",
"children": [
{ "label": "edit", "type": "toggle", "key": "edit" },
{ "label": "view", "type": "toggle", "key": "view" },
{ "label": "delete", "type": "toggle", "key": "delete" }
]
},
{ "label": "addRecordEvent", "type": "toggle", "key": "addRecordEvent" },
{
"label": "tableScrollEventChoice",
"type": "group",
"key": "tableScrollEventChoice",
"children": [
{ "label": "horizontal", "type": "toggle", "key": "horizontal" },
{ "label": "vertical", "type": "toggle", "key": "vertical" }
]
}
],
"fieldProps": [
{ "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
{ "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
{ "label": "requiredField", "type": "toggle", "key": "requiredField" },
{ "label": "Read Only", "type": "checkbox", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "edit" },
{ "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
{ "label": "disabled", "type": "toggle", "key": "disabled" },
{ "label": "hideElements", "type": "toggle", "key": "hideElements" },
{ "label": "masking", "type": "toggle", "key": "masking" },
{ "label": "value", "placeholder": "Value", "type": "text", "key": "value" },
{ "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
{ "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
{ "label": "isDependence", "type": "toggle", "key": "isDependence" },
{ "label": "newLine", "type": "toggle", "key": "newLine" }
],
"appearance": [
{ "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
{ "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
{ "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
{ "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
{ "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
{ "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
{ "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
{ "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
{ "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
]
},
'TextArea': {
elementProps: [
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'width', type: 'fieldSize', key: 'width' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text' },
{ label: 'Value', placeholder: 'Enter Text ', type: 'text', key: 'value' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": []
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size', type: 'select', key: 'fontSize', value: '',
options: [
{ label: 'Small', value: '12px' },
{ label: 'Medium', value: '14px' },
{ label: 'Large', value: '16px' }
]
},
{
label: 'Font Width', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
// { label: 'Background Color', type: 'color', key: 'backgroundColor', value: '' },
]
},
'image': {
elementProps: [
{ label: 'Element', type: 'number', key: 'questionNumber' },
{ label: 'width', type: 'fieldSize', key: 'width' },
],
fieldProps: [
{ label: '', type: 'toggleGroup', key: 'toggleOptions' },
{ label: 'Help Text', placeholder: 'Enter Text ', type: 'text' },
{ label: 'Value', placeholder: 'Enter Text ', type: 'text', key: 'value' },
{ label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
{
"label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
"subQuestion": []
}
],
appearance: [
{
label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
},
{ label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
{
label: 'Font Size',
type: 'number',
key: 'fontSize',
value: 14
},
{
label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
options: [
{ value: '400', label: '400-Normal' },
{ value: '500', label: '500-Medium' },
{ value: '600', label: '600-Semi Bold' },
{ value: '700', label: '700-Bold' }
]
},
{
label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
options: [
{ label: 'Normal', value: 'normal' },
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' }
]
},
{
label: 'Margin', type: 'marginPicker', key: 'margin',
placeholder: 'Left, Top, Right, Bottom',
value: [0, 0, 0, 0]
},
{
label: 'Align Item', type: 'select', key: 'alignItems', value: '',
options: [
{ label: 'Left', value: 'left' },
{ label: 'Center', value: 'center' },
{ label: 'Right', value: 'right' }
]
}
]
},
};
errorMessage;
constructor(http, pdfDesignerService, templateService) {
this.http = http;
this.pdfDesignerService = pdfDesignerService;
this.templateService = templateService;
}
handleTemplateSelection(event) {
this.pdfElements = event.elements;
this.selectedTemplate = event.selectedTemplate;
}
ngOnInit() {
//AP-10MAR25 Subscribes to header selection changes and updates the selected element
this.pdfDesignerService.selectHeaderSubject$.subscribe(header => {
if (header) {
if (!this.selectedElement) {
this.selectedElement = {};
}
this.selectedElement['type'] = header;
this.headerSelect = true;
this.pdf = this.pdfDesignerService.getBook();
this.bookId = Object.keys(this.pdf)[0];
}
});
this.pdfDesignerService.selectedElement$.subscribe(index => {
this.selectedElementIndex = index;
this.headerSelect = false;
if (index >= 0) {
const elements = this.pdfDesignerService.getElements();
this.selectedElement = elements[index];
if (this.selectedElement?.type === 'Table') {
this.selectColumn = this.pdfDesignerService.getSelectTableColumn() === undefined ? null : this.pdfDesignerService.getSelectTableColumn();
}
else {
this.selectColumn = null;
}
if (!this.selectedElement.margin) {
this.selectedElement.margin = [0, 0, 0, 0];
}
}
this.getProperties();
});
}
//AP-10MAR25 Updates the title using the form builder service
updateTitle(event) {
this.pdfDesignerService.updateTitle(event);
}
get fieldAsString() {
return this.bookSubtext.field.join(', '); //SKS28MAR25 Convert array to comma-separated string
}
updateField(value) {
this.bookSubtext.field = value.split(',').map(item => item.trim()); //SKS28MAR25 Convert string back to array
}
// SKS20MAR25 Getter to filter columns, excluding the one with currentUniqueIdentifier
get filteredColumns() {
const targetArray = this.getDataByPath('fieldsMeta');
return targetArray.filter(column => column.uniqueIdentifier !== this.selectColumn);
}
// SKS20MAR25 Method to handle checkbox changes
onCheckboxChange(targetArrayPath, targetArrayKey, key, apiName, isChecked) {
const targetArray = this.getDataByPath(targetArrayPath);
const foundItem = targetArray.find(item => item[targetArrayKey] === this.selectColumn);
foundItem[key] = foundItem[key] ? foundItem[key] : [];
if (isChecked) {
// Add apiName to selectedApiNames if not already present
if (!foundItem[key].includes(apiName)) {
foundItem[key].push(apiName);
}
}
else {
// Remove apiName from selectedApiNames if present
const index = foundItem[key].indexOf(apiName);
if (index > -1) {
foundItem[key].splice(index, 1);
}
}
}
updateProperty(key, value) {
if (this.selectedElementIndex >= 0) {
this.setValueByPath(key, value);
}
if (key === 'question') {
if (!this.validateInput(value, key)) {
return;
}
}
}
// SKS21MAR25 radio button click handler
onRadioChange(targetArrayPath, targetArrayKey, key, value) {
if (this.selectedElement.type === 'Table') {
// this.updateValueByArrayPath(targetArray, targetArrayKey, this.selectColumn, key, value);
const targetArray = this.getDataByPath(targetArrayPath);
// console.log("targetArray", targetArray, "targetArrayKey", targetArrayKey, "selectColumn", this.selectColumn, "keyPath", key, "event", value)
if (!Array.isArray(targetArray))
return;
// Find the object that matches selectColumn
let foundItem = targetArray.find(item => item[targetArrayKey] === this.selectColumn);
// If the item does not exist, create and add it
if (!foundItem) {
foundItem = { [targetArrayKey]: this.selectColumn }; // Ensure the key exists
targetArray.push(foundItem);
}
// Traverse and set the value
const keys = key.split('.');
let obj = foundItem;
for (let i = 0; i < keys.length - 1; i++) {
const key = keys[i];
if (!obj[key])
obj[key] = {}; // Initialize missing objects
obj = obj[key];
}
// Assign the value based on input type
const lastKey = keys[keys.length - 1];
obj[lastKey] = value;
this.updateElement(this.selectedElement);
}
else {
this.setValueByPath(key, value); // Fallback for non-Table elements, if applicable
}
}
onRequiredChange(value) {
if (this.selectedElement) {
let label = this.selectedElement.label ? this.selectedElement.label.replace(/\s*\*+$/, '') : 'Label';
if (value) {
label = `${label} *`;
}
this.updateProperty('label', label);
}
}
// Toggle for Sub Questions (Each prop has its own state)
toggleSubQuestion(prop) {
prop.isExpanded = !prop.isExpanded;
}
// Separate Toggle for Style Section
isStyleExpanded = false;
toggleStyleSection() {
this.isStyleExpanded = !this.isStyleExpanded;
}
getProperties() {
if (!this.selectedElement)
return null;
// AP-10MAR25 Retrieve the latest pdf data
this.pdf = this.pdfDesignerService.getBook();
// AP-10MAR25 If the selected element is a 'Header', return its properties
if (this.selectedElement?.type === 'Header') {
return this.elementProperties['Header'];
}
if (this.selectedElement?.type === 'Table') {
if (this.selectColumn !== '' && this.selectColumn !== null) {
return this.elementProperties['TableColumn'];
}
}
return this.elementProperties[this.selectedElement?.type];
}
// AP-28MAR25 Add an option with a unique UUID
addOption(options) {
const unique_id = uuidv4();
options.push({ id: unique_id, value: '' });
}
// AP-28MAR25 Function to remove an option based on its unique UUID
removeOption(options, id) {
const index = options.findIndex(option => option.id === id);
if (index !== -1) {
options.splice(index, 1);
}
}
handleButtonClick() {
this.formButtonHandler.emit(this.pdfDesignerService.downloadElement());
}
// SKS13MAR25 active tab select
setActiveTab(tab) {
this.activeTab = tab;
}
// SKS13MAR25 table property save
onSave() {
// console.log('Saving data:');
}
// SKS13MAR25 table property reset
onCancel() {
// console.log('Operation cancelled');
}
updateProperties(elementType) {
// Reset alignment and styles if switching elements
this.selectedAlign = 'align-left';
this.selectedStyles = [];
// Fetch the properties of the selected element type
const properties = this.getProperties();
if (properties) {
// Make sure the properties are dynamically updated
}
}
onAlignSelect(value) {
if (this.selectedElement) {
this.selectedElement.textAlign = value;
}
}
onStyleSelect(value) {
if (!this.selectedElement)
return;
// Initialize styles array if it doesn't exist
this.selectedElement.styles = this.selectedElement.styles || [];
// Ensure only one style is selected at a time
this.selectedElement.styles = [value];
}
isStyleActive(value) {
return this.selectedElement?.styles?.includes(value) || false;
}
getValueByPath(path) {
return path?.split('.').reduce((obj, key) => obj?.[key] ?? '', this.selectedElement);
}
onToggleChange(path, event) {
const checked = event.target.checked;
this.setValueByPath(path, checked);
this.updateElement(this.selectedElement);
}
validateInput(value, type) {
if (type === 'placeholder') {
const regex = /^[a-zA-Z0-9\s]*$/;
if (!regex.test(value)) {
this.errorMessage = 'Only letters and numbers are allowed';
return false;
}
}
this.errorMessage = '';
return true;
}
setValueByPath(path, value) {
if (value === 'question') {
if (!this.validateInput(value, value)) {
}
}
const keys = path.split('.');
let obj = this.selectedElement;
keys.forEach((key, index) => {
if (!obj[key]) {
// Check if the next key is a number (array index)
const nextKey = keys[index + 1];
obj[key] = isNaN(Number(nextKey)) ? {} : [];
}
if (index === keys.length - 1) {
// Convert value to number for fontSize
if (key === 'fontSize') {
obj[key] = parseInt(value, 10) || 14; // Default to 14 if invalid
}
else {
obj[key] = value; // Assign value to last key
}
}
else {
obj = obj[key]; // Move deeper
}
});
this.pdfDesignerService.elementUpdate(this.selectedElement);
}
getStyleKeys() {
if (!this.selectedElement || !this.selectedElement.style || typeof this.selectedElement.style !== 'object') {
return [];
}
return Object.keys(this.selectedElement.style);
}
// SKS19MAR25 update element in servies
updateElement(element) {
this.pdfDesignerService.elementUpdate(element);
if (this.selectedElement?.type === 'Table' && this.selectColumn) {
const foundItem = this.selectedElement['fieldsMeta'].find(item => item['uniqueIdentifier'] === this.selectColumn);
this.pdfDesignerService.setSelectedTableElement(this.selectedElementIndex, { column: foundItem?.apiName || null });
}
}
// SKS19MAR25 get value from array
getValueByArrayPath(targetArrayPath, targetArrayKey, selectColumn, keyPath) {
const targetArray = this.getDataByPath(targetArrayPath);
if (!Array.isArray(targetArray))
return '';
const foundItem = targetArray.find(item => item[targetArrayKey] === selectColumn);
return foundItem ? keyPath.split('.').reduce((obj, key) => obj?.[key], foundItem) : '';
}
//SKS19MAR25 Function to update a value in an array dynamically
updateValueByArrayPath(targetArrayPath, targetArrayKey, selectColumn, keyPath, event) {
const targetArray = this.getDataByPath(targetArrayPath);
// console.log("targetArray", targetArray, "targetArrayKey", targetArrayKey, "selectColumn", selectColumn, "keyPath", keyPath, "event", event)
if (!Array.isArray(targetArray))
return;
// Find the object that matches selectColumn
let foundItem = targetArray.find(item => item[targetArrayKey] === selectColumn);
// If the item does not exist, create and add it
if (!foundItem) {
foundItem = { [targetArrayKey]: selectColumn }; // Ensure the key exists
targetArray.push(foundItem);
}
// Traverse and set the value
const keys = keyPath.split('.');
let obj = foundItem;
for (let i = 0; i < keys.length - 1; i++) {
const key = keys[i];
if (!obj[key])
obj[key] = {}; // Initialize missing objects
obj = obj[key];
}
// Assign the value based on input type
const lastKey = keys[keys.length - 1];
const inputElement = event.target;
obj[lastKey] = inputElement?.type === 'checkbox' ? inputElement.checked : inputElement.value;
if (keyPath === 'summaryColumn') {
if (obj['summaryRow'] === true) {
obj['summaryRow'] = false;
}
if (inputElement.checked === true) {
obj['fldType'] = 'calculation';
}
else {
obj['fldType'] = 'Text';
}
}
if (keyPath === 'summaryRow') {
//this.pdfDesignerService.setSummaryRowData(obj);
if (obj['summaryColumn'] === true) {
obj['summaryColumn'] = false;
}
if (inputElement.checked === true) {
obj['fldType'] = 'calculation';
}
else {
obj['fldType'] = 'Text';
}
}
this.updateElement(this.selectedElement);
}
getDataByPath(path) {
return path.split('.').reduce((obj, key) => obj?.[key], this.selectedElement);
}
// SKS25MAR25 image edit functions
flipHorizontal() {
this.transform = {
...this.transform,
flipH: !this.transform.flipH
};
}
flipVertical() {
this.transform = {
...this.transform,
flipV: !this.transform.flipV
};
}
resetImage() {
this.canvasRotation = 0;
this.cropper = undefined;
this.transform = {
translateUnit: 'px',
scale: 1,
rotate: 0,
flipH: false,
flipV: false,
translateH: 0,
translateV: 0
};
}
zoomOut() {
this.transform = {
...this.transform,
scale: this.transform.scale - .1
};
}
zoomIn() {
this.transform = {
...this.transform,
scale: this.transform.scale + .1
};
}
rotateLeft() {
this.loading = true;
setTimeout(() => {
this.canvasRotation--;
this.flipAfterRotate();
});
}
rotateRight() {
this.loading = true;
setTimeout(() => {
this.canvasRotation++;
this.flipAfterRotate();
});
}
moveLeft() {
this.transform = {
...this.transform,
translateH: this.transform.translateH - 1
};
}
moveRight() {
this.transform = {
...this.transform,
translateH: this.transform.translateH + 1
};
}
moveDown() {
this.transform = {
...this.transform,
translateV: this.transform.translateV + 1
};
}
moveUp() {
this.transform = {
...this.transform,
translateV: this.transform.translateV - 1
};
}
flipAfterRotate() {
const flippedH = this.transform.flipH;
const flippedV = this.transform.flipV;
this.transform = {
...this.transform,
flipH: flippedV,
flipV: flippedH,
translateH: 0,
translateV: 0
};
}
async imageCropped(event) {
try {
const base64 = await this.convertBlobToBase64(event.objectUrl);
this.selectedElement.imageData = base64;
await this.pdfDesignerService.elementUpdate(this.selectedElement);
// console.log('CROPPED', event);
}
catch (error) {
console.error("Error in imageCropped:", error);
}
}
cropperReady(sourceImageDimensions) {
// console.log('Cropper ready', sourceImageDimensions);
this.loading = false;
}
// SKS25MAR25 blob to base 64 converter
convertBlobToBase64(objectUrl) {
return fetch(objectUrl)
.then(response => response.blob())
.then(blob => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
});
}
// SKS28MAR25 qb pdf update in pdf element
childEventCapture(event) {
console.log("childEventCapture", event);
this.selectedElement.pdfReference = Object.keys(event.valueObj)[0];
this.selectedElement.pdfReferenceQuestions = event.valueObj;
this.pdfDesignerService.elementUpdate(this.selectedElement);
}
// SKS28MAR25 pdf search dropdown emit
linkToggleDropdown(event) {
event.stopPropagation();
this.isLinkDropdownOpen = !this.isLinkDropdownOpen;
}
// SKS28MAR25 pdf search dropdown close
onClickOutside(event) {
if (this.dropdown && !this.dropdown.nativeElement.contains(event.target)) {
this.isLinkDropdownOpen = false;
}
}
// AP-28MAR25 When drag starts, store the index
onDragStart(event, id) {
this.draggedId = id;
event.dataTransfer.effectAllowed = "move";
}
// AP-28MAR25 Prevent default behavior to allow drop
onDragOver(event) {
event.preventDefault();
}
// AP-28MAR25 Swap the dragged item with the dropped position
onDrop(event, key) {
event.preventDefault();
const targetId = event.target.closest(".option-items")?.getAttribute("data-id");
if (this.draggedId && targetId && this.draggedId !== targetId) {
const options = this.selectedElement[key];
[options[this.draggedId], options[targetId]] = [options[targetId], options[this.draggedId]];
// Find the indexes of the dragged and target options
const draggedIndex = options.findIndex(option => option.id === this.draggedId);
const targetIndex = options.findIndex(option => option.id === targetId);
// Swap the items
if (draggedIndex !== -1 && targetIndex !== -1) {
[options[draggedIndex], options[targetIndex]] = [options[targetIndex], options[draggedIndex]];
}
}
this.draggedId = null;
}
onWidthSelect(value) {
if (value === '*' || value === 'auto') {
this.setValueByPath('width', value);
}
else if (this.selectedElement?.width === '*' || this.selectedElement?.width === 'auto') {
// Default to 100 if switching from * or auto to custom
this.setValueByPath('width', 100);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PdfPropertiesComponent, deps: [{ token: i1.HttpClient }, { token: i2.PdfDesignerService }, { token: i3.TemplateService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties