@rangertechnologies/ngnxt/lib/pages/builder/properties/properties.component.d.ts

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

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;
    element: any;
    from: string;
    columns: any;
    createElementConfig(config?: {
        customElementProps?: any[];
        customFieldProps?: any[];
        customAppearanceProps?: any[];
    }): {
        elementProps: any[];
        fieldProps: any[];
        appearance: any[];
    };
    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;
            }[];
        };
        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[];
        };
        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;
            } | {
                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;
                }[];
            } | {
                label: string;
                placeholder: string;
                type: string;
                key: string;
                targetArray?: undefined;
                targetArrayKey?: undefined;
                subQuestion?: undefined;
            })[];
            fieldProps: {
                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;
            })[];
        };
        ListColumn: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        DropdownColumn: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        DateColumn: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Checkbox: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Dropdown: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Radio: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Text: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Calendar: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Date: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Time: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        DateTime: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Email: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Book: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        List: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        TextArea: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        RichTextArea: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Number: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Image: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Label: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Boolean: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        File: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
        Icon: {
            elementProps: any[];
            fieldProps: any[];
            appearance: any[];
        };
    };
    constructor(http: HttpClient, formBuilderService: FormBuilderService, templateService: TemplateService);
    handleTemplateSelection(event: any): void;
    duplicateField(element: any): void;
    saveData(): void;
    ngOnInit(): void;
    addNewButton(): void;
    removeButton(btn: any): void;
    onButtonPropertyChange(index: number, key: string, value: any): 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;
    handleTemplateSave(): 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;
    isAnotherIdSelected(): boolean;
    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; }; "templateSelected": { "alias": "templateSelected"; "required": false; }; }, { "formButtonHandler": "formButtonHandler"; "templateSaveHandler": "templateSaveHandler"; }, never, never, true, never>;
}