UNPKG

@rangertechnologies/ngnxt

Version:

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

1,561 lines (1,560 loc) 48.9 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 * as i0 from "@angular/core"; export declare class PropertiesComponent implements OnInit { private http; private formBuilderService; formButtonHandler: 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; dropdown: ElementRef; draggedId: string | null; elementProperties: { Header: { elementProps: { label: string; placeholder: string; type: string; key: string; }[]; }; Text: { 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; }[]; })[]; 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; } | { 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; } | { 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; } | { 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; } | { 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; } | { 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; })[]; }; DateTime: { 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; }[]; })[]; 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; } | { 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; children?: undefined; } | { label: string; type: string; key: string; children: { label: string; type: string; key: string; }[]; placeholder?: undefined; } | { label: string; type: string; key: string; placeholder?: undefined; children?: undefined; })[]; fieldProps: ({ label: string; placeholder: string; type: string; key: string; } | { label: string; type: string; key: string; placeholder?: undefined; })[]; appearance: ({ label: string; placeholder: string; type: string; key: string; } | { label: string; type: string; key: string; placeholder?: 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; } | { 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; } | { 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; } | { 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; } | { 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; } | { 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; } | { 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; } | { 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; } | { 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; } | { 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; })[]; }; }; constructor(http: HttpClient, formBuilderService: FormBuilderService); ngOnInit(): void; updateTitle(event: any): void; validateInput(value: string, type: string): boolean; get fieldAsString(): string; updateField(value: string): void; get filteredColumns(): any[]; onCheckboxChange(targetArrayPath: any, targetArrayKey: any, key: any, apiName: string, isChecked: boolean): void; updateProperty(key: string, value: any): void; onRadioChange(targetArrayPath: any, targetArrayKey: any, key: any, value: any): void; onRequiredChange(value: boolean): void; toggleSubQuestion(prop: any): void; isStyleExpanded: boolean; toggleStyleSection(): void; getProperties(): any; addOption(options: any[]): void; removeOption(options: any[], id: string): void; handleButtonClick(): void; setActiveTab(tab: string): void; onSave(): void; onCancel(): void; updateProperties(elementType: string): void; onAlignSelect(value: string): void; onStyleSelect(value: string): void; isStyleActive(value: string): boolean; getValueByPath(path: string): any; onToggleChange(path: string, event: Event): void; setValueByPath(path: string, value: any): void; getStyleKeys(): string[]; updateElement(element: any): void; getValueByArrayPath(targetArrayPath: any, targetArrayKey: string, selectColumn: string, keyPath: string): any; updateValueByArrayPath(targetArrayPath: any, targetArrayKey: string, selectColumn: string, keyPath: string, event: Event): void; getDataByPath(path: string): any; flipHorizontal(): void; flipVertical(): void; resetImage(): void; zoomOut(): void; zoomIn(): void; rotateLeft(): void; rotateRight(): void; moveLeft(): void; moveRight(): void; moveDown(): void; moveUp(): void; private flipAfterRotate; imageCropped(event: any): Promise<void>; cropperReady(sourceImageDimensions: Dimensions): void; convertBlobToBase64(objectUrl: string): Promise<string>; childEventCapture(event: any): void; linkToggleDropdown(event: Event): void; onClickOutside(event: Event): void; onDragStart(event: DragEvent, id: string): void; onDragOver(event: DragEvent): void; onDrop(event: DragEvent, key: string): void; static ɵfac: i0.ɵɵFactoryDeclaration<PropertiesComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<PropertiesComponent, "app-properties", never, { "selectedElementType": { "alias": "selectedElementType"; "required": false; }; }, { "formButtonHandler": "formButtonHandler"; }, never, never, false, never>; }