UNPKG

@rangertechnologies/ngnxt

Version:

This library was used for creating dymanic UI based on the input JSON/data

1,619 lines 53.4 kB
import { HttpClient } from '@angular/common/http'; import { ElementRef, EventEmitter, OnInit } from '@angular/core'; import { FormBuilderService } from '../../../services/form-builder.service'; import { CropperPosition, Dimensions, ImageTransform } from '../../../components/image-cropper/interfaces'; import { TemplateService } from '../../../services/template.service'; import * as i0 from "@angular/core"; export declare class PropertiesComponent implements OnInit { private http; private formBuilderService; private templateService; formButtonHandler: EventEmitter<any>; templateSaveHandler: EventEmitter<any>; selectedOption: string; selectedElementIndex: number; selectedElementType: string; selectedAlign: string; selectedStyles: string[]; errorMessage: string; selectedElement: any; headerSelect: boolean; bookId: any; book: any; activeTab: string; selectColumn: any; transform: ImageTransform; canvasRotation: number; cropper?: CropperPosition; loading: boolean; cropperMaxHeight: number; cropperMaxWidth: number; cropperMinHeight: number; cropperMinWidth: number; cropperStaticWidth: number; cropperStaticHeight: number; aspectRatio: number; roundCropper: boolean; imageChangedEvent: Event | null; alignImage: "center"; bookSubtext: { endpoint: string; variable: any; field: string[]; defaultField: string; }; isLinkDropdownOpen: boolean; templateSelected: boolean; dropdown: ElementRef; draggedId: string | null; formElements: any[]; unique_id: string; selectedTemplate: any; elementProperties: { Header: { elementProps: { label: string; placeholder: string; type: string; key: string; }[]; }; Text: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Book: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: any[]; }; Line: { elementProps: ({ label: string; type: string; key: string; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; placeholder: string; options?: undefined; } | { label: string; type: string; key: string; options: string[]; placeholder?: undefined; })[]; fieldProps: any[]; }; Space: { elementProps: { label: string; type: string; key: string; }[]; fieldProps: any[]; }; Boolean: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; }; Checkbox: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; addOptionLabel?: undefined; icon?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; addOptionLabel?: undefined; icon?: undefined; subQuestion?: undefined; } | { label: string; type: string; key: string; addOptionLabel: string; icon: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; addOptionLabel?: undefined; icon?: undefined; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Calendar: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Date: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Time: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; options: { label: string; value: string; }[]; placeholder?: undefined; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; options?: undefined; })[]; }; DateTime: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Email: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Table: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; TableColumn: { elementProps: ({ label: string; placeholder: string; type: string; targetArray: string; targetArrayKey: string; key: string; subQuestion?: undefined; children?: undefined; } | { label: string; placeholder: string; type: string; targetArray: string; targetArrayKey: string; key: string; subQuestion: { label: string; placeholder: string; type: string; targetArray: string; targetArrayKey: string; key: string; }[]; children?: undefined; } | { label: string; placeholder: string; type: string; key: string; targetArray?: undefined; targetArrayKey?: undefined; subQuestion?: undefined; children?: undefined; } | { label: string; type: string; key: string; children: { label: string; type: string; key: string; }[]; placeholder?: undefined; targetArray?: undefined; targetArrayKey?: undefined; subQuestion?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; targetArray?: undefined; targetArrayKey?: undefined; subQuestion?: undefined; children?: undefined; })[]; fieldProps: ({ label: string; placeholder: string; type: string; key: string; targetArray?: undefined; targetArrayKey?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; targetArray?: undefined; targetArrayKey?: undefined; } | { label: string; type: string; targetArray: string; targetArrayKey: string; key: string; placeholder?: undefined; })[]; appearance: ({ label: string; placeholder: string; type: string; key: string; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; }; File: { elementProps: ({ label: string; placeholder: string; type: string; key: string; options?: undefined; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; options?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; options: { label: string; value: string; extensions: string[]; }[]; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; List: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; TextArea: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; RichTextArea: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Number: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Dropdown: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; addOptionLabel?: undefined; icon?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; addOptionLabel?: undefined; icon?: undefined; subQuestion?: undefined; } | { label: string; type: string; key: string; addOptionLabel: string; icon: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; addOptionLabel?: undefined; icon?: undefined; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Image: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Radio: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; addOptionLabel?: undefined; icon?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; addOptionLabel?: undefined; icon?: undefined; subQuestion?: undefined; } | { label: string; type: string; key: string; addOptionLabel: string; icon: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; addOptionLabel?: undefined; icon?: undefined; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; defaultValue: boolean; placeholder?: undefined; required?: undefined; options?: undefined; })[]; }; Label: { elementProps: ({ label: string; placeholder: string; type: string; key: string; } | { key: string; label?: undefined; placeholder?: undefined; type?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; fieldProps: ({ label: string; type: string; key: string; placeholder?: undefined; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion?: undefined; } | { label: string; placeholder: string; type: string; key: string; subQuestion: { label: string; placeholder: string; type: string; key: string; }[]; })[]; appearance: ({ label: string; type: string; key: string; placeholder: string; required: boolean; options: string[]; defaultValue?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; placeholder?: undefined; options?: undefined; } | { label: string; type: string; key: string; defaultValue: string; required: boolean; options: { label: string; value: string; }[]; placeholder?: undefined; } | { lab