@skyworx/dynamic-ui 1.0.6 → 1.0.8

package/dist/types/types/form.d.ts

@@ -0,0 +1,797 @@
+export type FieldComponent = "DCodeTextField" | "DCodeTextarea" | "DCodeTextArea" | "DCodeAutoComplete" | "DCodeSelect" | "DCodeCheckbox" | "DCodeRadio" | "DCodeRadioCustom" | "DCodeCardCheckboxList" | "DCodeCardList" | "DCodeDatePicker" | "DCodeDatepicker" | "DCodeSwitch" | "DCodeImageField" | "DCodeIconDropdown" | "DCodeOtpInput" | "DCodeOTPInput" | "DCodeOtp" | "OtpInput" | "DCodeUploadFile" | "DCodeFilePicker" | "FilePicker" | "DCodeTimePicker" | "DCodeInfiniteAutoComplete" | "DCodeCurrencyField" | "DCodeDialog" | "DCodeDialogCloseBtn" | "DCodeDropzone" | "DCodeFileField" | "DCodeFileResult" | "DCodeImageCropperDialog" | "DCodeImageResult" | "DCodeLabel" | "DCodeMultiSelect" | "DCodeProgressBar" | "DCodeTimelineWithIcons" | "DCodeButton" | "DCodeButtonGroup" | "DCodeTreePermissions" | "DCodeCardCheckboxList" | "DCodePermissionMenu" | "DCodeBeforeAfter" | "DCodeListLabels" | "DCodeFieldDiff" | "DCodePdfViewer" | "DCodeRobotList" | string;
+export type ButtonVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "tonal" | "elevated" | string;
+export type ColumnSize = number | "FULL" | "HALF" | "THIRD" | "QUARTER" | "TWO-THIRDS" | "THREE-QUARTERS" | string;
+export interface LogicRule {
+    visible?: boolean | string | Record<string, any>;
+    visibleRule?: string | Record<string, any> | boolean;
+    disabled?: boolean | string | Record<string, any>;
+    disabledRule?: string | Record<string, any>;
+    required?: boolean | string | Record<string, any>;
+    requiredRule?: string | Record<string, any>;
+    calculateRule?: Record<string, any>;
+    optionsFilterRule?: Array<{
+        condition: Record<string, any>;
+        values: any[];
+    }>;
+    labelingRule?: Array<{
+        condition: Record<string, any>;
+        labelID: string;
+        labelEN: string;
+        labelKR?: string;
+        placeholderID?: string;
+        placeholderEN?: string;
+        placeholderKR?: string;
+    }>;
+    lengthRule?: Array<{
+        condition: Record<string, any>;
+        minLength?: number | null;
+        maxLength?: number | null;
+    }>;
+    rangeRule?: {
+        condition: Record<string, any>;
+        labelFromID?: string;
+        labelFromEN?: string;
+        labelFromKR?: string;
+        labelToID?: string;
+        labelToEN?: string;
+        labelToKR?: string;
+        enforceOrder?: boolean;
+        /** Per bound. Absent or non-positive means unlimited. */
+        maxLengthFrom?: number | null;
+        maxLengthTo?: number | null;
+    };
+    messageKey?: string;
+    message?: string;
+}
+export interface EndpointConfig {
+    apiMethod?: string;
+    apiUrl?: string;
+    socket?: string;
+    keyParam?: string[];
+    model?: string;
+    dataSource?: "api" | "socket";
+    byPassMode?: boolean;
+}
+export interface FieldProps {
+    labelID?: string;
+    labelEN?: string;
+    labelKR?: string;
+    placeholderID?: string;
+    placeholderEN?: string;
+    placeholderKR?: string;
+    valueType?: string | null;
+    required?: boolean | null;
+    minLength?: number | null;
+    maxLength?: number | null;
+    minValue?: number | null;
+    maxValue?: number | null;
+    regex?: string | null;
+    regexMessage?: string | null;
+    apiModule?: string | null;
+    apiAction?: string | null;
+    itemTitle?: string | null;
+    itemValue?: string | null;
+    returnObject?: boolean | null;
+    clearable?: boolean | null;
+    typeFile?: string | null;
+    sizeFile?: number | null;
+    disablePast?: boolean;
+    range?: boolean;
+    autoRangeDays?: number;
+    keyRedirect?: boolean;
+    route?: string;
+    path?: string;
+    endpoint?: EndpointConfig | null;
+    endpointComponent?: EndpointConfig | null;
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    descriptionKR?: string;
+    name?: string;
+    variant?: string;
+    bgColor?: string;
+    color?: string;
+    icon?: string | null;
+    borderColor?: string;
+    rounded?: string;
+    borderStyle?: string;
+    [key: string]: any;
+}
+export interface FormFieldDefinition {
+    id: string;
+    key: string;
+    component: FieldComponent;
+    model: string;
+    seq: number;
+    column: ColumnSize;
+    isVisible?: boolean;
+    props?: FieldProps;
+    propsFieldGlobal?: FieldProps;
+    propsFieldCustom?: FieldProps;
+    propsFilters?: FieldProps;
+    logic?: LogicRule;
+    events?: Record<string, any>;
+}
+export interface ActionConfirmMessage {
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    messageID?: string;
+    messageEN?: string;
+    messageKR?: string;
+}
+export interface DialogConfig {
+    key?: string;
+    code?: string;
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    descriptionKR?: string;
+    layoutColumns?: ColumnSize;
+}
+export interface ActionProps {
+    key?: string;
+    icon?: string;
+    component?: string;
+    type?: string;
+    bgColor?: string;
+    labelID?: string;
+    labelEN?: string;
+    labelKR?: string;
+    variant?: string;
+    keyRedirect?: boolean;
+    route?: string;
+    path?: string;
+    rounded?: string;
+    borderStyle?: string;
+    borderColor?: string;
+    endpointPropAction?: EndpointConfig;
+    [key: string]: any;
+}
+export interface ActionGlobalProps {
+    align?: "left" | "center" | "right" | string;
+}
+export interface ActionDefinition {
+    id?: string;
+    key?: string;
+    label?: ActionLabel;
+    props?: Record<string, any>;
+    permission?: string;
+    openDialog?: boolean;
+    dialogConfig?: DialogConfig;
+    requireConfirm?: boolean;
+    propsActionGlobal?: ActionProps;
+    propsActionCustom?: ActionProps;
+    propCustomMessage?: ActionConfirmMessage | string;
+    propCustomCondition?: any[];
+    fieldActionGlobal?: FormFieldDefinition[];
+    fieldActionCustom?: FormFieldDefinition[];
+    field?: FormFieldDefinition[];
+    fields?: FormFieldDefinition[];
+    disabledWhen?: string;
+    type?: string;
+    variant?: string;
+    bgColor?: string;
+    icon?: string;
+    route?: string;
+    path?: string;
+    class?: string;
+    model?: string;
+    rounded?: string;
+    borderStyle?: string;
+    borderColor?: string;
+    labelID?: string;
+    labelEN?: string;
+    labelKR?: string;
+    triggerNavigation?: {
+        targetSection: string;
+        hiddenRules: Record<string, boolean | any>;
+        condition?: any;
+        enableBackButton?: boolean;
+        backButtonPosition?: 'header' | 'footer' | 'both';
+        backButtonConfig?: {
+            labelEN?: string;
+            labelID?: string;
+            labelKR?: string;
+            icon?: string;
+            variant?: string;
+            position?: 'left' | 'right';
+        };
+        preserveData?: boolean;
+    };
+}
+export interface TableHeaderCustom {
+    type?: "badge" | "action" | "text" | string;
+    keyCheckbox?: string;
+    keyPayload?: string;
+    propsCustom?: Array<{
+        value: string;
+        labelID: string;
+        labelEN: string;
+        labelKR?: string;
+        color?: string;
+        variant?: string;
+    }>;
+    actionCustom?: ActionDefinition[];
+    action?: ActionDefinition[];
+    conditionBadge?: Array<{
+        value: string;
+        labelID: string;
+        labelEN: string;
+        labelKR?: string;
+        color: string;
+        bgColor: string;
+        icon: string;
+    }>;
+}
+export interface TableHeader {
+    key: string;
+    modelKey?: string;
+    labelID?: string;
+    labelEN?: string;
+    labelKR?: string;
+    width?: string;
+    align?: "left" | "center" | "right";
+    isHidden?: boolean;
+    custom?: TableHeaderCustom | null;
+}
+export interface PropsForm {
+    key: string;
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    descriptionKR?: string;
+    icon?: string;
+    layoutColumns?: ColumnSize;
+    modelDatatable?: string;
+    fields: FormFieldDefinition[];
+    endpointForm?: EndpointConfig;
+    actionSection?: ActionDefinition[];
+    logic?: SectionLogic;
+}
+export interface PropsTable {
+    key: string;
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    descriptionKR?: string;
+    layoutColumns?: ColumnSize;
+    modelDatatable?: string;
+    fields?: FormFieldDefinition[];
+    endpointTable?: EndpointConfig;
+    actionTableGlobal?: ActionDefinition[];
+    headers?: TableHeader[];
+    filters?: FormFieldDefinition[];
+    pagination?: boolean;
+    logic?: SectionLogic;
+}
+export interface WizardSection {
+    layoutColumns?: ColumnSize;
+    endpointStep?: EndpointConfig;
+    fields?: FormFieldDefinition[];
+    propsDataTableWizard?: PropsTable;
+}
+export interface WizardStep {
+    key: string;
+    code?: string;
+    type?: string;
+    layoutColumns?: ColumnSize;
+    disabled?: boolean;
+    endpointStep?: EndpointConfig;
+    propsComponent?: {
+        titleID?: string;
+        titleEN?: string;
+        titleKR?: string;
+        descriptionID?: string;
+        descriptionEN?: string;
+        descriptionKR?: string;
+        isSubmit?: boolean;
+        icon?: string;
+        actionComponent?: ActionDefinition[];
+        [key: string]: any;
+    };
+    propsDataTableWizard?: PropsTable;
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    descriptionKR?: string;
+    isSubmit?: boolean;
+    icon?: string;
+    actionComponent?: ActionDefinition[];
+    sectionsWizard?: WizardSection;
+    fields?: (FormFieldDefinition | FormFieldBuilder)[];
+    isDataTable?: boolean;
+}
+export interface PropsWizard {
+    code?: string;
+    key: string;
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    descriptionKR?: string;
+    isWizard?: boolean;
+    isVertical?: boolean;
+    isDataTable?: boolean;
+    typeWizard?: string;
+    propsSteps: WizardStep[];
+    logic?: SectionLogic;
+}
+export interface SectionDefinition {
+    id: string;
+    type: "FORM" | "TABLE" | "WIZARD" | "CARD" | "BEFOREAFTER" | string;
+    propsForm?: PropsForm;
+    propsTable?: PropsTable;
+    propsWizard?: PropsWizard;
+    props?: any;
+}
+export interface FormSchema {
+    id?: string;
+    idTokenCore?: string;
+    code?: string;
+    titleID?: string;
+    titleEN?: string;
+    titleKR?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    descriptionKR?: string;
+    actionGlobal?: ActionDefinition[];
+    actionGlobalProps?: ActionGlobalProps;
+    actions?: ActionDefinition[];
+    payload?: Record<string, any> | null;
+    fieldMapping?: Record<string, string>;
+    sections: SectionDefinition[];
+    fields?: FormFieldDefinition[];
+    endpointGlobal?: EndpointConfig;
+    endpointGenerator?: string;
+    ui?: any;
+}
+export type FormField = FormFieldDefinition;
+export type FormAction = ActionDefinition;
+export type WizardStepDefinition = WizardStep;
+export type WizardTabDefinition = WizardStep;
+export type FieldDefinition = FormFieldDefinition;
+export type ButtonType = "BUTTON" | "SUBMIT" | "RESET";
+export type FieldLogic = LogicRule;
+export type FieldOverrides = Record<string, {
+    visible?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+}>;
+export type ActionLabel = string | {
+    loading?: string;
+    edit?: string;
+    create?: string;
+} | Array<{
+    name: string;
+}>;
+export type SectionType = "CARD" | "TABLE" | "FORM" | "BEFOREAFTER" | "WIZARD";
+export interface SectionLogic {
+    visible?: boolean | string | Record<string, any>;
+    visibleRule?: string | Record<string, any>;
+}
+export type FormSectionProps = {
+    key: string;
+    titleID?: string;
+    titleEN?: string;
+    icon?: string | null;
+    layoutColumns?: ColumnSize;
+    endpoint?: any | null;
+    headers?: any | null;
+    pagination?: boolean;
+    fields: FieldDefinition[];
+    logic?: SectionLogic;
+};
+export type TableSectionProps = {
+    titleID?: string;
+    titleEN?: string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    endpoint?: {
+        apiModule?: string | null;
+        apiAction?: string | null;
+        apiMethod?: string;
+        apiUrl?: string;
+        dataSource?: "api" | "socket";
+        socket?: string;
+    } | null;
+    enableDialog?: boolean;
+    pagination?: boolean;
+    action?: ActionDefinition[];
+    headers?: TableHeader[];
+    columns?: any[];
+    filter?: FieldDefinition[];
+    key?: string;
+    logic?: SectionLogic;
+};
+export type BeforeAfterSectionProps = {
+    key: string;
+    beforeKey?: string;
+    afterKey?: string;
+    pagination?: boolean;
+    logic?: SectionLogic;
+};
+export interface FormFieldProps {
+    labelID: string;
+    labelEN: string;
+    placeholderID: string;
+    placeholderEN: string;
+    valueType?: string | null;
+    required?: boolean | null;
+    minLength?: number | null;
+    maxLength?: number | null;
+    minValue?: number | null;
+    maxValue?: number | null;
+    regex?: string | null;
+    regexMessage?: string | null;
+    apiModule?: string | null;
+    apiAction?: string | null;
+    itemTitle?: string | null;
+    itemValue?: string | null;
+    returnObject?: boolean | null;
+    clearable?: boolean | null;
+    typeFile?: string | null;
+    sizeFile?: number | null;
+    endpoint?: {
+        apiModule?: string | null;
+        apiAction?: string | null;
+        apiMethod?: string;
+        apiUrl?: string;
+        dataSource?: "api" | "socket";
+        socket?: string;
+        keyParam?: string[];
+    } | null;
+    [key: string]: any;
+}
+export interface FormFieldLogic {
+    key?: string;
+    requiredRule?: string | Record<string, any>;
+    visibleRule?: string | Record<string, any>;
+    disabledRule?: string | Record<string, any>;
+    messageKey?: string;
+    message?: string;
+}
+export interface SectionHeader {
+    key: string;
+    labelID?: string;
+    labelEN?: string;
+    width?: string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+    custom?: {
+        type: "badge" | "action" | "text";
+        props?: any;
+        propsCustom?: any;
+        conditionBadge?: any[];
+        action?: SectionAction[];
+        actionCustom?: SectionAction[];
+    } | null;
+}
+export interface SectionAction {
+    key: string;
+    label?: ActionLabel;
+    labelID?: string;
+    labelEN?: string;
+    type?: "BUTTON" | "SUBMIT" | "RESET";
+    variant?: string;
+    bgColor?: string;
+    component?: string;
+    disabledWhen?: string;
+    permission?: string;
+    openDialog?: boolean;
+    field?: FormField[];
+    props?: Record<string, any>;
+    route?: string;
+    path?: string;
+    propsActionGlobal?: Record<string, any>;
+    fieldActionGlobal?: FormField[];
+    fieldActionCustom?: FormField[];
+    requireConfirm?: boolean;
+    propCustomMessage?: string;
+    model?: string;
+    propCustomCondition?: any[];
+    rounded?: string;
+    borderStyle?: string;
+    borderColor?: string;
+}
+export interface FormFieldBuilderProps {
+    labelID: string;
+    labelEN: string;
+    placeholderID: string;
+    placeholderEN: string;
+    valueType?: string | null;
+    required?: boolean | null;
+    minLength?: number | null;
+    maxLength?: number | null;
+    minValue?: number | null;
+    maxValue?: number | null;
+    regex?: string | null;
+    regexMessage?: string | null;
+    apiModule?: string | null;
+    apiAction?: string | null;
+    itemTitle?: string | null;
+    itemValue?: string | null;
+    returnObject?: boolean | null;
+    clearable?: boolean | null;
+    typeFile?: string | null;
+    sizeFile?: number | null;
+    endpoint?: {
+        apiModule?: string | null;
+        apiAction?: string | null;
+        apiMethod?: string;
+        apiUrl?: string;
+        dataSource?: "api" | "socket";
+        socket?: string;
+        keyParam?: string[];
+    } | null;
+    tabs?: WizardTabDefinition[];
+    [key: string]: any;
+}
+export interface FormFieldBuilderLogic {
+    key?: string;
+    requiredRule?: string | Record<string, any>;
+    visibleRule?: string | Record<string, any> | boolean;
+    disabledRule?: string | Record<string, any>;
+    optionsFilterRule?: Array<{
+        condition: Record<string, any>;
+        values: any[];
+    }>;
+    labelingRule?: Array<{
+        condition: Record<string, any>;
+        labelID: string;
+        labelEN: string;
+        placeholderID?: string;
+        placeholderEN?: string;
+    }>;
+    lengthRule?: Array<{
+        condition: Record<string, any>;
+        minLength?: number | null;
+        maxLength?: number | null;
+    }>;
+    messageKey?: string;
+    message?: string;
+    [key: string]: any;
+}
+export interface FormFieldBuilder {
+    id: string;
+    key: string;
+    component: string;
+    model: string;
+    seq: number;
+    column: ColumnSize;
+    props: FormFieldBuilderProps;
+    logic?: FormFieldBuilderLogic;
+    [key: string]: any;
+}
+export interface SectionHeaderBuilder {
+    key: string;
+    labelID?: string;
+    labelEN?: string;
+    width?: string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+    custom?: {
+        type: "badge" | "action" | "text";
+        props?: any;
+        action?: SectionActionBuilder[];
+    } | null;
+}
+export interface SectionActionBuilder {
+    id?: string;
+    key: string;
+    label?: string;
+    labelID?: string;
+    labelEN?: string;
+    type?: "BUTTON" | "SUBMIT" | "RESET" | string;
+    variant?: string;
+    bgColor?: string;
+    component?: string;
+    showOn?: "ALWAYS" | "CREATE" | "EDIT" | string;
+    disabledWhen?: string;
+    permission?: string;
+    openDialog?: boolean;
+    field?: FormField[];
+    props?: Record<string, any>;
+    route?: string;
+    path?: string;
+    propsActionGlobal?: {
+        key?: string;
+        labelEN?: string;
+        labelID?: string;
+        type?: string;
+        variant?: string;
+        bgColor?: string;
+        icon?: string;
+        endpointPropAction?: {
+            apiModule?: string | null;
+            apiAction?: string | null;
+            apiMethod?: string;
+            apiUrl?: string;
+            socket?: string;
+            keyParam?: string[];
+            model?: string;
+        };
+        [key: string]: any;
+    };
+    fieldActionGlobal?: FormField[];
+    fieldActionCustom?: FormField[];
+    requireConfirm?: boolean;
+    propCustomMessage?: any;
+    icon?: string;
+    rounded?: string;
+    borderStyle?: string;
+}
+export interface SectionBuilderProps {
+    key: string;
+    code?: string;
+    titleID?: string;
+    titleEN?: string;
+    icon?: string | null;
+    layoutColumns?: number | string;
+    descriptionID?: string;
+    descriptionEN?: string;
+    enableDialog?: boolean;
+    modelDatatable?: string;
+    endpoint?: {
+        apiModule?: string | null;
+        apiAction?: string | null;
+        apiMethod?: string;
+        apiUrl?: string;
+        dataSource?: "api" | "socket";
+        socket?: string;
+        keyParam?: string[];
+    } | null;
+    pagination?: boolean;
+    action?: SectionActionBuilder[];
+    headers?: SectionHeaderBuilder[];
+    filter?: FormFieldBuilder[];
+    fields?: FormFieldBuilder[];
+    propsWizard?: PropsWizard | WizardTabDefinition[];
+    logic?: SectionLogic;
+}
+export interface WizardActionProps {
+    key?: string;
+    icon?: string;
+    component?: string;
+    type?: string;
+    bgColor?: string;
+    labelID?: string;
+    labelEN?: string;
+    variant?: string;
+    keyRedirect?: boolean;
+    route?: string;
+    path?: string;
+    endpointPropAction?: {
+        apiMethod?: string;
+        apiUrl?: string;
+        socket?: string;
+        keyParam?: string[];
+        model?: string;
+    };
+    [key: string]: any;
+}
+export interface WizardActionFieldProps {
+    labelID?: string;
+    labelEN?: string;
+    placeholderID?: string;
+    placeholderEN?: string;
+    valueType?: string;
+    textCase?: string;
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    minValue?: number;
+    maxValue?: number;
+    apiModule?: string;
+    apiAction?: string;
+    itemTitle?: string;
+    itemValue?: string;
+    returnObject?: boolean;
+    clearable?: boolean;
+    typeFile?: string;
+    sizeFile?: number;
+    disablePast?: boolean;
+    range?: boolean;
+    autoRangeDays?: number;
+    endpointComponent?: {
+        apiMethod?: string;
+        apiUrl?: string;
+        socket?: string;
+        keyParam?: string[];
+    };
+    [key: string]: any;
+}
+export interface WizardActionField {
+    key: string;
+    component: string;
+    model: string;
+    seq?: number;
+    isVisible?: boolean;
+    column?: string;
+    propsFieldGlobal?: WizardActionFieldProps;
+}
+export interface WizardActionConfirmMessage {
+    titleID?: string;
+    titleEN?: string;
+    messageID?: string;
+    messageEN?: string;
+}
+export interface WizardActionComponent {
+    permission?: string;
+    propsActionGlobal?: WizardActionProps;
+    openDialog?: boolean;
+    fieldActionGlobal?: WizardActionField[];
+    requireConfirm?: boolean;
+    propCustomMessage?: WizardActionConfirmMessage;
+}
+export interface WizardDataTableProps {
+    key?: string;
+    titleID?: string;
+    titleEN?: string;
+    layoutColumns?: ColumnSize;
+    modelDatatable?: string;
+    endpointTable?: {
+        apiMethod?: string;
+        apiUrl?: string;
+        socket?: string;
+        keyParam?: string[];
+    };
+    pagination?: boolean;
+    fields?: FormFieldBuilder[];
+    actionTableGlobal?: WizardActionComponent[];
+    headers?: any[];
+    filters?: any[];
+}
+export interface FormBuilderSection {
+    id: string;
+    type: string;
+    props: SectionBuilderProps;
+    propsForm?: PropsForm;
+    propsTable?: PropsTable;
+    propsWizard?: PropsWizard;
+    main?: boolean;
+}
+export interface FormBuilderSchema {
+    id: string;
+    idAutoLayout?: number | string;
+    idTokenCore?: string;
+    code: string;
+    titleID: string;
+    titleEN: string;
+    descriptionID: string;
+    descriptionEN: string;
+    sections: FormBuilderSection[];
+    actions?: SectionActionBuilder[] | null;
+    actionGlobal?: SectionActionBuilder[] | null;
+    actionGlobalProps?: ActionGlobalProps;
+    payload?: Record<string, any> | null;
+    endpointGenerator?: string;
+    endpointGlobal?: {
+        apiMethod?: string;
+        apiUrl?: string;
+        socket?: string;
+        keyParam?: string[] | string;
+        model?: string;
+    } | null;
+    fieldMapping?: Record<string, string>;
+    ui?: any;
+}
+export interface LogicConfig {
+    label: string;
+    value: string;
+    icon: any;
+    colorClass: string;
+    bgClass: string;
+    borderClass: string;
+}