WebBuild/wwwroot/platform/widgets/components/widget.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Widgets;
        (function (Widgets) {
            let Components;
            (function (Components) {
                class Widget extends Platform.Core.BaseComponent {
                    constructor() {
                        super(...arguments);
                        this.DataListTypeId = 0;
                        this.DataListId = 0;
                        this.formproperties = [];
                        this.saveReportColumn = 1;
                        this.isclickEvent = false;
                        this.defautSettings = [{ "widgetdesignid": 20210628, "mode": "Create_Mode", "loadDesigns": 0, "defaultMode": "create" }];
                        this.DropOrderIndex = 1;
                        this.structDesignIdArrayDelete = [];
                        this.structureDesignArray = [];
                        this.items = '.structureDiv, .widgetdataHere, .dashboardwidget-item.dashboarddisplaynone, .portletwidget-item.dashboarddisplaynone';
                        this.themePaletteId = Unibase.Themes.Compact.Components.Index.Instance().currentTheme.paletteId;
                        this.themePalette = Unibase.Themes.Compact.Components.Index.Instance().themePalette;
                        this.Singledoc_array = [];
                    }
                    jsFiles() {
                        return ["platform/bundle/widget.builder.sub.js",
                            "libs/dragula/dist/dragula.min.js",
                            "libs/dragula/dist/init.js",
                            "libs/spectrum-2.0.8/dist/spectrum.js"];
                    }
                    cssFiles() {
                        var cssfiles = ['libs/tabulator-tables/css/bootstrap/tabulator_bootstrap4.min.css',
                            'libs/vectormap/jquery-jvectormap-2.0.3.css',
                            'libs/dragula/dist/dragula.min.css',
                            'libs/jquery-toggles/css/themes/toggles-light.css',
                            'libs/dragula/dist/style.css',
                            'platform/analytics/components/reportbuilder/style.reportbuilder.css',
                            'libs/spectrum-2.0.8/dist/spectrum.css',
                            'tenants/themes/compact/css/style.widget_builder.css'];
                        return cssfiles;
                    }
                    html(id, containerid) {
                        let Mode = Unibase.Platform.Widgets.Components.Widget.Instance().defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; }), biz_wrapper = '', active = '', hidden = 'hidden', Preview_activeShow = '', Layout_activeShow = '';
                        if (Mode[0].mode == 'Create_Mode') {
                            biz_wrapper = '', active = 'd-none', Layout_activeShow = 'active show', Preview_activeShow = '';
                        }
                        if (Mode[0].mode == 'Edit_Mode') {
                            biz_wrapper = 'biz-drawer-pushright', active = 'd-none', Layout_activeShow = '', Preview_activeShow = 'active show';
                        }
                        let html = `<div id="biz-wrapper" class="biz-wrapper drawer-small drawer-right biz-drawer-push ${biz_wrapper}" data-builder="widget_builder">

    <!-- Right Nav -->
    <div id="widgetBuilderRightNav"></div>
    <!-- /Right Nav -->

    <!-- Main Content -->
    <div class="biz-pg-wrapper py-0">
        <div class="biz-pg-body">
            <div class="biz-bldr-wrap bldr__aside__left">
                <header class="bldr-head Widget-builder font-weight-500">
                    <div class="d-flex align-items-center" id="txt_WidgetNameParent">
                        <input type="text" id="txt_WidgetName" class="form-control floating-label-control shadow-none required w-180p" data-isdynamic="false" placeholder="Widget Name *" data-validatename="Widget Name" data-placeholder="Enter Widget Name" data-label="Widget Name *" autocomplete="off"/>
                        <input type="hidden" id="hf_WidgetId" value="0"><input type="hidden" id="hf_viewallstages" value="true"/>
                        <span class="badge badge-soft-primary ml-10" id="header_Report_name">Report Name</span>
                    </div>
                    <div id="bizgaze_ValidationSummary" class="font-weight-400"></div>
                    <div class="bldr-options-wrap" id="top-nav-menu">
                        <a class="btn btn-primary btn-web btn-widgettbuilder-save" href="javascript:void(0)" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().saveWidget(` + id + `);"  id="btn-widget-save">Save Widget</a>
                        <a class="btn btn-outline-warning btn-web btn-widgettbuilder-reset" href="javascript:void(0)" id="btn-widget-builder-reset" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().resetWidget()">Reset</a>
                        <a class="btn btn-outline-danger btn-web btn-widgettbuilder-close" href="javascript:void(0)" id="btn-widget-close">Discard</a>
                    </div>
                    <div class="hidden"><input type="hidden" id="portlewidgetid" class="d-none" value="0"></div>
                </header>
                <div class="bldr-aside-left">
                    <ul class="nav nav-light nav-tabs columnCursor ">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#tab_details">
                                <span class="nav-link-text">Details</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link columntab" data-toggle="tab" href="#tab_columns">
                                <span class="nav-link-text">Columns</span>
                            </a>
                        </li>
                    </ul>
                    <div data-simplebar class="simple-scroll-bar">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="tab_details">
                              <form id="frmUnibase_widgetBuilderDetailsLeftNav" data-validate="parsley" data-isdynamic="false">
                                <ul class="rightnav_body font-weight-500" id="DefaultLeftNav_body">
                                    <li class="d-flex flex-column pt-1 pb-20" id="li_WidgetName">
                                        <label for="txt_UniqueId" class="font-weight-600" id="lbl" >Unique Name<span class="text-danger"> *</span></label>
                                        <input type="text" id="txt_WidgetUniqueName" class="form-control floating-label-control required shadow-none" data-isdynamic="false" placeholder="Unique Name *" data-placeholder="Enter Unique Name" data-validatename="Unique Name" data-label="Unique Name *" autocomplete="off" />
                                    </li>
                                    <li class="d-flex flex-column pb-20" id="li_WidgetType">
                                        <label for="ddlWidgetType" id="lblWidgetType" class="font-weight-600">Widget Type <span class="text-danger"> *</span></label>
                                        <select id="ddlWidgetType" class="form-control floating-label-control required" data-isdynamic="false" placeholder="Widget Type *" data-placeholder="Select Widget Type" data-label="Widget Type *">
                                            <option value="">Select Widget Type</option>
                                        </select>
                                    </li>
                                    <li class="d-flex flex-column pb-20 hidden" id="div_WidgetFormat" style="border-bottom:0;">
                                            <label for="ddlWidgetFormat" id="lblWidgetFormat" class="font-weight-600">Widget Format<span class="text-danger"> *</span></label>
                                            <select id="ddlWidgetFormat" class="form-control floating-label-control required" data-isdynamic="false" placeholder="WidgetFormat" data-placeholder="Select WidgetFormat" data-label="WidgetFormat">
                                            </select>
                                    </li>
                                    <li class="hidden" id="appProviders">
                                        <div class="d-flex flex-column pb-20" id="div_WidgetAppProvider">
                                            <label for="ddlAppProviders" class="font-weight-600" id="lblAppProviders">Available to Apps<span class="text-danger span_ddlappprovider"> *</span></label>
                                            <input type="hidden" id="hfInstalledappAutocompleteId" />
                                            <select id="ddlAppProviders" class="form-control floating-label-control required select2-hidden-accessible" data-isdynamic="false" placeholder="AppProviders" data-placeholder="Select Apps"  data-validatename="Available to Apps" data-label="Apps" onchange="Unibase.Platform.Widgets.Components.Widget.Instance().getParameterValues(` + id + `)" multiple="multiple">
                                            </select>
                                        </div>
                                    </li>
                                    <li class="ReportDiv">
                                        <div class="d-flex flex-column" id="div_Report">       
                                            <label for="ddlReport" id="lblReport" class="font-weight-600">Report<span class="text-danger">*</span></label>
                                            <input type="hidden" id="hfReportAutoComplete" value="" />
                                            <select id="ddlReport" class="b-a form-control floating-label-control w-100" value="" data-validatename="Report"  onchange="Unibase.Platform.Widgets.Components.Widget.Instance().getReportColumns(false)">
                                            </select>
                                        </div>
                                    </li>
                                    <li class="pb-10 hidden">
                                        <p class="font-weight-600" style="color:#007D88">Widget Details</p>
                                    </li>
                                    <li class="d-flex flex-column" id="li_WidgetLayout">
                                        <label for="ddlWidgetLayout" id="lblWidgetLayoutName" class="font-weight-600 hidden">Layout<span class="text-danger">*</span></label>
                                        <select class="form-control floating-label-control hidden required" id="ddlWidgetLayout" data-isdynamic="true" data-validatename="Widget Layout"  placeholder="Widget Layout" data-placeholder="Select Widget Layout" data-label="Widget Layout" onchange="Unibase.Platform.Widgets.Components.Widget.Instance().bindWidgetDesigns(0)">
                                            <option value="">Select Widget Layout</option>
                                        </select>
                                    </li>
                                    <li class="pb-20 div_DesignName hidden" id="div_DesignName">
                                        <div class="d-flex flex-column" id="div_WidgetDesignName">
                                            <label for="ddlWidgetDesign" id="lblWidgetDesignName" class="font-weight-600">Design<span class="text-danger">*</span></label>
                                            <select id="ddlWidgetDesign" class="form-control floating-label-control required" data-isdynamic="true" placeholder="Widget Design" data-placeholder="Select Widget Design" data-validatename="Widget Design"  data-label="Widget Design">
                                                <option value="" >Select Widget Design</option>
                                            </select>
                                        </div>
                                    </li>
                                    <li class="pb-20 d-flex flex-column" id="div_WidgetURL">
                                        <div class="hidden userDesignedURL"><label for="txt_WidgetUrlFile" id="lblOwnDesign" class="font-weight-600">Widget URL<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control floating-label-control required" id="txt_WidgetUrlFile" placeholder="Widget URL*" data-validatename="widget Name"  data-placeholder="Enter Widget URL" data-label="Widget URL"></div>
                                    </li>
                                    <li class="pb-20 hidden">
                                        <div class="d-flex flex-column" id="div_LinkReportId" style="border-bottom:0;">
                                            <div class="d-flex flex-column" >
                                                <label for="ddlLinkReportId" id="lblLinkUrlReportIdr" class="font-weight-600">Link Report</label>
                                                <select id="ddlLinkReportId" class="w-100p form-control floating-label-control" style="width:100%" data-isdynamic="true"  placeholder="LinkReport" data-placeholder="Select LinkReport" data-label="LinkReport"><option value="0">Select Report</option></select>
                                                <input type="hidden" id="hfddlLinkReportId" value="" />
                                            <div>
                                            <div class="d-flex flex-column pt-20" id="div_LinkReportLabelName">
                                                <label for="txt_UniqueId" class="font-weight-600" id="lbl">Link Report Label Name
                                                    <span class="text-danger"> *</span>
                                                </label>
                                                <input type="text" id="txt_LinkReportLabelName" class="form-control floating-label-control shadow-none" data-isdynamic="false" placeholder="Link Report Label Name *" data-placeholder="Link Report Label Name" data-validatename="Link Report Label Name" data-label="Link Report Label Name" autocomplete="off">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="pb-20 hidden" id="li_WidgetDetaillinkURL">
                                         <div class="d-flex flex-column" id="div_WidgetDetaillinkURL">
                                            <label for="txt_DetaillinkURL" id="lblDetaillinkURL" class="font-weight-600">Link URL</label>
                                            <input type="text" class="form-control floating-label-control shadow-none" id="txt_DetaillinkURL" placeholder="Link URL" data-placeholder="Enter Link URL" data-label="Link URL" />
                                        </div>
                                    </li>
                                    <li class="pb-20 hidden" id="li_WidgetDetailIcon">
                                        <div class="d-flex flex-column" id="div_WidgetDetailIcon" style="border-bottom:0;">
                                            <label for="ddlDetailIcon" id="lblDetailIcon" class="font-weight-600">Button</label>
                                            <select id="ddlDetailIcon" class="form-control floating-label-control" data-isdynamic="true" placeholder="Icon" data-placeholder="Select Icon" data-label="Icon">
                                                <option value="">Select Icon</option>
                                                <option value="1">plus</option>
                                                <option value="2">pencil</option>
                                                <option value="3">refresh</option>
                                            </select>
                                        </div>
                                    </li>
                                    <li class="pb-20 hidden" id="li_WidgetDetailHeader">
                                        <div class="d-flex align-items-center justify-content-between" id="div_WidgetDetailHeader" style="border-bottom:0;">
                                            <label class="font-16 font-weight-600">Show Header</label>
                                            <label class="switch m-0">
                                                <input type="checkbox" id="DetailHeader_collapase">
                                                <span></span>
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                              </form>
                            </div>
                            <div class="tab-pane fade" id="tab_columns">
                                <div class="text-dark collapaseDiv hidden">
                                    <div class="d-flex flex-row">
                                        <span class="font-16 font-weight-500">Default Expand</span>
                                        <label class="switch m-0 px-20">
                                            <input type="checkbox" id="report_collapase">
                                            <span></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="DetailsColumns">
                                    <ul class="d-flex flex-column font-weight-500 font-14">
                                        <li class="d-flex flex-column biz-adj-drawer-wrap">
                                            <button data-target="adj_drawer_column" class="btn btn-secondary btn-wth-icon icon-left adj-drawer-open mb-15" id="addColumn-detailWidget"><span><span class="line-icon mr-2"><i class="las la-plus"></i></span>Add Columns</span></button>
                                            <ul class="list-group gutter list-group list-group-sp sortable" id="ulcolumns">
                                                
                                            </ul>
                                            <div id="adj_drawer_column" class="biz-adj-drawer border">
                                                <div class="drawer-body biz-custom-scrollbar pb-0 px-3">
                                        	        <ul class="bg-white">
												        <form class="formColumnWidgetBuilder">
													        <li class="mb-3 d-flex flex-column">
                                                                <div class="floating-label-form-group-with-value" id="div_WidgetColumnConv">
														            <label for="ddlColumnConv" id="lblColumnConv"> Converter <span class="text-danger">*</span></label>
														            <select id="ddlColumnConv" class="form-control floating-label-control py-0 pl-2 pr-4 border-0 bg-light custom-select"  data-                            isdynamic="true" placeholder="Converter" data-placeholder="Select Converter" data-label="Converter">
															            <option value="">Select Converter</option>
															            <option value="0">None</option>
															            <option value="1">Round Number</option>
															            <option value="2">Local Date</option>
                                                                        <option value="3">Local Time</option>
														            </select>
                                                                </div>
													        </li>
													        <li class="d-flex flex-column div_WidgetColumnConvType hidden">
                                                                <div class="floating-label-form-group-with-value hidden" id="div_WidgetColumnConvType">
                                                                    <label for="ddlColumnConvType" id="lblColumnConvType" class="font-bold">Select Format</label>
                                                                    <select id="ddlColumnConvType" class="form-control floating-label-control" data-isdynamic="true" placeholder="select" data-                         placeholder="Select " data-label=""> 
                                                                    </select>
                                                                </div>
                                                            </li>
													        <li class="d-flex flex-column mb-3">
                                                                <div class="floating-label-form-group-with-value" id="div_WidgetColumn" style="border-bottom:0;">
														            <label for="ddlColumns" id="lblColumns" class="font-bold scroll-x scroll-y"> Columns <span class="text-danger">*</span></label>
														            <select class="form-control floating-label-control py-0 pl-2 pr-4 border-0 bg-light custom-select selectreportcolumn" id="ddlColumns" data-isdynamic="true" placeholder="Columns" data-placeholder="Select Columns" data-label="Columns">
															            <option value="">Select Columns</option>
														            </select>
                                                                </div>
													        </li>
													        <li class="border-bottom mb-3">
                                                                <div class="floating-label-form-group" id="div_WidgetLabel">
														            <label for="txt_Label" id="lblLabel"> Label <span class="text-danger">*</span></label>
														            <input type="text" name="" class="form-control border-0 bg-light floating-label-control" id="txt_Label" placeholder="Label *" data-placeholder="Enter Label" data-label="Label *">
                                                                </div>
													        </li>
													        <li class="border-bottom mb-3">
                                                                <div class="floating-label-form-group" id="div_WidgetHyperlink">
														            <label  for="txt_LinkURL" id="lblLinkURL"> Hyper link <span class="text-danger">*</span></label>
														            <input type="text" name="" class="form-control floating-label-control border-0 bg-light "  placeholder="Hyperlink" data-placeholder="Enter Hyperlink" id="txt_LinkURL" data-label="Hyperlink" >
													            </div>
                                                                <input type="hidden" id="propertyindex" value="0"/>
                                                                <input type="hidden" id="detailpropertyid" value="0"/>
                                                                <input type="hidden" id="li_columnId" value="0"/>
                                                            </li>
												        </form>	
											        </ul>
                                                </div>
                                                <footer class="d-flex justify-content-between py-2 px-3">
                                                    <a href="javascript:void(0);" class="btn btn-light py-0 btn-adj-drawer-close"   onclick="Unibase.Platform.Widgets.Components.Widget.Instance().bindReportClose()">Close</a>
                                                    <a href="javascript:void(0);" class="btn btn-theme py-0 btn-adj-drawer-close" id="btn_Add"
                                                       onclick="Unibase.Platform.Widgets.Components.Widget.Instance().bindReportColumn()">Save</a>
                                                </footer>
                                            </div>
                                        </div>
                                        <div class="dsl-block-wrap dd-list droppable-area1 connected-sortable" id="selectedColumns">

                                        </div>
                                    </li>
                                    <li style="list-style-type:none;">
                                        <ul class="d-flex flex-column font-14">
                                            <li class="hidden" id="div_Value1"> 
                                                <div class="floating-label-form-group-with-value" id="div_selectedcolumn1" style="border-bottom:0;">
                                                    <div class="border-bottom">                                                    
                                                        <input type="text" class="form-control bg-light floating-label-control font-weight-500 border-0" id="ddlSelectedLabelValue_1"  placeholder="Enter Label 1" value="Label 1" style="box-shadow:none;">
                                                    </div>
                                                    <div class="d-flex justify-content-between pt-2 align-item-center w-100">
                                                        <span>
                                                            <label for="ddlSelectedValue_1" class="font-weight-500" id="lblSelectedValue_1">Select Value 1</label>
                                                        </span>
                                                        <span>
                                                            <input class="form-check-input value_1_hidden mr-0" type="checkbox" value="" id="value_1_hidden" title="Hidden" style="width: 15px; height:15px;">
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <input type="hidden" id="hfddlSelectedValue_1" value="" />
                                                        <select id="ddlSelectedValue_1" class="form-control floating-label-control font-weight-500" data-isdynamic="true"  placeholder="Select Column" data-placeholder="Select Column" data-label="Select Column">
                                                        <option value="">Select Columns</option>
                                                        </select>
                                                    </div>
                                                     <ul class="d-flex flex-row w-100 font-weight-500 pt-2 font-14">
                                                        <li class="d-flex flex-column w-50">
                                                            <span class="pb-2">Data Type</span>
                                                             <select id="kpidataType_1" class="form-control floating-label-control font-14 border-0 bg-light" placeholder="Data Type *" data-validatename="Data Type" data-placeholder="Enter Data Type" data-label="Data Type *"> <option selected value="">Select</option> <option value="int">INT</option> <option value="float">FLOAT</option> <option value="char">CHAR</option> <option value="varchar">VARCHAR</option> <option value="bool">BOOLEAN</option><option value="INR">CURRENCY</option><option value="percent">PERCENT</option></select>
                                                        </li>
                                                        <li class="d-flex flex-column w-50 pl-3">
                                                            <span class="pb-2 ml-auto">IsRoundOff</span><label class="switch ml-auto m-0 my-auto" style="opacity:1"> <input type="checkbox" id="kpi_isroundoff_1"> <span style="margin-top:6px;"></span></label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="hidden" id="div_Value2"> 
                                                <div class="floating-label-form-group-with-value py-3" id="div_selectedcolumn2" style="border-bottom:0;">
                                                    <div class="border-bottom ">                                                    
                                                        <input type="text" class="form-control bg-light floating-label-control font-weight-500 border-0" id="ddlSelectedLabelValue_2"  placeholder="Enter Label 2" value="Label 2" style="box-shadow:none;">
                                                    </div>
                                                    <div class="d-flex justify-content-between pt-2 w-100">
                                                        <span>
                                                            <label for="ddlSelectedValue_2" class="font-weight-500" id="lblSelectedValue_2">Select Value 2</label>
                                                        </span>
                                                        <span>
                                                            <input class="form-check-input value_2_hidden mr-0" type="checkbox" value="" id="value_2_hidden" title="Hidden" style="width: 15px; height:15px;">
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <input type="hidden" id="hfddlSelectedValue_2" value="" />
                                                        <select id="ddlSelectedValue_2" class="form-control floating-label-control font-weight-500" data-isdynamic="true"  placeholder="Select Column" data-placeholder="Select Column" data-label="Select Column">
                                                            <option value="">Select Columns</option>
                                                        </select>
                                                    </div>
                                                     <ul class="d-flex flex-row w-100 font-weight-500 pt-2 font-14">
                                                        <li class="d-flex flex-column w-50">
                                                            <span class="pb-2">Data Type</span>
                                                             <select id="kpidataType_2" class="form-control floating-label-control font-14 border-0 bg-light" placeholder="Data Type *" data-validatename="Data Type" data-placeholder="Enter Data Type" data-label="Data Type *"> <option selected value="">Select</option> <option value="int">INT</option> <option value="float">FLOAT</option> <option value="char">CHAR</option> <option value="varchar">VARCHAR</option> <option value="bool">BOOLEAN</option><option value="INR">CURRENCY</option><option value="percent">PERCENT</option></select>
                                                        </li>
                                                        <li class="d-flex flex-column w-50 pl-3">
                                                            <span class="pb-2 ml-auto">IsRoundOff</span><label class="switch ml-auto m-0 my-auto" style="opacity:1"> <input type="checkbox" id="kpi_isroundoff_2"> <span style="margin-top:6px;"></span></label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="hidden" id="div_Value3"> 
                                                <div class="floating-label-form-group-with-value" id="div_selectedcolumn3" style="border-bottom:0;">
                                                    <div class="border-bottom pb-1">                                                    
                                                        <input type="text" class="form-control bg-light floating-label-control font-weight-500 border-0" id="ddlSelectedLabelValue_3"  placeholder="Enter Label 3" value="Label 3" style="box-shadow:none;">
                                                    </div>
                                                    <div class="d-flex justify-content-between align-item-center pt-2 w-100">
                                                        <span>
                                                            <label for="ddlSelectedValue_3" class="font-weight-500" id="lblSelectedValue_3">Select Value_3</label>
                                                        </span>
                                                        <span>
                                                            <input class="form-check-input value_3_hidden mr-0" type="checkbox" value="" id="value_3_hidden" title="Hidden" style="width: 15px; height:15px;">
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <input type="hidden" id="hfddlSelectedValue_3" value="" />
                                                        <select id="ddlSelectedValue_3" class="form-control font-weight-500 font-14" data-isdynamic="true"  placeholder="Select Column" data-placeholder="Select Column" data-label="Selected Column">
                                                            <option value="">Select Columns</option>
                                                        </select>
                                                    </div>
                                                     <ul class="d-flex flex-row w-100 font-weight-500 pt-2 font-14">
                                                        <li class="d-flex flex-column w-50">
                                                            <span class="pb-2">Data Type</span>
                                                             <select id="kpidataType_3" class="form-control floating-label-control font-14 border-0 bg-light" placeholder="Data Type *" data-validatename="Data Type" data-placeholder="Enter Data Type" data-label="Data Type *"> <option selected value="">Select</option> <option value="int">INT</option> <option value="float">FLOAT</option> <option value="char">CHAR</option> <option value="varchar">VARCHAR</option> <option value="bool">BOOLEAN</option><option value="INR">CURRENCY</option><option value="percent">PERCENT</option></select>
                                                        </li>
                                                        <li class="d-flex flex-column w-50 pl-3">
                                                            <span class="pb-2 ml-auto">IsRoundOff</span><label class="switch ml-auto m-0 my-auto" style="opacity:1"> <input type="checkbox" id="kpi_isroundoff_3"> <span style="margin-top:6px;"></span></label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </ul>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bldr-body bg-light">
                    <header class="bldr-sec-head h-65p">
                        <div class="left-aside-togglable"></div>
                        <ul class="mx-auto mt-auto nav nav-line nav-tabs nav-light font-weight-500" id="bldrHeaderNavTabs">
                            <li class="nav-item">
                                <a class="nav-link ${Layout_activeShow}" id="layout-tab" data-toggle="tab" href="#tab_layout">
                                    <span class="nav-link-text">Layout</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link hidden" id="kpi-design-tab" data-toggle="tab" href="#tab_design">
                                    <span class="nav-link-text">Design</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link hidden" id="Preview-Designs" data-toggle="tab" href="#tab_preview">
                                    <span class="nav-link-text">Preview</span>
                                </a>
                            </li>
                            <li class="nav-item static-js">
                                <a class="nav-link static_js_hidden" data-toggle="tab" href="#tab_static_js">
                                    <span class="nav-link-text">Static JS</span>
                                </a>
                            </li>
                        </ul>
                        <a class="btn-sm btn-theme mr-25 py-2 rounded-50 font-13 hidden" id="option-back" href="javascript:void(0);"><span class="btn-icon-wrap"><span class="line-icon"><i class="las la-arrow-left mx-1"></i><span>Back</span></span></span></a>
                        <a class="btn btn-icon btn-flush-theme flush-soft-hover drawer-toggle-link ${active} right-aside-togglable" id="PivotIcon" href="javascript:void(0);"><span class="btn-icon-wrap"><span class="line-icon"><i class="las la-tools"></i></span></span></a>
                        <a class="btn btn-icon btn-flush-theme flush-soft-hover ${hidden}" id="closed" href="javascript:void(0);"><span class="btn-icon-wrap"><span class="line-icon"><i class="las la-times"></i></span></span></a>
                    </header>
					<div data-simplebar class="simple-scroll-bar">
						<div class="tab-content">
							<div class="tab-pane fade px-100 ${Layout_activeShow}" id="tab_layout">
                                <p class="font-16 font-weight-600" style="color:#007D88">Select Widget Layout</p>
                                <ul class="d-flex flex-wrap w-100 font-weight-600">
                                    <li class="w-50 layoutType">
                                        <a href="javascript:void(0);" class="p-3 m-2 bg-white border rounded-5 d-flex flex-column align-items-center" id="layoutChartReport">
                                            <img class="img-fluid h-200p" src="tenants/themes/compact/imgs/reports.png">
                                            <p class="pt-3 text-dark">Charts & Reports</p>
                                        </a>
                                    </li>
                                     <li class="w-50 layoutType">
                                        <a href="javascript:void(0);" class="p-3 m-2 bg-white border rounded-5 d-flex flex-column align-items-center" id="layoutKPI">
                                            <img class="img-fluid h-200p" src="tenants/themes/compact/imgs/kpis.png">
                                            <p class="pt-3 text-dark">KPI'S</p>
                                        </a>
                                    </li>
                                    <li class="w-50 layoutType">
                                        <a href="javascript:void(0);" class="p-3 m-2 bg-white border rounded-5 d-flex flex-column align-items-center" id="layoutDetails">
                                            <img class="img-fluid h-200p" src="tenants/themes/compact/imgs/details.png">
                                            <p class="pt-3 text-dark">Details</p>
                                        </a>
                                    </li>
                                    <li class="w-50 layoutType">
                                        <a href="javascript:void(0);" class="p-3 m-2 bg-white border rounded-5 d-flex flex-column align-items-center" id="layoutUserDesigned" data-layoutid="0">
                                            <img class="img-fluid h-200p" src="tenants/themes/compact/imgs/userdesigned.png">
                                            <p class="pt-3 text-dark">User Designed</p>
                                        </a>
                                    </li>
                                </ul>
							</div>
							<div class="tab-pane fade" id="tab_design">
                                <ul class="d-flex flex-wrap px-2" id="design-Library">
                                    
                                </ul>
							</div>
							<div class="tab-pane fade px-150 py-50 ${Preview_activeShow}" id="tab_preview">
								<div class="row">
									<div class="col-md-4"></div>
									<div class="col-md-12">
                                    <ul class="designsPreviewAppend" id="designsPreviewAppend">
                                    </ul>	
									</div>
									<div class="col-md-4"></div>
								</div>	
							</div>
							<div class="tab-pane fade px-10" id="tab_static_js">
								<textarea class="border-dark h-80 summernote_StaticJsFunction w-100 " id="summernote_StaticJsFunction' + len + '" rows="9" cols="90" style="box-shadow: none;"></textarea>
							</div>
						</div>
					</div>
                </div>
            </div>
            <!-- Save as Modal -->
            <div class="modal" id="save_as_modal" tabindex="-1" role="dialog" aria-labelledby="save_as_modal"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div id="divReport_ErrorMessage">Error</div>
                        <div class="modal-header border-0">
                            <h5 class="modal-title">Save report</h5>
                            <button type="button" class="close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="form-label-group">
                                    <label for="userName">Select Folder<span class="text-danger "
                                            id="spnIsRequired_folder"> *</span></label>
                                    <a href="#" id="reportCreateFolder" class="link-theme font-14 font-weight-500">+
                                        Create Group</a>
                                </div>
                                <select class="form-control custom-select mb-10" id="RptGroup_AutoComplete">
                                    <option selected>Select Group</option>
                                </select>
                                <input type="hidden" id="hfAutoComplete_ReportGroup"
                                    class="hfAutoCompleteId_ReportGroup value-control" data-isdynamic="true" />
                            </div>
                            <div class="custom-control custom-radio radio-theme">
                                <input type="radio" id="customRadio_v1" name="customRadioV1"
                                    class="custom-control-input" checked>
                                <label class="custom-control-label" for="customRadio_v1">Visible to all users</label>
                            </div>
                            <div class="custom-control custom-radio radio-theme">
                                <input type="radio" id="customRadio_v2" name="customRadioV1"
                                    class="custom-control-input">
                                <label class="custom-control-label" for="customRadio_v2">Visible to only me</label>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-start">
                            <button type="button" id="btn-reportbuilder-save" class="btn btn-theme w-150p">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Save as Modal -->

            <!-- Link Report Modal -->
            <div id="linkReportModalDiv"></div>
            <!-- /Link Report Modal -->
        </div>
    </div>
    <div id="divSelectDataList"></div>
</div>`;
                        return html;
                    }
                    deleteConfig(event, len) {
                        var instance = this;
                        if (instance.DeleteConfigurationIds == "0") {
                            instance.DeleteConfigurationIds = "";
                        }
                        var id = event.currentTarget.id.split("__");
                        $("#deleteconfig_" + len + "").val($("#deleteconfig_" + len + "").val() + id[2] + "|");
                        $("#" + id[0]).remove();
                    }
                    loadRightSideBar(id, containerid) {
                        var InstalledAppId_html = Unibase.Themes.Providers.DetailHelper.installedAppId, height_apps = "d-flex flex-column";
                        let Mode = Unibase.Platform.Widgets.Components.Widget.Instance().defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; }), drawer_push = '';
                        if (Mode[0].mode == 'Create_Mode') {
                            drawer_push = '';
                        }
                        if (Mode[0].mode == 'Edit_Mode') {
                            drawer_push = 'biz-drawer-toggle';
                        }
                        if (InstalledAppId_html != 0) {
                            height_apps = 'd-flex flex-column';
                        }
                        let RightSideBarhtml = `<div id="drawer_push" class="biz-drawer biz-drawer drawer-small drawer-right custom-right-chart-nav ${drawer_push}">
				<ul class="nav nav-line nav-tabs nav-light font-weight-500">
					<li class="nav-item">
						<a class="nav-link details active py-20" data-toggle="tab" href="#tab_appearance" style="border:none">
							<span class="nav-link-text">Appearance</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link settings py-20" data-toggle="tab" href="#tab_settings" style="border:none">
							<span class="nav-link-text">Settings</span>
						</a>
					</li>
				</ul>
				<!-- <div class="drawer-text">Appearance</div> -->
				<button type="button" class="drawer-close close hidden">
					<span aria-hidden="true">&times;</span>
				</button>
			<div class="drawer-body" style="height:100% !important;">
				<div data-simplebar class="simple-scroll-bar">
					<div class="drawer-content-wrap pt-0">
						<div class="collapse-simple">
							<div class="tab-content">
								<div class="tab-pane fade show active" id="tab_appearance">
 <form id="frmUnibase_widgetBuilderAppearance" data-validate="parsley" data-isdynamic="false">
									<div class="card p-0 border-0">
										<div class="card-header d-flex justify-content-between border-0 pa-0">
											<a role="button" class="text-capitalize font-weight-500 eventdisabled text-dark" data-toggle="collapse" href="#color_info" aria-expanded="true">Background</a>
											<span class="rounded-2 hidden m-1 py-2" id="backgroundcolor" style="width: 20px; height: 20px;"></span>
                                                    <input class="bg-color-1" id="backgroundcolor-color-picker" value="" style="display: none;">
										</div>
										
										<div class="card-body p-0 mt-3">
											<ul>
												<li>
													<ul class="d-flex justify-content-between font-weight-500 text-dark" id="editFontSection">
														<li class="d-flex flex-column w-45">
                                                            <span class="font-14 pb-2">Font Size</span>
															<select class="form-control font-13 py-0 pl-2 pr-4 pr-4 border-0 bg-light custom-select eventdisabled" id="font-size" placeholder="Select Font Size Type">
																<option value="" selected>Font size</option>
																<option value="None">None</option>
																<option value="11">font-11</option>
																<option value="12">font-12</option>
																<option value="13">font-13</option>
																<option value="14">font-14</option>
																<option value="16">font-16</option>
																<option value="18">font-18</option>
																<option value="20">font-20</option>
																<option value="22">font-22</option>
																<option value="24">font-24</option>
																<option value="26">font-26</option>
																<option value="28">font-28</option>
																<option value="30">font-30</option>
																<option value="32">font-32</option>
																<option value="34">font-34</option>
																<option value="36">font-36</option>
																<option value="38">font-38</option>
															</select>
														</li>
														<li class="d-flex flex-column w-45 font-Family-section">
                                                            <span class="font-14 pb-2">Font Family</span>
															<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select eventdisabled" id="font-style" placeholder="Select Font Style">                       
																<option  value="" selected>Font style</option>
																<option value="None">None</option>
                                                                <option value="Times New Roman">Times New Roman</option>
																<option value="Georgia">Georgia</option>
																<option value="Garamond">Garamond</option>
																<option value="Arial">Arial</option>
																<option value="Verdana">Verdana</option>
																<option value="Helvetica">Helvetica</option>
																<option value="Monaco">Monaco</option>
																<option value="Courier New">Courier New</option>
																<option value="Copperplate">Copperplate</option>
																<option value="Papyrus">Papyrus</option>
															</select>
														</li>
													</ul>
												</li>
                                               <li class=" mt-3">
													<ul class="d-flex justify-content-between font-weight-500 text-dark">
														<li class="d-flex flex-column w-45" id="ddlwidthOnEdit">
                                                            <span class="font-14 pb-2">Widget Width</span>
													        <select  id="ddlWidth" class="form-control floating-label-control required custom-select eventdisabled font-14 border-0 bg-light" data-isdynamic="false" placeholder="Widget Width *" data-validatename="Widget Width"  data-placeholder="Enter Widget Width" data-label="Widget Width *">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option  value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                                <option value="11">11</option>
                                                                <option selected value="12">12</option>
													        </select>
														</li>
														<li class="${height_apps} w-45" id="kpiheight">
                                                            <span class="font-14 pb-2">Height</span>
                                                            <input type="text" id="ddlheight" class="form-control floating-label-control required shadow-none eventdisabled font-14 border-0 bg-light" data-isdynamic="false" placeholder="Height *" data-placeholder="Enter height" data-label="Height *" autocomplete="off" data-validatename="Height" value="0">
														</li>
													</ul>
												</li>
											</ul>

											<div class="p-2 py-3 border rounded-5 mt-3" id="editBorderSection">	
												<ul class="d-flex justify-content-between">
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border Type</span>
														<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select eventdisabled" id="border-type" placeholder="Select Border Type">
															<option selected>Border Type</option>
															<option value="none">none</option>
															<option value="solid">Solid</option>
															<option value="dashed">Dashed</option>
															<option value="dotted">Dotted</option>
														</select>
													</li>
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border width</span>
														<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select eventdisabled" id="border-width" placeholder="Select Border Type">
															<option selected>Border Width</option>
															<option value="1px">1</option>
															<option value="2px">2</option>
															<option value="3px">3</option>
															<option value="4px">4</option>
															<option value="5px">5</option>
															<option value="6px">6</option>
															<option value="7px">7</option>
															<option value="8px">8</option>
															<option value="9px">9</option>
															<option value="10px">10</option>
															<option value="12px">12</option>
															<option value="14px">14</option>
															<option value="16px">16</option>
														</select>
													</li>
												</ul>
												<ul class="d-flex justify-content-between mt-3">
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border Color</span>
                                                       <div class="color-picker-div h-10p w-90p">
                                                             <input class="bg-color-1 form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select eventdisabled" id="border-color" value="" style="display: none;">
                                                       </div>														
    												</li>
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border Radius</span>
														<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select eventdisabled" id="border-radius" placeholder="Select Border Type">
															<option selected>Border radius</option>
                                                            <option value="1px">1px</option>
															<option value="2px">2px</option>
															<option value="3px">3px</option>
															<option value="4px">4px</option>
															<option value="5px">5px</option>
															<option value="6px">6px</option>
															<option value="7px">7px</option>
															<option value="8px">8px</option>
															<option value="9px">9px</option>
														</select>
													</li>
                                                    <li class="flex-column text-dark font-weight-500 hidden">
                                                        <span class="font-14 pb-2">List Style Type</span>
														<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select" id="list-style-type" placeholder="Select list-style-type">
															<option selected>None</option>
                                                            <option value="disc">Circle</option>
															<option value="circle">Rounded Circle</option>
															<option value="square">Square</option>disclosure-closed
                                                            <option value="decimal">Number</option>
                                                            <option value="disclosure-closed">Left Arrow</option>
                                                            <option value="disclosure-open">Down Arrow</option>
															<option value="upper-roman">Upper-Roman</option>
															<option value="lower-alpha">Lower-Alpha</option>
														</select>
													</li>
												</ul>
											</div>	
<div class="mt-3 hidden details-Widget">
                                                <span>Details Widget</span>
                                            </div>
                                            <div class="p-2 py-3 border rounded-5 mt-2 details-Widget hidden">	
												<ul class="d-flex justify-content-between">
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border Type</span>
														<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select eventdisabled" id="border-type-details" placeholder="Select Border Type">
															<option selected>Border Type</option>
															<option value="none">none</option>
															<option value="solid">Solid</option>
															<option value="dashed">Dashed</option>
															<option value="dotted">Dotted</option>
														</select>
													</li>
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border width</span>
														<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select eventdisabled" id="border-width-details" placeholder="Select Border Type">
															<option selected>Border Width</option>
															<option value="1px">1</option>
															<option value="2px">2</option>
															<option value="3px">3</option>
															<option value="4px">4</option>
															<option value="5px">5</option>
															<option value="6px">6</option>
															<option value="7px">7</option>
															<option value="8px">8</option>
															<option value="9px">9</option>
															<option value="10px">10</option>
															<option value="12px">12</option>
															<option value="14px">14</option>
															<option value="16px">16</option>
														</select>
													</li>
												</ul>
												<ul class="d-flex justify-content-between mt-3">
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border Color</span>
                                                       <div class="color-picker-div h-10p w-90p">
                                                             <input class="bg-color-1 form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select" id="border-color-details" value="" style="display: none;">
                                                       </div>
														
													</li>
													<li class="d-flex flex-column text-dark font-weight-500">
                                                        <span class="font-14 pb-2">Border Radius</span>
														<select class="form-control font-13 py-0 pl-2 pr-4 border-0 bg-light custom-select" id="border-radius-details" placeholder="Select Border Type">
															<option selected>Border radius</option>
                                                            <option value="1px">1px</option>
															<option value="2px">2px</option>
															<option value="3px">3px</option>
															<option value="4px">4px</option>
															<option value="5px">5px</option>
															<option value="6px">6px</option>
															<option value="7px">7px</option>
															<option value="8px">8px</option>
															<option value="9px">9px</option>
														</select>
													</li>
												</ul>
											</div>

<ul class="d-flex mt-2 border border-dashed rounded-5 p-2 flex-column chooseImage">
    <li><p class="font-16 text-center text-dark">Upload your Icon</p></li>
    <li class=" d-flex flex-column mx-auto">
        <div class='file d-flex justify-content-center mt-2' id="div_WidgetKPIImageFile">
            <label for='txt_KPIImageFile' id="lblKPIImage" class="d-flex " onchange="Unibase.Platform.Widgets.Components.Widget.Instance().hideKPILabel()" >
                <span class="w-70p"><img src="tenants/themes/compact/imgs/cloud.svg" class="img-fluid"></span>
            </label>
            <input  type='file' class="d-none"  id="txt_KPIImageFile" onchange="Unibase.Platform.Widgets.Components.Widget.Instance().hideKPILabel(this)"/>
        </div>
        <div style="margin-top:-15px;">
            <span class="text-dark" id="lblKPIFileName"></span>
            <span class="text-dark hidden" for="txt_KPIImageFile" id="lblKPIImage2"></span>
            <input type="hidden" id="hf_KPIIconPath" value="">
        </div>
    </li>
</ul>	
							            </div>
									</div>	
                               </form> 
								</div>
								<div class="tab-pane fade" id="tab_settings">
                                    <ul class="d-flex flex-column font-weight-500">
                                        <li class="pt-4"><p class="" style="color: #007D88;">App Parameters</p></li>
                                        <li class="pt-2">
                                            <div class="biz-adj-drawer-wrap h-100">
	                                            <button data-target="adj_drawer_paramters" data-clickevent="parameter" class="btn btn-secondary btn-wth-icon icon-left adj-drawer-open-parameters mb-15">Add Parameters</button>
                                                <div id="bindParameterList"></div>
	                                            <div id="adj_drawer_paramters" class="biz-adj-drawer w-45 border ml-auto" style="left:0px; height:731px;">
		                                            <header class="border-bottom border-dark">
                                                        <p class="px-5 text-dark">Add Parameters</p>
                                                    </header>
                                                    <div class="drawer-body pb-0 px-3">
			                                            <form class="parametersForm">
															<ul class="parametersClassUl" id="parametersIdUl" data-parameterIndex="0">
																<li class="m-4">
																	<ul class="d-flex justify-content-between">
																		<li class="w-45">
                                                                            <div class="floating-label-form-group d-flex flex-column" id="div_WidgetParameters">
                                                                                <label for="txt_ParametersName" id="lblParameterName">Parameter<span class="text-danger"> *</span></label>
                                                                                <input type="text" class="form-control floating-label-control" id="txt_Parameters" placeholder="Parameters" data-placeholder="Enter Parameter" data-label="Parameters" autocomplete="off"/>
                                                                            </div>
																		</li>
																		<li class="d-flex flex-column w-45">
                                                                            <div class="floating-label-form-group-with-value d-flex flex-column" id="div_Operator" style="border-bottom:0;">
																			   <label for="ddlOperator" id="lblOperator">Operator<span class="text-danger"> *</span></label>
																			   <select id="ddlOperator" class="form-control floating-label-control" data-isdynamic="true" placeholder="Operator" data-placeholder="Select Operator" data-label="Converter">
                                                                                    <option value="0">Select Operator</option>
                                                                                    <option value="<"><</option>
                                                                                    <option value=">">></option>
                                                                                    <option value="<="><=</option>
                                                                                    <option value=">=">>=</option>
                                                                                    <option value="=">=</option>
                                                                                    <option value="!=">!=</option>
                                                                                    <option value="ilike">ilike</option>
                                                                                </select>
                                                                            </div>
																		</li>
																	</ul>
																</li>
																<li class="m-4">
																	<ul class="d-flex justify-content-between">
																		<li class="w-45  div_WidgetParameters">
                                                                            <div class="floating-label-form-group-with-value d-flex flex-column" id="div_WidgetParameterType">
																			    <label for="lbl_ParameterType" id="lblParameterType" class="font-bold">Type<span class="text-danger"> *</span></label>
                                                                                <select id="ddlparametertype" class="form-control floating-label-control" data-isdynamic="true" placeholder="Type" data-placeholder="Select Type" data-label="Type">
                                                                                    <option value="1">Report Column</option>
                                                                                    <option value="2">User Defined Value</option>
                                                                                </select>
                                                                            </div>
																		</li>
																		<li class="w-45">
                                                                            <div class="floating-label-form-group-with-value d-flex flex-column" id="div_ParameterValues" style="border-bottom:0;">
                                                                                <label for="ddlParameterValue" id="lblParameterValues" class="font-bold scroll-x scroll-y">Value<span class="text-danger"> *</span></label>
                                                                                <select id="ddlParameterValue" class="form-control floating-label-control" data-isdynamic="true" placeholder="Value" data-placeholder="Select Value " data-label="Columns">
                                                                                    <option value="">Select Value</option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="floating-label-form-group-with-value hidden" id="div_ParameterValue" style="border-bottom:0;">
                                                                                <label for="ddlParameterValue" id="lblParameterValues" class="font-bold scroll-x scroll-y">Value<span class="text-danger"> *</span></label>
                                                                                <input type="text" id="txtParameterValue" class="form-control floating-label-control " value=""/>
                                                                            </div>
																		</li>
																	</ul>
																</li>
																<li class="m-4 text-center">
																	<a href="javascript:void(0)" id="btn_AddParameterRow" class="btn btn-theme font-16" id="addparameters" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().bindParameterRow()">Add</a>
																</li>
                                                                <li class="m-4">
                                                                    <ul class="parametersortable" id="ulparamers">
<li class="bindParamterRow"> <div class="row font-14 box-shadow row-item ui-sortable-handle"> <div class="col-md-1 col-1 hidden border p-2 text-center"> <span class="text-dark font-weight-500">Index</span> </div><div class="col-md-12 col-12"> <div class="parameterrowheading font-14 row text-center font-weight-500"> <div class="col-sm-5 col-5 p-2 border"> Parameter Name</div><div class="col-sm-2 col-2 p-2 border"> Operator</div><div class="col-sm-5 col-5 p-2 border"> <span id="row3">Value</span> </div></div></div></div></li>
                                                                    </ul>
                                                                </li>
															</ul>
														</form>	
		                                            </div>
		                                            <footer class="d-flex justify-content-between border bg-white position-fixed py-2 w-45 px-3" style="bottom:0px;">
			                                            <a href="#" class="btn btn-light py-0 btn-adj-drawer-close">Close</a>
			                                            <a href="javascript:;" class="btn btn-theme py-0 btn-adj-drawer-close">Save</a>
		                                            </footer>
	                                            </div>
                                            </div>
                                       </li>
                                       <li class="pt-4"><p class="" style="color: #007D88;">App Configuration Details</p></li>
                                       <li class="pt-2">
                                            <div class="biz-adj-drawer-wrap h-100">
	                                            <button data-target="adj_drawer_configuration" data-clickevent="parameter" class="btn btn-secondary btn-wth-icon icon-left adj-drawer-open-parameters mb-15 btnAddNewConfiguration" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().addAppConfiguration(` + id + `);">Add New Configuration</button>
	                                            <div id="adj_drawer_configuration" class="biz-adj-drawer w-45 border ml-auto" style="left:0px; height:100vh;">
		                                            <header class="border-bottom border-dark" id="div_validation">
                                                        <p class="px-5 text-dark">Add New Configuration</p>
                                                    </header>
                                                    <div class="drawer-body pb-0 px-3" style="overflow-y:scroll;overflow-x:hidden">
			                                            <div class="AppConfigurations appConfigSortable" id="appConfigColumns">
                                                            <div class="AppConfig-row"></div>
                                                        </div>	
		                                            </div>
		                                            <footer class="d-flex justify-content-between border bg-white position-fixed py-2 w-45 px-3 appendconfigSaveNamesClass" style="bottom:0px;" >
			                                            <a href="#" class="btn btn-light py-0 btn-adj-drawer-close"onclick="Unibase.Platform.Widgets.Components.Widget.Instance().appModalconfigClose()">Close</a>
			                                            <a href="javascript:;" class="btn btn-theme py-0 btn-adj-drawer-close" 
				                                            onclick="Unibase.Platform.Widgets.Components.Widget.Instance().appendconfigSaveNames(` + InstalledAppId_html + `)">Save</a>
		                                            </footer>
	                                            </div> 
                                                <div id="AppConfigNames">
                                                    
                                                </div>
                                            </div>
                                       </li>
                                    </ul>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>`;
                        $("#widgetBuilderRightNav").html(RightSideBarhtml);
                    }
                    appModalconfigClose() {
                        $('.AppConfig-row.active.column-appconfigitem').remove();
                    }
                    appendconfigSaveNames(InstalledAppId) {
                        var instance = this;
                        var len = $('.AppConfig-row.active.column-appconfigitem').attr('data-length');
                        var roleid = Number($("#autocomplete_role_" + len + "").val());
                        var Roles = $("#txt_RoleSetting_" + len + " ").val();
                        var permission = $("#ddlPermission_" + len + " ").val();
                        var configtype = $("#ddlAppConfigType_" + len + " ").val();
                        var settingurltype = $("#ddlSettingUrlType_" + len + " ").val();
                        if (Number($("#ddlSettingUrlType_" + len + " ").val()) == Platform.Apps.Enums.SettingUrlType.Widget) {
                            var linkwidgetid = Number($("#ddlWidgets_" + len + " ").val());
                            if (linkwidgetid == 0) {
                                MessageHelper.Instance().showError("please select link widget", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Form) {
                            var forms = $("#autocomplete_Form_" + len + " ").val();
                            var roles = Number($("#autocomplete_role_" + len + "").val());
                            if (forms == null) {
                                MessageHelper.Instance().showError("please select Form", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                            if (roles == -1) {
                                MessageHelper.Instance().showError("please select Role", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                            if ($(".div_formrole_" + len + "").find("." + roleid + "_duplicate").length == 0) {
                                MessageHelper.Instance().showError("please add formrole", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.JsFunction) {
                            let SettingURL = $("#txt_SettingURL_" + len + "").val();
                            var dynamicjs = $("#txt_DynamicJs_" + len).val();
                            if (SettingURL == "") {
                                MessageHelper.Instance().showError("SettingURL Is Mandatory", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                            if (dynamicjs == "") {
                                MessageHelper.Instance().showError("Please Add Dynamicjs", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Dashboard) {
                            var dashboardid = Number($("#ddlDashboard_" + len + " ").val());
                            if (dashboardid == 0) {
                                MessageHelper.Instance().showError("Please Select Dashboard", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Dashboardgroup) {
                            var Dashboardgroupid = Number($("#ddlDashboardGroup_" + len + "").val());
                            if (Dashboardgroupid == 0) {
                                MessageHelper.Instance().showError("Please Select Dashboardgroup", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Procedure) {
                            var Procedurename = $("#txt_ProcedureName_" + len).val();
                            if (Procedurename == "") {
                                MessageHelper.Instance().showError("Procedurename Is Mandatory", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        Widget.Instance().len = $('.AppConfig-row').length;
                        let AppConfigguartionName = $('.AppConfig-row.active.AppConfig_' + len + '.column-appconfigitem').find('#txt_SettingName_' + len + '').val();
                        if (AppConfigguartionName && Roles && permission && configtype && settingurltype != null) {
                            let appconfightml = '<li class="d-flex flex-column bg-light my-3 p-2 rounded-2 liclassId" id="li_' + len + '"> <div class="d-flex flex-row text-dark biz-adj-drawer-wrap w-100"> <span class="border-bottom border-dashed border-dark p-1 w-70 text-truncate">' + AppConfigguartionName + '</span> <a href="javascript:void(0);" data-target="adj_drawer_configuration" data-clickevent="parameter" class="ml-auto my-auto px-2 EditAppConfiguration" data-lengthEdit=' + len + ' id="edit_icon_' + len + '" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().EditAppConfiguration(' + InstalledAppId + ',' + len + ');"> <i class="fa p-1 fa-edit text-dark"></i> </a> <a href="javascript:void(0);" class=" my-auto border-left px-2 DeleteAppConfiguration" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().DeleteAppConfiguration(' + InstalledAppId + ',' + len + ');"> <i class="fa p-1 fa-trash text-danger"></i> </a> </div></li>';
                            $("#AppConfigNames").append(appconfightml);
                            var elem = $('#li_' + len);
                            var InstalledAppId_ = Unibase.Themes.Providers.DetailHelper.installedAppId;
                            instance.bindList_New(elem, len, InstalledAppId_);
                            if ($("#chkUngrouped_1").is(':checked') == true) {
                                $('#config_widget_2250').html('<button class="btn btn-sm btn-primary pull-right  btn-rounded text-white" >' + $('#txt_SettingName_' + len).val() + '< /button>');
                            }
                            else {
                                $('#config_widget_2250').empty();
                            }
                        }
                        else {
                            MessageHelper.Instance().showError("Mandatory Fields Are Missing", "div_validation");
                            event.stopPropagation();
                        }
                    }
                    appendconfigSaveNames_(InstalledAppId) {
                        var instance = this;
                        var len = $('.AppConfig-row.active').attr('data-length');
                        var appconfigurationid = $('.hf_AppConfigurationId').val();
                        var roleid = Number($("#autocomplete_role_" + len + "").val());
                        var Roles = $("#txt_RoleSetting_" + len + " ").val();
                        var permission = $("#ddlPermission_" + len + " ").val();
                        var configtype = $("#ddlAppConfigType_" + len + " ").val();
                        var settingurltype = $("#ddlSettingUrlType_" + len + " ").val();
                        if (Number($("#ddlSettingUrlType_" + len + " ").val()) == Platform.Apps.Enums.SettingUrlType.Widget) {
                            var linkwidgetid = Number($("#ddlWidgets_" + len + " ").val());
                            if (linkwidgetid == 0) {
                                MessageHelper.Instance().showError("please select link widget", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Form) {
                            var forms = $("#autocomplete_Form_" + len + " ").val();
                            var roles = Number($("#autocomplete_role_" + len + "").val());
                            if (forms == null) {
                                MessageHelper.Instance().showError("please select Form", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                            if (roles == null) {
                                MessageHelper.Instance().showError("please select Role", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                            if ($(".div_formrole_" + len + "").find("." + roleid + "_duplicate").length == 0) {
                                MessageHelper.Instance().showError("please add formrole", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.JsFunction) {
                            let SettingURL = $("#txt_SettingURL_" + len + "").val();
                            let dynamicjs = $("#txt_DynamicJs_" + len + "").val();
                            if (SettingURL == "") {
                                MessageHelper.Instance().showError("SettingURL Is Mandatory", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                            if (dynamicjs == "") {
                                MessageHelper.Instance().showError("Please Add Dynamicjs", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Dashboard) {
                            var dashboardid = Number($("#ddlDashboard_" + len + " ").val());
                            if (dashboardid == 0) {
                                MessageHelper.Instance().showError("Please Select Dashboard", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Dashboardgroup) {
                            var Dashboardgroupid = Number($("#ddlDashboardGroup_" + len + "").val());
                            if (Dashboardgroupid == 0) {
                                MessageHelper.Instance().showError("Please Select Dashboardgroup", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        if ($("#ddlSettingUrlType_" + len + " ").val() == Platform.Apps.Enums.SettingUrlType.Procedure) {
                            var Procedurename = $("#txt_ProcedureName_" + len + "").val();
                            if (Procedurename == "") {
                                MessageHelper.Instance().showError("Procedurename Is Mandatory", "div_validation");
                                event.stopPropagation();
                                return false;
                            }
                        }
                        Widget.Instance().len = $('.AppConfig-row').length;
                        let AppConfigguartionName = $('.AppConfig-row.active.AppConfig_' + len + '.column-appconfigitem').find('#txt_SettingName_' + len + '').val();
                        if (AppConfigguartionName && Roles && permission && configtype && settingurltype != null) {
                            let appconfightml = '<div class="d-flex flex-row text-dark biz-adj-drawer-wrap w-100"> <span class="border-bottom border-dashed w-70 text-truncate border-dark p-1">' + AppConfigguartionName + '</span> <a href="javascript:void(0);" data-target="adj_drawer_configuration" data-clickevent="parameter" class="ml-auto my-auto px-2 EditAppConfiguration" data-lengthEdit=' + len + ' id="edit_icon_' + len + '" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().EditAppConfiguration(' + InstalledAppId + ',' + len + ');"> <i class="fa p-1 fa-edit text-dark"></i> </a> <a href="javascript:void(0);" class=" my-auto border-left px-2 DeleteAppConfiguration" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().DeleteAppConfiguration(' + InstalledAppId + ',' + len + ');"> <i class="fa p-1 fa-trash text-danger"></i> </a></div>';
                            $("#li_" + len).html(appconfightml);
                            let elem = $('#li_' + len);
                            let InstalledAppId_ = Unibase.Themes.Providers.DetailHelper.installedAppId;
                            instance.bindList_New(elem, len, InstalledAppId_);
                            if ($("#chkUngrouped_1").is(':checked') == true) {
                                $('#config_widget_2250').html('<button class="btn btn-sm btn-primary pull-right btn-rounded text-white">' + $('#txt_SettingName_' + len).val() + '</button>');
                            }
                            else {
                                $('#config_widget_2250').empty();
                            }
                        }
                        else {
                            MessageHelper.Instance().showError("Mandatory Fields Are Missing", "div_validation");
                            event.stopPropagation();
                        }
                    }
                    load(id, containerid, callback) {
                        var instance = this;
                        this.loadRightSideBar(id, containerid);
                        var InstalledAppId_load = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getColors().then(function (response) {
                            let dataOptions = [];
                        });
                        $("#btn-widget-close").click(function () {
                            $(".biz-submenu").css({ "z-index": "9999" });
                            $(".biz-layout-3-left-nav").css({ "z-index": "1040" });
                            let cls_nav_2 = $(".toplayout-structures-panel").hasClass("nav_2_layout");
                            if ($("#bizgaze_body").find("#dashboardWidget-modal-content").length == 0) {
                                $(".toplayout-structures-panel").css({ "z-index": "9999" });
                                $("#bizgaze_body").addClass("edit-dashboard-mode");
                            }
                            else {
                                $("#bizgaze_body").removeClass("edit-dashboard-mode");
                                $(".toplayout-structures-panel").css({ "z-index": "1040" });
                                $(".biz-submenu").css({ "z-index": "1040" });
                            }
                            Unibase.Platform.Helpers.NavigationHelper.Instance().closePopUp();
                            $('.biz-pg-wrapper').find('._bizgaze_detail_container').last().removeClass('hidden');
                            var designsPreviewIndex = Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.findIndex(x => x == 'designsPreviewAppend');
                            Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance.filter(function (o) {
                                if (o.childcontainerid === "designsPreviewAppend") {
                                    Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance.pop();
                                }
                            });
                            if (designsPreviewIndex != -1) {
                                Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.splice(designsPreviewIndex, 1);
                            }
                        });
                        Widget.Instance().bindWidgetTypes(id);
                        Widget.Instance().bindWidgetFormats();
                        Widget.Instance().bindReports();
                        Widget.Instance().bindWidgetLayouts();
                        Widget.Instance().loadIdentity();
                        Widget.Instance().loadInstalledapp(id);
                        Widget.Instance().DeleteConfigurationIds = "0";
                        $("#ddlWidgetType").on("change", function () {
                            var widgetTypeName = $(this).children("option:selected").text();
                            var lowerCaseWidgetType = widgetTypeName.toLowerCase();
                            if (RegExp("dashboard").test(lowerCaseWidgetType)) {
                                $('#ddlAppProviders').val(null).trigger('change');
                                $("#appProviders").addClass("hidden");
                                $("#ddlAppProviders").removeClass("required");
                                $("#span_ddlappprovider").addClass("hidden");
                                $(".AppConfigurations").find(".AppConfig-row").each(function (e) {
                                    $(this).find(".FormInstallAppId").prop('disabled', false);
                                });
                            }
                            else if (RegExp("app").test(lowerCaseWidgetType)) {
                                $("#appProviders").removeClass("hidden");
                                $("#ddlAppProviders").addClass("required");
                                $("#span_ddlappprovider").removeClass("hidden");
                                Widget.Instance().loadInstalledapp(id);
                                $(".AppConfigurations").find(".AppConfig-row").each(function (e) {
                                    $(this).find(".FormInstallAppId").prop('disabled', true);
                                });
                            }
                            else {
                                $("#appProviders").addClass("hidden");
                                $("#ddlAppProviders").removeClass("required");
                                $("#span_ddlappprovider").addClass("hidden");
                                Widget.Instance().loadInstalledapp(id);
                                $(".AppConfigurations").find(".AppConfig-row").each(function (e) {
                                    $(this).find(".FormInstallAppId").prop('disabled', true);
                                });
                            }
                        });
                        $("#ddlWidgetDesign").on("change", function () {
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_Default" || $("#ddlWidgetDesign option:selected").text() == "KPI_Icon" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithborder" || $("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon" || $("#ddlWidgetDesign option:selected").text() == "KPI_Icon_Color" || $("#ddlWidgetDesign option:selected").text() == "KPI_Icon_Bg_Color") {
                                $("#div_Value1").removeClass('hidden');
                                $("#div_Value2").addClass('hidden');
                                $("#div_Value3").addClass('hidden');
                                $("#ddlSelectedLabelValue_1").parent().addClass('hidden');
                                $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                $("#ddlSelectedLabelValue_3").parent().addClass('hidden');
                            }
                            else if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BottomBar_color" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BgColor" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_LineCenter" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_PieIcon" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_ProgressBar" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_BgColor" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPie_Icon") {
                                $("#div_Value1").removeClass('hidden');
                                $("#div_Value2").removeClass('hidden');
                                $("#div_Value3").addClass('hidden');
                                $("#ddlSelectedLabelValue_1").parent().removeClass('hidden');
                                $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                $("#ddlSelectedLabelValue_3").parent().addClass('hidden');
                                if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_LineCenter") {
                                    $("#ddlSelectedLabelValue_1").parent().removeClass('hidden');
                                    $("#ddlSelectedLabelValue_2").parent().removeClass('hidden');
                                    $("#ddlSelectedLabelValue_3").parent().addClass('hidden');
                                }
                                if ($("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_ProgressBar" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_BgColor") {
                                    $("#ddlSelectedLabelValue_1").parent().addClass('hidden');
                                    $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                }
                            }
                            else if (($("#ddlWidgetDesign option:selected").text()) == "KPI_Comparison" || ($("#ddlWidgetDesign option:selected").text()) == "Kpi_fulfillment" || ($("#ddlWidgetDesign option:selected").text()) == "KPI_ComparisonRightBar_color" || ($("#ddlWidgetDesign option:selected").text()) == "KPI_ComparisonBottomBar_Color") {
                                $("#div_Value1").removeClass('hidden');
                                $("#div_Value2").removeClass('hidden');
                                $("#div_Value3").removeClass('hidden');
                                if (($("#ddlWidgetDesign option:selected").text() == "KPI_ComparisonRightBar_color") || ($("#ddlWidgetDesign option:selected").text() == "KPI_ComparisonBottomBar_Color")) {
                                    $("#ddlSelectedLabelValue_1").parent().removeClass('hidden');
                                    $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                    $("#ddlSelectedLabelValue_3").parent().addClass('hidden');
                                }
                            }
                            else {
                                $("#div_Value1").addClass('hidden');
                                $("#div_Value2").addClass('hidden');
                                $("#div_Value3").addClass('hidden');
                            }
                        });
                        $("#ddlparametertype").on("change", function () {
                            if ($("#ddlparametertype").val() == 1) {
                                $("#div_ParameterValue").addClass("hidden");
                                $("#div_ParameterValues").removeClass("hidden");
                            }
                            else {
                                $("#div_ParameterValues").addClass("hidden");
                                $("#div_ParameterValue").removeClass("hidden");
                            }
                        });
                        $("#ddlColumnConv").on("change", function () {
                            if ($("#ddlColumnConv option:selected").val() == 2) {
                                $("#div_WidgetColumnConvType").removeClass("hidden");
                                $("#ddlColumnConvType").empty();
                                $("#ddlColumnConvType").append('<option value="DD/MM/YYYY">DD/MM/YYYY</option><option value="MM/DD/YYYY">MM/DD/YYYYY</option>');
                                $("#lblColumnConvType").text("Select Format");
                            }
                            else if ($("#ddlColumnConv option:selected").val() == 1) {
                                $("#div_WidgetColumnConvType").removeClass("hidden");
                                $("#ddlColumnConvType").empty();
                                $("#ddlColumnConvType").append('<option value="2">2</option><option value="3">3</option>');
                                $("#lblColumnConvType").text("Select Digit");
                            }
                            else if ($("#ddlColumnConv option:selected").val() == 3) {
                                $("#div_WidgetColumnConvType").removeClass("hidden");
                                $("#ddlColumnConvType").empty();
                                $("#ddlColumnConvType").append('<option value="3">3</option>');
                            }
                            else {
                                $("#div_WidgetColumnConvType").addClass("hidden");
                                $("#ddlColumnConvType").empty();
                            }
                        });
                        $('#PivotIcon').on("click", function () {
                            $('#closed').removeClass('hidden');
                            $(this).addClass('d-none');
                            ;
                            $('.drawer-close.close').addClass('hidden');
                        });
                        $('#closed').on("click", function () {
                            $('#PivotIcon').removeClass('d-none');
                            $(this).addClass('hidden');
                            $('.drawer-close.close').click();
                        });
                        $('#txt_WidgetName').on("change", function () {
                            let TitleName = $('#txt_WidgetName').val();
                            $('.widgetTitleName').text(TitleName);
                            $('#hf_kpi_widgetName_2250').text(TitleName);
                        });
                        $('#ddlLinkReportId').on("change", function () {
                            $('#showreport_2250').removeClass('hidden');
                        });
                        $("#layoutKPI").on("click", function () {
                            $('#div_DesignName').addClass('hidden');
                            $('#div_WidgetURL').children().addClass('hidden');
                            if ($('#ddlReport').val() == 'undefined' || $('#ddlReport').val() == null) {
                                $('#ddlReport').addClass('required').removeClass('hidden');
                                $('.ReportDiv').removeClass('hidden');
                                $('#div_WidgetURL').children().addClass('hidden');
                                MessageHelper.Instance().showError("Report Mandatory field is missing", "bizgaze_ValidationSummary");
                                $('.layoutType a').find('span.rounded-circle').remove();
                            }
                            else {
                                $('.layoutType a').find('span.rounded-circle').remove();
                                let html = '<span class="bg-success mt-180 rounded-circle p-1 position-absolute"><i class="la la-check font-24 text-white"></i></span>';
                                $(this).append(html);
                                $('#txt_WidgetUrlFile').val("");
                                $('.columntab span').text('Columns');
                                $('.settings span').text('Settings');
                                instance.backOption = 'Mode-1';
                                let layoutid = $('#layoutKPI').attr('data-layoutid');
                                $("#ddlWidgetLayout").val(layoutid);
                                $('#option-back').removeClass('hidden');
                                $('#layout-tab').addClass('hidden');
                                $('#kpi-design-tab').removeClass('hidden');
                                $('#kpi-design-tab').click();
                                $('#ddlWidgetLayout').change();
                                $("#ddlWidgetDesign").change();
                            }
                        });
                        $("#layoutDetails").on("click", function () {
                            $('#div_LinkReportId').parent().addClass('hidden');
                            $('#li_WidgetDetaillinkURL').addClass('hidden');
                            if ($('#ddlReport').val() == 'undefined' || $('#ddlReport').val() == null) {
                                $('#ddlReport').addClass('required').removeClass('hidden');
                                $('.ReportDiv').removeClass('hidden');
                                $('#div_WidgetURL').children().addClass('hidden');
                                MessageHelper.Instance().showError("Report Mandatory field is missing", "bizgaze_ValidationSummary");
                                $('.layoutType a').find('span.rounded-circle').remove();
                            }
                            else {
                                instance.backOption = 'Mode-1';
                                $('.layoutType a').find('span.rounded-circle').remove();
                                let html = '<span class="bg-success mt-180 rounded-circle p-1 position-absolute"><i class="la la-check font-24 text-white"></i></span>';
                                $(this).append(html);
                                $('.columntab span').text('Columns');
                                $('.settings span').text('Settings');
                                let layoutid = $('#layoutDetails').attr('data-layoutid');
                                $("#ddlWidgetLayout").val(layoutid);
                                $('#option-back').removeClass('hidden');
                                $('#layout-tab').addClass('hidden');
                                $('#kpi-design-tab').removeClass('hidden');
                                $('#kpi-design-tab').click();
                                $('#ddlWidgetLayout').change();
                                $("#ddlWidgetDesign").change();
                            }
                        });
                        $("#layoutChartReport").on("click", function () {
                            if ($('#ddlReport').val() == 'undefined' || $('#ddlReport').val() == null) {
                                $('#ddlReport').addClass('required').removeClass('hidden');
                                $('.ReportDiv').removeClass('hidden');
                                $('#div_WidgetURL').children().addClass('hidden');
                                $('.layoutType a').find('span.rounded-circle').remove();
                                MessageHelper.Instance().showError("Report Mandatory field is missing", "bizgaze_ValidationSummary");
                            }
                            else {
                                instance.backOption = 'Mode-1';
                                $('#txt_WidgetUrlFile').val("");
                                $('.layoutType a').find('span.rounded-circle').remove();
                                let html = '<span class="bg-success mt-180 rounded-circle p-1 position-absolute"><i class="la la-check font-24 text-white"></i></span>';
                                $(this).append(html);
                                $('.div_DesignName').addClass('hidden');
                                $('#div_WidgetURL').children().addClass('hidden');
                                let layoutid = $('#layoutChartReport').attr('data-layoutid');
                                $("#ddlWidgetLayout").val(layoutid);
                                $('#option-back').removeClass('hidden');
                                $('#layout-tab').addClass('hidden');
                                $('#kpi-design-tab').removeClass('hidden');
                                $('#kpi-design-tab').click();
                                $('#ddlWidgetLayout').change();
                                $("#ddlWidgetDesign").change();
                            }
                        });
                        $("#layoutUserDesigned").on("click", function () {
                            $('#txt_WidgetUrlFile').addClass('required').removeClass('hidden').parent().removeClass('hidden');
                            $('#ddlReport').removeClass('required');
                            $('.ReportDiv').addClass('hidden');
                            $('#li_WidgetDetaillinkURL').addClass('hidden');
                            $('#div_LinkReportId').parent().addClass('hidden');
                            if ($('#txt_WidgetUrlFile').val() == "") {
                                $('.userDesignedURL').removeClass('hidden');
                                $('.layoutType a').find('span.rounded-circle').remove();
                                MessageHelper.Instance().showError("Please Enter Widget URL Mandatory fields", "bizgaze_ValidationSummary");
                            }
                            else {
                                $('.layoutType a').find('span.rounded-circle').remove();
                                let html = '<span class="bg-success mt-180 rounded-circle p-1 position-absolute"><i class="la la-check font-24 text-white"></i></span>';
                                $(this).append(html);
                                instance.backOption = 'Mode-1';
                                $('.columntab span').text('Columns');
                                $('.settings span').text('Settings');
                                let layoutid = $('#layoutUserDesigned').attr('data-layoutid');
                                $("#ddlWidgetLayout").val(layoutid);
                                $("#ddlWidgetDesign").removeClass('required');
                                $('#kpi-design-tab').parent().addClass('hidden');
                                $('#kpiiconstyle').parent().addClass('hidden');
                                $("#layout-tab").addClass('hidden');
                                $('#option-back').removeClass('hidden');
                                $('.userDesignedURL').removeClass('hidden');
                                $('#ddlheight').removeClass('required');
                                $('#Preview-Designs').removeClass('hidden').click();
                                instance.CreateWidgetPreview();
                            }
                        });
                        $("#option-back").on("click", function () {
                            $('#biz-wrapper').removeClass('biz-drawer-pushright');
                            $('#drawer_push').removeClass('biz-drawer-toggle');
                            if (instance.backOption == 'Mode-1') {
                                instance.backOption = '';
                                $(this).addClass('hidden');
                                $('#layout-tab').removeClass('hidden');
                                $('#layout-tab').click();
                                $('#kpi-design-tab').addClass('hidden');
                                $('#Preview-Designs').addClass('hidden');
                            }
                            if (instance.backOption == 'Mode-2') {
                                instance.backOption = 'Mode-1';
                                $('.designsPreviewAppend .kpi_card_class_2250').remove();
                                $('.static_js_hidden, #tab_static_js').removeClass('active show').addClass('hidden');
                                $('#option-back').removeClass('hidden');
                                $('#Preview-Designs').addClass('hidden');
                                $('#kpi-design-tab').removeClass('hidden');
                                $('#kpi-design-tab').click();
                                let defaultMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                                defaultMode[0].defaultMode = 'create';
                                $('#frmUnibase_widgetBuilderAppearance').trigger("reset");
                            }
                        });
                        $('#detailCustomDesign').on("click", function () {
                            $(this).addClass('hidden');
                            $('#staticJsTab').addClass('hidden');
                            $('#Preview-Designs').removeClass('hidden').click();
                            instance.CreateWidgetPreview();
                        });
                        $("#font-size").on("change", function () {
                            $('.textProperty_2250').css("fontSize", $(this).val() + "px");
                            if ($("#ddlWidgetDesign option:selected").text() == "Details_Double_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_SingleData" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column_NoBorder") {
                                $('.detailProperty_2250').css({ "fontSize": $(this).val() + "px" });
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_CarouselSliderBgColor") {
                                $('.textPropertyOwl_').css("fontSize", $(this).val() + "px");
                            }
                        });
                        $("#font-style").on("change", function () {
                            $('.textProperty_2250').css("font-family", $(this).val() + '');
                            if ($("#ddlWidgetDesign option:selected").text() == "Details_Double_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_SingleData" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column_NoBorder") {
                                $('.detailProperty_2250').css({ "font-family": $(this).val() + '' });
                            }
                        });
                        $("#border-width").on("change", function () {
                            $('.kpi_card_class_2250').css("border-width", $(this).val() + '');
                            if ($("#ddlWidgetDesign option:selected").text() == "Details_Double_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_SingleData" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column_NoBorder") {
                                $('.detailProperty_2250').css({ "border-top": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val() });
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithborder") {
                                $('.kpi_card_class_2250').css({ "border-bottom": "10px solid" + $("#border-color").val() });
                                $('.kpi_card_class_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val() });
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon") {
                                $('.kpi-card-left_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val(), "border-radius": $('#border-radius').val() + " 0px 0px " + $('#border-radius').val() });
                                $('.kpi-card-right_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val(), "border-radius": "0px " + $('#border-radius').val() + " " + $('#border-radius').val() + " 0px" });
                            }
                        });
                        $("#border-type").on("change", function () {
                            $('.kpi_card_class_2250').css("border-style", $(this).val() + '');
                            if ($("#ddlWidgetDesign option:selected").text() == "Details_Double_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_SingleData" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column_NoBorder") {
                                $('.detailProperty_2250').css({ "border-top": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val() });
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithborder") {
                                $('.kpi_card_class_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val() });
                                $('.kpi_card_class_2250').css({ "border-bottom": "10px solid" + $("#border-color").val() });
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon") {
                                $('.kpi-card-left_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val(), "border-radius": $('#border-radius').val() + " 0px 0px " + $('#border-radius').val() });
                                $('.kpi-card-right_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val(), "border-radius": "0px " + $('#border-radius').val() + " " + $('#border-radius').val() + " 0px" });
                            }
                        });
                        $("#ddlheight").on("change", function () {
                            var calheight1, calheight2, height;
                            $('.kpi_card_class_2250').css("height", $(this).val() + '');
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BottomBar_color" || $("#ddlWidgetDesign option:selected").text() == "KPI_ComparisonBottomBar_Color") {
                                height = $(this).val();
                                height = parseInt(height.replace(/px/g, ''));
                                calheight1 = height * 0.66;
                                calheight1 = parseInt(Unibase.Core.Helpers.NumberHelper.Instance().roundNumber(calheight1, 0));
                                calheight2 = height - calheight1;
                                $('.kpi_card_class_2250').find('[data-height="height1"]').css("height", calheight1 + 'px');
                                $('.kpi_card_class_2250').find('[data-height="height2"]').css("height", calheight2 + 'px');
                            }
                        });
                        $("#border-radius").on("change", function () {
                            $('.kpi_card_class_2250').css("border-radius", $(this).val() + '');
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon" || $("#ddlWidgetDesign option:selected").text() == "KPI_ComparisonRightBar_color") {
                                $('.bgcolorset_2250').css("border-radius", $(this).val() + ' 0px 0px ' + $(this).val());
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_ComparisonRightBar_color") {
                                $('.bgcolorset_2250').css("border-radius", '0px ' + $(this).val() + ' ' + $(this).val() + ' 0px');
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BottomBar_color") {
                                $('.color_2250').css("border-radius", ' 0px 0px ' + $(this).val() + ' ' + $(this).val());
                            }
                            if ($("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon") {
                                $('.kpi-card-left_2250').css({ "border-radius": $('#border-radius').val() + " 0px 0px " + $('#border-radius').val() });
                                $('.kpi-card-right_2250').css({ "border-radius": "0px " + $('#border-radius').val() + " " + $('#border-radius').val() + " 0px" });
                            }
                        });
                        $("#ddlReport").on("change", function () {
                            $('#header_Report_name').text($("#ddlReport :selected").text());
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            if (EditMode[0].mode == 'Create_Mode') {
                                $('#ulcolumns').empty();
                                $('#widget_details_2250_col').empty();
                                $('#widget_details_2250_col1').empty();
                                $('#widget_details_2250_col2').empty();
                                instance.getReportColumns(false);
                            }
                        });
                        $("#ddlWidgetDesign").on("change", function () {
                            if ($('#ddlReport option:selected').val() == undefined) {
                                alert('Please select Report Id');
                            }
                            else {
                                var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                                if (EditMode[0].mode == 'Create_Mode') {
                                }
                            }
                        });
                        $('#ddlSelectedValue_1').on("change", function () {
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            if (EditMode[0].mode == 'Create_Mode') {
                                Widget.Instance().CreateWidgetPreview();
                            }
                        });
                        $('#ddlSelectedValue_2').on("change", function () {
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            if (EditMode[0].mode == 'Create_Mode') {
                                Widget.Instance().CreateWidgetPreview();
                            }
                        });
                        $('#ddlSelectedValue_3').on("change", function () {
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            if (EditMode[0].mode == 'Create_Mode') {
                                Widget.Instance().CreateWidgetPreview();
                            }
                        });
                        $('#ddlSelectedLabelValue_1').on("change", function () {
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            if (EditMode[0].mode == 'Create_Mode') {
                                Widget.Instance().CreateWidgetPreview();
                            }
                        });
                        $('#ddlSelectedLabelValue_2').on("change", function () {
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            if (EditMode[0].mode == 'Create_Mode') {
                                Widget.Instance().CreateWidgetPreview();
                            }
                        });
                        $('#ddlSelectedLabelValue_3').on("change", function () {
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            if (EditMode[0].mode == 'Create_Mode') {
                                Widget.Instance().CreateWidgetPreview();
                            }
                        });
                        $("#border-type-details").on("change", function () {
                            $('#widget_details_2250').css({
                                "border": $('#border-width-details').val() + ' ' + $("#border-type-details").val() + ' ' + $("#border-color-details").val()
                            });
                        });
                        $("#border-width-details").on("change", function () {
                            $('#widget_details_2250').css({
                                "border": $('#border-width-details').val() + ' ' + $("#border-type-details").val() + ' ' + $("#border-color-details").val()
                            });
                        });
                        $("#border-radius-details").on("change", function () {
                            $('#widget_details_2250').css({ "border-radius": $('#border-radius-details').val() + '' });
                        });
                        $('#list-style-type').on("change", function () {
                            $('.widget_details_item2250_col1').css({ 'list-style-type': $(this).val() + '' });
                            $('.widget_details_item2250_col2').css({ 'list-style-type': $(this).val() + '' });
                            $('.detailProperty_2250').css({ 'list-style-type': $(this).val() + '' });
                        });
                        let pickerElements = [
                            { id: "#backgroundcolor-color-picker", class: "backgroundcolor-color-picker" },
                            { id: "#border-color", class: "border-color" },
                            { id: "#border-color-details", class: "details-border-color" },
                        ];
                        pickerElements.forEach((el) => {
                            let element = $(el.id);
                            let palette = [
                                ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
                                ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
                                ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
                                ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
                                ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
                                ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
                                ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
                                ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
                            ];
                            if (el.id === '#backgroundcolor-color-picker' && instance.themePaletteId) {
                                instance.initializeColorPicker(element, el.class, instance.themePalette, true, 'more');
                            }
                            else {
                                instance.initializeColorPicker(element, el.class, palette, false, false);
                            }
                        });
                        $("#ulcolumns").sortable({
                            update: function () {
                                Unibase.Platform.Widgets.Components.Widget.Instance().bindReportColumnOnSortable();
                            }
                        });
                    }
                    initializeColorPicker(element, elClass, palette, showPaletteOnly, togglePaletteOnly) {
                        const instance = this;
                        element.spectrum({
                            color: "yellow",
                            type: "color",
                            showInput: true,
                            maxSelectionSize: 1,
                            showInitial: true,
                            allowEmpty: false,
                            showAlpha: false,
                            disabled: false,
                            localStorageKey: false,
                            showPaletteOnly: showPaletteOnly,
                            togglePaletteOnly: togglePaletteOnly,
                            clickoutFiresChange: true,
                            containerClassName: elClass,
                            replacerClassName: elClass,
                            showPalette: true,
                            palette: palette,
                            showSelectionPalette: true,
                            selectionPalette: ["red", "green", "blue"],
                            locale: 'fr',
                            togglePaletteMoreText: 'More',
                            togglePaletteLessText: 'Less',
                            clearText: "",
                            noColorSelectedText: "",
                            showButtons: true,
                            chooseText: "Choose",
                            cancelText: "Close",
                            move: function (color) {
                                let convertedColor = "#" + color.toHex();
                                let id = $(this).attr('id');
                                if (id == "backgroundcolor-color-picker") {
                                    instance.addBackgroundColor(convertedColor);
                                }
                                if (id == "border-color") {
                                    instance.addBorderColor(convertedColor);
                                }
                                if (id == "border-color-details") {
                                    instance.addDetailsColor(convertedColor);
                                }
                            },
                            hide: function (color) {
                                $(this).trigger('change');
                            }
                        });
                    }
                    addBorderColor(color) {
                        $('.kpi_card_class_2250').css("border-color", color);
                        if ($("#ddlWidgetDesign option:selected").text() == "Details_Double_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_SingleData" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column_NoBorder") {
                            $('.detailProperty_2250').css({ "border-top": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + color });
                        }
                        if ($("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithborder") {
                            $('.kpi_card_class_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + color });
                            $('.kpi_card_class_2250').css({ "border-bottom": "10px solid" + color });
                        }
                        if ($("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon") {
                            $('.kpi-card-left_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val(), "border-radius": $('#border-radius').val() + " 0px 0px " + $('#border-radius').val() });
                            $('.kpi-card-right_2250').css({ "border": $('#border-width').val() + ' ' + $("#border-type").val() + ' ' + $("#border-color").val(), "border-radius": "0px " + $('#border-radius').val() + " " + $('#border-radius').val() + " 0px" });
                        }
                    }
                    addBackgroundColor(convertedColor) {
                        $('#backgroundcolor').css("background-color", convertedColor);
                        $('#backgroundcolor').attr("data-backgroundcolor", convertedColor);
                        $('.bgcolorset_2250').css("background-color", convertedColor);
                        if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_LineCenter") {
                            $('.kpi_card_class_2250').css("background-color", convertedColor);
                        }
                        if ($("#ddlWidgetDesign option:selected").text() == "Details_Double_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column" || $("#ddlWidgetDesign option:selected").text() == "Details_SingleData" || $("#ddlWidgetDesign option:selected").text() == "Details_Single_Column_NoBorder") {
                            $('#widget_details_2250').css({ "background-color": convertedColor });
                            $('.detailProperty_2250').css({ "background-color": convertedColor });
                        }
                        if ($("#ddlWidgetDesign option:selected").text() == "KPI_Icon_Bg_Color") {
                            $('.textProperty_2250').css("color", convertedColor);
                        }
                    }
                    addDetailsColor(bordercolor) {
                        $('#widget_details_2250').css({
                            "border": $('#border-width-details').val() + ' ' + $("#border-type-details").val() + ' ' + bordercolor
                        });
                    }
                    CreateWidgetPreview() {
                        var instance = this;
                        let widgetDesignIDcreate = $('#ddlWidgetDesign option:selected').text();
                        var CreateWidget = [], previewResponse, result;
                        var parameters = {
                            WidgetId: 0,
                            PortletWidgetId: 0,
                            InstalledAppId: 0,
                            ReportId: Number($('#ddlReport').val()),
                            InputParameters: []
                        };
                        let TitleName, DetailWidgetPropertiesRes = [];
                        if ($('#txt_WidgetName').val() == '') {
                            TitleName = "Widget Name";
                        }
                        else {
                            TitleName = $('#txt_WidgetName').val();
                        }
                        CreateWidget.push({ "WidgetName": TitleName, "PortletWidgetId": 2250 });
                        let default_Settings = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === widgetDesignIDcreate; });
                        let defaultMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                        if ($('.designsPreviewAppend .kpi_card_class_2250').length == 0) {
                            let { FontSize, FontStyle, BorderType, BorderWidth, BorderColor, BorderRadius, KpiHeight, BackgroundColor } = JSON.parse(default_Settings[0].defaultsettings);
                            if (instance.themePaletteId) {
                                BackgroundColor = instance.themePalette[Math.floor(Math.random() * instance.themePalette.length)];
                            }
                            if ($('#ddlWidgetLayout option:selected').text() === 'Detail') {
                                BackgroundColor = '#fff';
                            }
                            $("#font-size").val(FontSize);
                            $("#font-style").val(FontStyle);
                            $("#border-type").val(BorderType);
                            $("#border-width").val(BorderWidth);
                            $("#border-color").val(BorderColor).trigger('change');
                            $("#border-radius").val(BorderRadius);
                            let height = KpiHeight;
                            $("#ddlheight").val(height.replace(/px/g, ''));
                            $("#backgroundcolor-color-picker").val(BackgroundColor).trigger('change');
                            $("#backgroundcolor").css({ 'background-color': BackgroundColor }).attr('data-backgroundcolor', BackgroundColor);
                            ;
                        }
                        var CssPropertyCreate = [];
                        CssPropertyCreate = [{
                                "BorderWidth": $('#border-width').val(),
                                "BorderColor": $('#border-color').val(),
                                "BorderType": $('#border-type').val(),
                                "BorderRadius": $('#border-radius').val(),
                                "FontSize": $('#font-size').val(),
                                "FontFamily": $('#font-style').val(),
                                "BackgroundColor": $('#backgroundcolor').attr('data-backgroundcolor'),
                                "ListStyleType": $('#list-style-type').val(),
                                "DetailsBorderType": $('#border-type-details').val(),
                                "DetailsBorderWidth": $('#border-width-details').val(),
                                "DetailsBorderColor": $('#border-color-details').val(),
                                "DetailsBorderRadius": $('#border-radius-details').val(),
                                "ReportCollapase": $('#report_collapase').prop("checked")
                            }];
                        if ($('#ddlWidgetLayout option:selected').text() == "KPI") {
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getKpiPreviewData(parameters.ReportId).then(function (response) {
                                var viewertype = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === widgetDesignIDcreate; });
                                let _Data = '';
                                if (response.result != null) {
                                    _Data = response.result.Data;
                                }
                                if (response.result == null) {
                                    MessageHelper.Instance().showError("Report is Inactive Mode " + response.message, "bizgaze_ValidationSummary");
                                }
                                var classname = JSON.parse(viewertype[0].defaultsettings).classname;
                                let KpiSettings = [{
                                        "DataType": $('#kpidataType_1 option:selected').val() + "," + $('#kpidataType_2 option:selected').val() + "," + $('#kpidataType_3 option:selected').val(),
                                        "IsRoundOff": $('#kpi_isroundoff_1[type=checkbox]').is(':checked') + "," + $('#kpi_isroundoff_2[type=checkbox]').is(':checked') + "," + $('#kpi_isroundoff_3[type=checkbox]').is(':checked')
                                    }];
                                result = {
                                    AppConfigurations: [],
                                    CssProperty: JSON.stringify(CssPropertyCreate),
                                    Data: _Data,
                                    Icon: instance.imageSrc,
                                    IsMaximize: false,
                                    KpiHeight: $("#ddlheight").val() + 'px',
                                    LinkReportId: $('#ddlLinkReportId :selected').val(),
                                    LinkUrl: $('#txt_DetaillinkURL').val(),
                                    ReportId: $('#ddlReport :selected').val(),
                                    ReportName: $('#ddlReport :selected').text(),
                                    Selected_Columns: $('#ddlSelectedValue_1 :selected').text() + ',' + $('#ddlSelectedValue_2 :selected').text() + ',' + $('#ddlSelectedValue_3 :selected').text(),
                                    Selected_Columns_Labels: $('#ddlSelectedLabelValue_1').val() + ',' + $('#ddlSelectedLabelValue_2').val() + ',' + $('#ddlSelectedLabelValue_3').val(),
                                    Js: 'Unibase.Themes.Compact.KpiWidgets.' + classname + '.Instance()',
                                    JsPath: '',
                                    KpiSetting: JSON.stringify(KpiSettings)
                                };
                                previewResponse = { result };
                                var viewerComponent = new Unibase.Themes.Compact.KpiWidgets[classname]();
                                var html = viewerComponent.html(CreateWidget, 0);
                                $('#designsPreviewAppend').html(html);
                                if (classname == 'Kpi_fulfillment') {
                                    Unibase.Platform.Widgets.Components._Widget.Instance().KpiCode();
                                }
                                viewerComponent.loadData(2250, "designsPreviewAppend", parameters, false, previewResponse);
                            });
                        }
                        if ($('#ddlWidgetDesign option:selected').text() != "Select Widget Design") {
                            if ($('#ddlWidgetLayout option:selected').text() == "Report") {
                                let ReportIdPreview = $('#ddlReport option:selected').val();
                                $('#designsPreviewAppend').empty();
                                var obj = Unibase.Platform.Analytics.Components.ReportViewer.Instance();
                                setTimeout(function () {
                                    instance.navigationHelper.popin(Number(ReportIdPreview), 'designsPreviewAppend', obj, null);
                                    $('.nav-link.reportview-remove-none').removeClass('d-none');
                                }, 200);
                            }
                        }
                        if ($('#ddlWidgetLayout option:selected').text() == "User Designed") {
                            let widgeturl = [];
                            $('#biz-wrapper').addClass('biz-drawer-pushright');
                            $('#drawer_push').addClass('biz-drawer-toggle');
                            widgeturl = $('#txt_WidgetUrlFile').val().toString().split(',');
                            $('#designsPreviewAppend').empty();
                            var viewerComponent = widgeturl[1] + ".init('designsPreviewAppend')";
                            instance.fileCacheHelper.loadJsFile(widgeturl[0], function () {
                                eval(viewerComponent);
                            });
                        }
                        if ($('#ddlWidgetLayout option:selected').text() == 'Detail') {
                            if ($('#ulcolumns li').length != 0) {
                                for (var i = 1; i <= $('#ulcolumns li').length; i++) {
                                    let DetailWidgetPropertiesData = {
                                        "ConverterType": "", "ConverterValue": "", "DetailWidgetId": 0,
                                        "DetailsWidgetPropertyId": $('#columnId_' + i).find('#row0').text(), "HyperLink": $('#columnId_' + i).find('#row4').text(), "Label": $('#columnId_' + i).find('#row3').text(), "PropertyIndex": 0, "Value": '{{' + $('#columnId_' + i).find('#row1').text() + '}}'
                                    };
                                    DetailWidgetPropertiesRes.push(DetailWidgetPropertiesData);
                                }
                            }
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getPreviewDetailWidgetData(parameters).then(function (response) {
                                result = {
                                    AppConfiguration: {
                                        "AppConfigType": 0, "AppConfigurationId": 0, "AppPermissionId": 0, "AppUniqueId": "", "Description": "", "DynamicJs": "", "FormAppTitle": "", "FormId": 0, "FormInstalledAppId": 0, "FormPrimaryColumn": null, "InstalledAppId": 0, "InstalledAppGuid": 0, "PropertyIndex": 0, "Permission": 0, "PermissionName": null, "SettingDesignHtml": null, "SettingName": null, "SettingUrl": null, "SettingUrlType": 0, "StageId": 0, "StageName": null, "StatusId": 0, "StatusName": null, "SystemName": null, "TenantId": 0, "Ungrouped": false, "UniqueId": null, "VersionGuid": null, "WidgetId": 0
                                    },
                                    CssProperty: JSON.stringify(CssPropertyCreate),
                                    Data: response.result.Data,
                                    DetailWidgetProperties: DetailWidgetPropertiesRes,
                                    Icon: '',
                                    Js: "",
                                    LinkUrl: $('#txt_DetaillinkURL').val(),
                                    WidgetName: TitleName,
                                };
                                previewResponse = { result };
                                var viewertype = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === widgetDesignIDcreate; });
                                var default_Settings = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === widgetDesignIDcreate; });
                                if (default_Settings[0].count == 0) {
                                    $("#font-size").val(JSON.parse(default_Settings[0].defaultsettings).FontSize);
                                    $("#font-style").val(JSON.parse(default_Settings[0].defaultsettings).FontStyle);
                                    $("#border-type").val(JSON.parse(default_Settings[0].defaultsettings).BorderType);
                                    $("#border-width").val(JSON.parse(default_Settings[0].defaultsettings).BorderWidth);
                                    $("#border-color").val(JSON.parse(default_Settings[0].defaultsettings).BackgroundColor).trigger('change');
                                    $("#backgroundcolor-color-picker").val(JSON.parse(default_Settings[0].defaultsettings).BorderColor).trigger('change');
                                    $("#border-radius").val(JSON.parse(default_Settings[0].defaultsettings).BorderRadius);
                                    $("#ddlheight").val(JSON.parse(default_Settings[0].defaultsettings).KpiHeight);
                                    $("#backgroundcolor").css({ 'background-color': JSON.parse(default_Settings[0].defaultsettings).BackgroundColor });
                                    $('#backgroundcolor').attr('data-backgroundcolor', JSON.parse(default_Settings[0].defaultsettings).BackgroundColor);
                                    JSON.parse(default_Settings[0].defaultsettings).count++;
                                }
                                let report_id = Number($('#ddlReport option:selected').val());
                                let obj = [];
                                let staticjspath = $(".summernote_StaticJsFunction").val().toString();
                                if (widgetDesignIDcreate == "Details_Custom") {
                                    obj.push({ "DetailContainerId": "", "InstalledAppId": 0, "PortletWidgetId": 2250, "ReportId": report_id, "StaticJsPath": staticjspath, "WidgetId": 0, "WidgetName": TitleName, "WidgetParameters": "" });
                                    var classnameC = JSON.parse(viewertype[0].defaultsettings).classname;
                                    var viewerComponentC = new Unibase.Themes.Compact.DetailWidgets[classnameC]();
                                    var htmlC = viewerComponentC.html(obj, 'containerId', null);
                                    $('#designsPreviewAppend').html(htmlC);
                                    viewerComponentC.loadData(obj, 'containerId', null);
                                }
                                else {
                                    var classname = JSON.parse(viewertype[0].defaultsettings).classname;
                                    var viewerComponent = new Unibase.Themes.Compact.DetailWidgets[classname]();
                                    var html = viewerComponent.html(CreateWidget, 0);
                                    $('#designsPreviewAppend').html(html);
                                    viewerComponent.loadData(2250, "designsPreviewAppend", parameters, false, previewResponse);
                                }
                            });
                        }
                    }
                    loadportlet() {
                        Unibase.Themes.Compact.Components.Details.Instance().isPortletEdit = false;
                        Unibase.Themes.Compact.Components.Details.Instance().isPortletModified = false;
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet = [];
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets = [];
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgets = [];
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().SelectedWidgets = [];
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().deleteWidget = [];
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().editWidget = [];
                        Unibase.Platform.Widgets.Components.Widget.Instance().items = '';
                        let installedappid = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        const containerId = Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId();
                        const containerEl = $(`#${containerId}`);
                        $("#bizgaze_body").find("nav.hk-nav.biz-layout-3-left-nav").css({ "z-index": '1040' });
                        $(".toplayout-structures-panel").removeClass("nav_2_layout");
                        $(".biz-layout-3-left-nav").removeClass("nav_3_layout");
                        $(".biz-submenu").removeClass("nav_sub_layout");
                        containerEl.find("#addWidgetContainer").addClass("hidden");
                        $(".biz-wrapper,.hk-wrapper").removeClass("edit-portlet-mode");
                        containerEl.find("#details-edit-header").removeClass('d-flex').addClass('d-none');
                        containerEl.find(".portlet-detail-header").removeClass('d-none').addClass("d-flex");
                        $(".navbar-nav-wrap").removeClass('hidden');
                        $('.biz-submenu .header-wth-search').removeClass('hidden');
                        $("#nav-widgets-container").addClass('hidden');
                        containerEl.find(".EditPortlets").removeClass('hidden');
                        containerEl.find(".Detail_Configurations").removeClass('hidden');
                        containerEl.find(".Border").removeClass('card');
                        containerEl.find(".Border1").removeClass('card-header').addClass('hidden');
                        containerEl.find(".indexcardfooter").addClass('hidden');
                        containerEl.find(".dashboardwidget-container").css({ "margin-bottom": "0px", "padding-bottom": "0px" });
                        $(".nav-dashboards-container").removeClass("hidden");
                        $('._bizgaze_detail_container').css({ "top": "0px" });
                        $(".biz-main-menu").removeClass("hidden");
                        let submenuLeft = '', submenuWidth = '';
                        if ($('.biz-wrapper').hasClass('biz-main-menu-hidden'))
                            submenuLeft = '0', submenuWidth = '240px';
                        $(".biz-submenu").css({ "left": `${submenuLeft}`, "width": `${submenuWidth}`, "top": "", "background": "", "z-index": '' });
                        $(".biz-submenu .navbar-brand ").removeClass("hidden");
                        containerEl.find("#widgetEdit-" + $("#hf_widgetId").val() + "").addClass('hidden');
                        containerEl.find("#EditChanges").addClass("hidden");
                        containerEl.find(".Detail_SaveChanges").addClass("hidden");
                        containerEl.find(".dropdown-menu").removeClass("hidden");
                        containerEl.find("#chkLayout_PortletsSelectors").removeClass("hidden");
                        containerEl.find("#chkLayout_Portlet").addClass("hidden");
                        containerEl.find("#tab-container").sortable('destroy');
                        containerEl.find("#layout-detail-tabs").sortable('destroy');
                        $("#txt_global_Search").text('');
                        $(".header-wth-search .nav-search").hide();
                        $(".header-wth-search .nav-header-text").removeAttr("style");
                        $(".header-wth-search .nav-header-text").css({ "opacity": "1", "pointer-events": "auto" });
                        containerEl.find("#dashboardwidget-container").removeClass("ui-sortable");
                        containerEl.find("#dashboardwidget-container").sortable('destroy');
                        containerEl.find("#tab-container").removeClass("mx-10");
                        let portletId, portletName;
                        if (installedappid == 0) {
                            portletId = Number($('#' + containerId).find("#hf_DashboardPortletId").val());
                            portletName = Number($('#' + containerId + ' .nav-item.tab-item .nav-link.active').find('.portletName').text());
                        }
                        else {
                            portletId = Number($('#' + containerId + ' .nav-item.tab-item .nav-link.active').find('#hf_PortletId').val());
                            portletName = $('#' + containerId).find("#hf_DashboardPortletName").val();
                        }
                        containerEl.find('#tab-container .structureContent').remove();
                        if (installedappid != undefined && installedappid != 0) {
                            containerEl.find(".card-header-top").css({ "pointer-events": "all", "cursor": "pointer" });
                            Unibase.Themes.Compact.Components.Details.Instance().isPortletModified = false;
                            let panel = Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId();
                            if ((Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable == true && Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable == true)) {
                                $(".navbar-nav-wrap").removeClass('hidden');
                                $('.nav-options-container.nav-widgets-container').first().addClass('hidden');
                                containerEl.find("#tab-container").removeClass("px-10");
                                $('#bizgaze_body .biz-main-menu').removeClass('hidden');
                                $('#bizgaze_body .biz-submenu .nav-header').removeClass('hidden');
                                $('#bizgaze_body .biz-submenu').attr({ "data-details_structure": "" });
                                $('#bizgaze_body .biz-submenu .nav-options-container').removeClass('hidden');
                                $('#bizgaze_body .biz-submenu .nav-options-container#nav-widgets-container').addClass('hidden');
                                containerEl.find('#tab-container').empty();
                                Unibase.Themes.Compact.Components.Details.Instance().getportletlayout(installedappid, portletId, '#' + panel);
                                if ($('#topLayoutStructuresPanel').length) {
                                    $('#bizgaze_body').removeClass('edit-dashboard-mode');
                                }
                            }
                            else {
                                Unibase.Themes.Compact.Components.Details.Instance().loadWidgets(installedappid, portletId, "#" + panel);
                            }
                        }
                        else {
                            $("#layout-dashboard-tabs").removeClass("hidden");
                            $("#nav-dashboards-container").removeClass('hidden');
                            containerEl.find("#dashboardwidget-item").sortable('destroy');
                            $("#dashboardfooter").addClass("hidden");
                            $("#dbTopHeader").removeClass("d-none").addClass("d-flex");
                            if ($('#topLayoutStructuresPanel').length) {
                                $('#bizgaze_body').removeClass('edit-dashboard-mode');
                            }
                            const navInstance = Unibase.Themes.Compact.Components.Nav.Instance();
                            if (navInstance.layoutIndex == navInstance.leftLayout) {
                                $('.biz-submenu .header-wth-search').removeClass('d-none');
                            }
                            Unibase.Themes.Compact.Components.Dashboard.Instance().loadWidgets(portletId, portletName);
                        }
                        $('.nav-options-container.nav-setting-visible').removeClass('hidden');
                    }
                    EditScreen(InstalledAppId) {
                        var instance = this;
                        Unibase.Themes.Compact.Components.Details.Instance().isPortletEdit = true;
                        const containerId = Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds[Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.length - 1];
                        const containerEl = $(`#${containerId}`);
                        instance.fileCacheHelper.loadCssFile('tenants/themes/compact/css/style.widget_builder.css', null);
                        var jsfiles = ["platform/bundle/index.widget.builder.js"];
                        instance.items = '.structureDiv, .widgetdataHere, .dashboardwidget-item.dashboarddisplaynone';
                        instance.fileCacheHelper.loadJsFiles(jsfiles, function () {
                            let widgetHere = '<div class="structureContent d-flex justify-content-center w-100 p-2 mx-auto my-25" id="details-page-portlet"><a href="javascript:void(0)" class="w-100 my-auto d-flex justify-content-center" data-toggle="modal" data-target="#dashboardWidgetModal" onclick=" Unibase.Platform.Widgets.Components._Widget.Instance().widgetsModal(' + InstalledAppId + ', this);"> <span><i class="la la-plus mr-2"></i>Add Widget</span></a></div>';
                            let deleteButton = '<div class="w-100 d-flex position-relative" style="z-index:2; margin-bottom: -18px;"><a class="structuredelete hideButtonDashboard px-1 p-0 btn btn-danger text-white border-0 hidden" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().structuredelete(this)" ;="" id="structuredelete"> <i class="fa fa-trash "></i></a><a class="px-1 p-0 btn btn-dark ml-auto text-white border-0 structures-settings" data-toggle="modal" data-target="#structure_settingModal" data-backdrop="false" onclick="Unibase.Platform.Widgets.Components._Widget.Instance().structSetting(this);"  id="structures-settings"><i class="las la-tools"></i></a></div>';
                            if (InstalledAppId != 0) {
                                containerEl.find(".portletFooter").removeClass("hidden");
                                containerEl.find(".card-header-top").css({ "pointer-events": "none", "cousor": "none" });
                                let panel = Unibase.Themes.Compact.Components.Details.Instance()._containerId;
                                if ((Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable == true && Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable == true)) {
                                    $('#bizgaze_body .biz-main-menu').addClass('hidden');
                                    $('#bizgaze_body .biz-submenu .nav-header').addClass('hidden');
                                    $('#bizgaze_body .biz-submenu').attr({ "data-details_structure": "true" });
                                    $('#bizgaze_body .biz-submenu .nav-options-container').addClass('hidden');
                                    $('#bizgaze_body .biz-submenu .nav-options-container#nav-widgets-container').removeClass('hidden');
                                    $(".toplayout-structures-panel").addClass("nav_2_layout");
                                    $(".biz-layout-3-left-nav").addClass("nav_3_layout");
                                    $(".biz-submenu").addClass("nav_sub_layout");
                                    $('#bizgaze_body .biz-submenu').css({ "z-index": "9999" });
                                    $("#bizgaze_body").find("nav.hk-nav.biz-layout-3-left-nav").css({ "z-index": '9999' });
                                    $("#bizgaze_body").find(".toplayout-structures-panel").css({ "z-index": '9999' });
                                    containerEl.find('#tab-container .blocks-droppable-items-place').addClass('border border-2 rounded-2 p-3 border-primary').prepend(widgetHere);
                                    containerEl.find('#tab-container .structureToDelete').addClass('border border-2 border-dashed p-1').prepend(deleteButton);
                                }
                                else {
                                    containerEl.find("#addWidgetContainer").removeClass("hidden");
                                    $(".biz-wrapper,.hk-wrapper").addClass("edit-portlet-mode");
                                }
                            }
                            else {
                                $("#layout-dashboard-tabs").addClass("hidden");
                                const visibleNavGroupId = $('.biz-submenu .nav-options-container:visible').attr('id');
                                if (visibleNavGroupId)
                                    $(`#${visibleNavGroupId}`).addClass('hidden');
                                $("#dbTopHeader").removeClass("d-flex").addClass("d-none");
                                $("#dashboardfooter").removeClass('hidden');
                                $(".navbar-nav-wrap").addClass('hidden');
                                if ($('.biz-layout-3-top-navbar').hasClass('biz__nav__toggle'))
                                    $('.biz-layout-3-top-navbar #navbar_toggle_btn').trigger('click');
                            }
                            containerEl.find("#dashboardwidget-container .widgetsstructure").addClass("clickdisabled");
                            $(".biz-layout-3-top-navbar").find(".hk-nav").find(".slimScrollDiv").removeAttr("style");
                            containerEl.find(".Detail_Configurations").addClass('hidden');
                            containerEl.find(".Border").addClass('card');
                            containerEl.find(".Border1").addClass('card-header');
                            containerEl.find(".Border1").removeClass('hidden');
                            containerEl.find(".indexcardfooter").removeClass('hidden');
                            containerEl.find(".dashboardwidget-container").css({ "padding-bottom": "200px", "margin-bottom": "100px;" });
                            containerEl.find(".CommonWidgets").removeClass("hidden");
                            containerEl.find("#collapseThree .droppablePlaceCol").removeClass("p-0").addClass("p-1");
                            containerEl.find('#dashboardwidget-container .blocks-droppable-items-place').addClass('border border-2 rounded-2 p-3 border-primary').prepend(widgetHere);
                            $(".biz-layout-3-top-navbar").removeClass("hk-nav-toggle");
                            $(".biz-layout-3-biz-pg-wrapper").removeClass("hk-nav-toggle");
                            containerEl.find('#dashboardwidget-container .structureToDelete').addClass('border border-2 border-dashed p-2 m-1').prepend(deleteButton);
                            if (InstalledAppId == 0) {
                                $(".biz-main-menu").addClass("hidden");
                                let submenuWidth = '260';
                                if ($('.biz-wrapper').hasClass('biz-main-menu-hidden'))
                                    submenuWidth = '240';
                                $(".biz-submenu").css({ "left": "0px", "width": `${submenuWidth}px`, "top": "0px", "background": "#fff" });
                                $(".biz-submenu .sidenavlink").addClass(" text-dark font-weight-700");
                                $('.biz-submenu .header-wth-search').addClass('hidden');
                                $('.nav-options-container.nav-widgets-container').first().removeClass('hidden');
                            }
                            containerEl.find(".droppablePlaceCol").find(".card").addClass("mb-0");
                            containerEl.find(".dashboarddisplayNone").addClass("hidden");
                            containerEl.find(".widgetplace").addClass("border");
                            containerEl.find(".widgetplace  .structureContent").removeClass("hidden");
                            containerEl.find(".EditPortlets").removeClass('hidden');
                            containerEl.find("#widgetEdit-" + $("#hf_widgetId").val() + "").removeClass('hidden');
                            containerEl.find("#deleteWidget-" + $("#hf_widgetId").val()).click(function () {
                                instance.deletePortletWidget();
                            });
                            containerEl.find("#EditChanges").removeClass("hidden");
                            containerEl.find(".Detail_SaveChanges").removeClass("hidden");
                            containerEl.find(".dropdown-menu").removeClass("hidden");
                            containerEl.find("#chkLayout_PortletsSelectors").addClass("hidden");
                            containerEl.find("#chkLayout_Portlet").removeClass("hidden");
                            containerEl.find("#btn_bizgaze_details_close").click(Unibase.Platform.Widgets.Components.Widget.Instance().closeDetails);
                            if ($('#hf_ProfileInstalledappid').val() != 0 && $('#hf_ProfileInstalledappid').val() != undefined) {
                                instance.addDashboardWidgets(InstalledAppId);
                            }
                            else {
                                Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getstructureleft().then(function (response) {
                                    let data = response.result;
                                    instance.addDashboardWidgets(InstalledAppId, data);
                                    if ((Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable == true && Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable == true)) {
                                        $(".navbar-nav-wrap").addClass('hidden');
                                        $('.nav-options-container.nav-widgets-container').first().removeClass('hidden');
                                        $('#PageWidgets').remove();
                                    }
                                });
                            }
                            if (InstalledAppId != 0) {
                                $(".biz-submenu #myTab").addClass("hidden");
                                $(".biz-submenu #structure").removeClass("active show");
                                $(".biz-submenu #Widgets").addClass("active show");
                                containerEl.find(".detail-edit-close").removeClass("hidden");
                                containerEl.find(".portlet-detail-header").removeClass('d-flex').addClass("d-none");
                                containerEl.find("#details-edit-header").removeClass("d-none").addClass("d-flex");
                                if ((Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable == true && Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable == true)) {
                                    if ($('#topLayoutStructuresPanel').length) {
                                        $('#bizgaze_body').addClass('edit-dashboard-mode');
                                    }
                                }
                                else {
                                    $('#bizgaze_body').removeClass('edit-dashboard-mode');
                                }
                            }
                            else {
                                $(".biz-submenu #structure-tab").removeClass("hidden");
                                containerEl.find(".detail-edit-close").addClass("hidden");
                                if ($('#topLayoutStructuresPanel').length) {
                                    $('#bizgaze_body').addClass('edit-dashboard-mode');
                                }
                            }
                            containerEl.find("#dashboardwidget-container, #tab-container").sortable({
                                revert: true,
                                scroll: true,
                                scrollSensitivity: 10,
                                cursor: "move",
                                forceHelperSize: true,
                                sort: function (event, ui) {
                                    console.log("#dashboardwidget-container, #tab-container is firing");
                                    if ($(".ui-sortable-placeholder").parent('.ui_sortable_placeholder').length < 1) {
                                        $(".ui-sortable-placeholder").wrap('<div class="px-3 w-100 ui_sortable_placeholder"></div>');
                                    }
                                    let height = ($(ui.item).height() - 15) + 'px';
                                    $(".ui-sortable-placeholder").css({
                                        "visibility": "visible", "width": "100%", "height": height, "background-image": "linear-gradient(135deg, rgb(255 255 255) 0%, transparent 0%, rgb(255 255 255) 50%, rgb(112 108 108) 0%, rgb(240 240 240) 51%, transparent 38%, rgb(255 255 255))", "background-size": "12px 12px", "margin": "20px 0px !important"
                                    });
                                },
                                stop: function (event, ui) {
                                    $(ui.item).unwrap();
                                    $('.ui_sortable_placeholder').remove();
                                    $("#dashboardwidget-container .dashboardwidget-item").each(function () {
                                        var portletwidgetId = Number($(this).find("#hf_portletwidgetId").val());
                                        if ($(this).find("#hf_portletwidgetId").val() != undefined) {
                                            var portletwidgetid = portletwidgetId;
                                            var index = Number($(this).index());
                                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets.push({
                                                PortletWidgetId: portletwidgetid,
                                                index: index
                                            });
                                        }
                                        else {
                                            var WidgetId = Number($(this).find("#hf_widgetId").val());
                                            var index = Number($(this).index());
                                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets.push({
                                                WidgetId: WidgetId,
                                                index: $(this).index()
                                            });
                                        }
                                    });
                                }
                            });
                            containerEl.find("#tab-container").sortable({
                                revert: true,
                                scroll: true,
                                scrollSensitivity: 10,
                                cursor: "move",
                                forceHelperSize: true,
                                update: function (event, ui) {
                                    console.log('#tab-container is firing line 1941');
                                    Unibase.Themes.Compact.Components.Details.Instance().isPortletModified = true;
                                    $("#tab-container .portletwidget-addeditem").each(function () {
                                        if ($(this).find("#hf_PortletWidgetId").val() != undefined) {
                                            var PortletWidgetId = Number($(this).find("#hf_PortletWidgetId").val());
                                            var index = Number($(this).index());
                                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets.push({
                                                PortletWidgetId: PortletWidgetId,
                                                index: index
                                            });
                                        }
                                        else {
                                            var WidgetId = Number($(this).find("#hf_widgetId").val());
                                            var index = Number($(this).index());
                                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets.push({
                                                WidgetId: WidgetId,
                                                index: index
                                            });
                                        }
                                    });
                                }
                            });
                            containerEl.find("#layout-detail-tabs").sortable({
                                revert: true,
                                scroll: false,
                                cursor: "move",
                                forceHelperSize: true,
                                stop: function (event, ui) {
                                    console.log("#layout-detail-tabs is firing");
                                    $("#layout-detail-tabs .tab-addeditem").each(function () {
                                        if ($(this).find("#hf_PortletId").data("portletid") != undefined) {
                                            var portletId = Number($(this).find("#hf_PortletId").data("portletid"));
                                            var existedIndex = Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets.findIndex(f => f.PortletId == portletId);
                                            if (existedIndex == -1) {
                                                Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets.push({
                                                    PortletId: portletId,
                                                    PortletIndex: Number($(this).index() + 1)
                                                });
                                            }
                                            else {
                                                Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets[existedIndex].PortletIndex = Number($(this).index() + 1);
                                            }
                                        }
                                    });
                                }
                            });
                            if (($("#dashboardwidget-container").hasClass('ui-sortable'))) {
                                $("#dashboardwidget-container").on("mouseover", "div", MouseEvent, function () {
                                    var WidgetId = $(this).find("#hf_widgetId").val();
                                    var PortletWidgetId = $(this).find("#hf_portletwidgetId").val();
                                    if (isNaN(Number(WidgetId))) {
                                        WidgetId = 0;
                                    }
                                    else
                                        WidgetId = Number(WidgetId);
                                    if (isNaN(Number(PortletWidgetId)))
                                        PortletWidgetId = 0;
                                    else
                                        PortletWidgetId = Number(PortletWidgetId);
                                    Unibase.Platform.Widgets.WidgetHiddenFields.Instance().wid = WidgetId;
                                    Unibase.Platform.Widgets.WidgetHiddenFields.Instance().pwid = PortletWidgetId;
                                    if (PortletWidgetId === 0 || WidgetId === undefined) {
                                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().unix_pwid = Number($(this).find("#hf_widgetId_uniq").val());
                                    }
                                });
                            }
                            if ($("#layout-detail-tabs").hasClass('ui-sortable')) {
                                containerEl.find("#tab-container").on("mouseover", "div", MouseEvent, function () {
                                    var WidgetId = $(this).find("#hf_widgetId").val();
                                    var PortletWidgetId = $(this).find("#hf_PortletWidgetId").val();
                                    if (isNaN(Number(WidgetId))) {
                                        WidgetId = 0;
                                    }
                                    else
                                        WidgetId = Number(WidgetId);
                                    if (isNaN(Number(PortletWidgetId)))
                                        PortletWidgetId = 0;
                                    else
                                        PortletWidgetId = Number(PortletWidgetId);
                                    Unibase.Platform.Widgets.WidgetHiddenFields.Instance().wid = WidgetId;
                                    Unibase.Platform.Widgets.WidgetHiddenFields.Instance().pwid = PortletWidgetId;
                                    if (PortletWidgetId === 0 || WidgetId === undefined) {
                                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().unix_pwid = Number($(this).find("#hf_widgetId_uniq").val());
                                    }
                                });
                            }
                        });
                    }
                    deletePortletWidget() {
                        var PortletWidgetIds = Unibase.Platform.Widgets.WidgetHiddenFields.Instance().deleteWidget;
                    }
                    confirmSave() {
                        bootbox.confirm({
                            message: "Do you want to Save Changes?",
                            buttons: {
                                confirm: {
                                    label: 'Save changes',
                                    className: 'btn btn-primary ml-auto'
                                },
                                cancel: {
                                    label: 'Discard Changes',
                                    className: 'btn btn-outline-secondary'
                                }
                            },
                            callback: function (result) {
                                if (result) {
                                    Unibase.Platform.Widgets.Components.Widget.Instance().SaveScreen();
                                }
                                else {
                                    Unibase.Platform.Widgets.Components.Widget.Instance().loadportlet();
                                }
                            }
                        });
                    }
                    SaveScreen() {
                        var instance = this;
                        var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        Unibase.Themes.Compact.Components.Details.Instance().isPortletModified = false;
                        Unibase.Themes.Compact.Components.Details.Instance().isPortletEdit = false;
                        if (InstalledAppId == 0) {
                            let alertBox = [];
                            $('#dashboardwidget-container').find('.widgetplace').each(function () {
                                if ($(this).find(".dashboardwidget-addeditem").length == 0) {
                                    alertBox.push({ "boxEmpty": $(this).length });
                                }
                            });
                            var emptybox = alertBox.filter(x => x.boxEmpty == 1);
                            if (emptybox.length > 0) {
                                var msg = 'Still  Boxes are Empty try to add  Widget (or) Proceed at your own wish';
                                bootbox.confirm({
                                    message: msg,
                                    closeButton: false,
                                    buttons: {
                                        confirm: {
                                            label: 'Proceed',
                                            className: 'btn-success'
                                        },
                                        cancel: {
                                            label: 'Cancel',
                                            className: 'btn-danger'
                                        }
                                    },
                                    callback: function (result) {
                                        if (result) {
                                            instance.parentStructures('dashboardwidget-container', 'dashboardwidget-item');
                                            instance.SaveWidget();
                                        }
                                        else {
                                            $('#modal_popup_EditLineItem').modal('hide');
                                            bootbox.hideAll();
                                            return false;
                                        }
                                    }
                                });
                            }
                            else {
                                instance.parentStructures('dashboardwidget-container', 'dashboardwidget-item');
                                instance.SaveWidget();
                            }
                        }
                        if (InstalledAppId != 0) {
                            if ((Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable == true && Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable == true)) {
                                instance.parentStructures('tab-container', 'portletwidget-item');
                                instance.SaveWidget();
                            }
                            else {
                                instance.SaveWidgetDetailsPage();
                            }
                        }
                    }
                    SaveWidgetDetailsPage() {
                        let instance = this;
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet = [];
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets = [];
                        if (Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable != true || Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable != true) {
                            $('#' + Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()).find('#tab-container').find('.portletwidget-addeditem').each(function (index) {
                                let portleid = $(this).attr('data-portletid'), widgetid = $(this).attr('data-widgetid'), widgetname = $(this).attr('data-widgetname');
                                Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet.push({
                                    "PortletId": Number(portleid),
                                    "WidgetId": Number(widgetid),
                                    "WidgetName": widgetname,
                                    "index": Number(index)
                                });
                            });
                            instance.SaveWidget();
                        }
                    }
                    parentStructures(structureContainer, widgetitem) {
                        var instance = this, VisibleContainerId = Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId(), InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        if ($('#' + structureContainer).attr('data-isedit') == 'true') {
                            instance.strEditMode = true;
                        }
                        else {
                            instance.strEditMode = false;
                        }
                        instance.structureDesignArray = [];
                        $("#" + VisibleContainerId + " ." + structureContainer).find(".structureDiv[data-parent=" + structureContainer + "]").each(function (vindex) {
                            let divId = $(this).attr('id'), structureid = $(this).attr("data-divstructureid"), parentid = 0, portletid, isEdit = $(this).attr('data-isedit'), blockId, block;
                            if (InstalledAppId != 0) {
                                portletid = $("#" + VisibleContainerId + " #layout-detail-tabs").find('li.nav-item a.active').parent('.nav-item').attr('value');
                            }
                            else {
                                portletid = $('#' + VisibleContainerId).find('#hf_DashboardPortletId').val();
                            }
                            var strctWidgetIndex = $(this).index();
                            $("#" + Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()).find("#" + divId).find(".droppablePlaceCol[data-parent=" + divId + "]").each(function () {
                                let bindDiv = $(this).attr('id');
                                $(this).find("div[data-parent=" + bindDiv + "]").attr('data-dropOrderIndex', instance.DropOrderIndex);
                                let structuredesignId = [], widgetstructDesignId, mobileWidth = '', tabWidth = '';
                                widgetstructDesignId = $(this).attr('id');
                                structuredesignId = widgetstructDesignId.split('_');
                                if (isEdit == "false") {
                                    block = false, blockId = Number(structuredesignId[1]);
                                }
                                else {
                                    block = true, blockId = 0;
                                }
                                if (($(this).attr('data-mobile_settingwidth') != undefined) && ($(this).attr('data-mobile_settingwidth') != '') && ($(this).attr('data-mobile_settingwidth') != null)) {
                                    mobileWidth = $(this).attr('data-mobile_settingwidth');
                                }
                                else {
                                    mobileWidth = '';
                                }
                                if (($(this).attr('data-tab_settingwidth') != undefined) && ($(this).attr('data-tab_settingwidth') != '') && ($(this).attr('data-tab_settingwidth') != null)) {
                                    tabWidth = $(this).attr('data-tab_settingwidth');
                                }
                                else {
                                    tabWidth = '';
                                }
                                instance.structureDesignArray.push({
                                    structuredesignId: Number(blockId),
                                    StructureId: Number(structureid),
                                    StructureHIndex: Number($(this).attr('data-structureindex')),
                                    StructureVIndex: Number(vindex),
                                    ParentId: Number(parentid),
                                    PortletId: Number(portletid),
                                    isblock: block,
                                    parentstructureid: Number(0),
                                    DropOrderIndex: instance.DropOrderIndex,
                                    StrctWidgetIndex: Number(strctWidgetIndex),
                                    ParentIndex: 0,
                                    StructureMobileWidth: mobileWidth,
                                    StructureTabWidth: tabWidth,
                                    InstalledAppId: Unibase.Themes.Providers.DetailHelper.installedAppId,
                                    containerId: Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()
                                });
                                $(this).find('.' + widgetitem).each(function (event, ui) {
                                    if ($(ui.offsetParent).attr('id') == widgetstructDesignId) {
                                        let WidgetId = $(ui).attr('id');
                                        let widgetindex = $('#' + VisibleContainerId).find('.widgetid-' + WidgetId).index();
                                        $('#' + VisibleContainerId).find('#' + WidgetId).find('#hf_widgetId_uniq').val();
                                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet.push({
                                            PortletId: Number(portletid),
                                            WidgetId: Number($(ui).attr('id')),
                                            WidgetName: $('#' + VisibleContainerId).find('#' + WidgetId).find('#WidgetName a strong').text(),
                                            WidgetUniqueId: $('#' + VisibleContainerId).find('#' + WidgetId).find('#hf_widgetId_uniq').val(),
                                            StructureDesignId: blockId,
                                            DropOrderIndex: instance.DropOrderIndex,
                                            StrctWidgetIndex: Number(widgetindex),
                                            containerId: Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()
                                        });
                                    }
                                });
                                instance.DropOrderIndex++;
                                instance.prepareStructureDesign($(this).attr("id"), widgetitem);
                            });
                        });
                    }
                    prepareStructureDesign(structureId, widgetitem) {
                        var instance = this, VisibleContainerId = Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId(), InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        $("#" + VisibleContainerId + " #" + structureId).find(".structureDiv[data-parent=" + structureId + "]").each(function (vindex) {
                            let forinstance = this;
                            let divId = $(this).attr('id'), parentid = [], blockId, structureid = $(this).attr("data-divstructureid"), portletid, isEdit = $(this).attr('data-isedit');
                            var strctWidgetIndex = $(this).index();
                            if (InstalledAppId != 0) {
                                portletid = $("#" + VisibleContainerId + " #layout-detail-tabs").find('li.nav-item a.active').parent('.nav-item').attr('value');
                            }
                            else {
                                portletid = $('#' + VisibleContainerId).find('#hf_DashboardPortletId').val();
                            }
                            $('#' + Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()).find("#" + divId).find(".droppablePlaceCol[data-parent=" + divId + "]").each(function () {
                                let bindDiv = $(this).attr('id');
                                $(this).find("div[data-parent=" + bindDiv + "]").attr('data-dropOrderIndex', instance.DropOrderIndex);
                                let block, DivParentId = $('#' + VisibleContainerId).find('#' + divId).attr('data-parent').split('_'), DivStructureUniqueId = $(this).attr('id').split('_'), ParentIndex = $('#' + VisibleContainerId).find('#' + divId).attr('data-dropOrderIndex');
                                let structuredesignId = [], widgetstructDesignId, mobileWidth = '', tabWidth = '';
                                widgetstructDesignId = $(this).attr('id');
                                structuredesignId = widgetstructDesignId.split('_');
                                parentid = $(this).attr('data-parent').split('_');
                                if (isEdit == "false") {
                                    block = false, blockId = Number(structuredesignId[1]);
                                }
                                else {
                                    block = true, blockId = 0;
                                }
                                if (($(this).attr('data-mobile_settingwidth') != undefined) && ($(this).attr('data-mobile_settingwidth') != '') && ($(this).attr('data-mobile_settingwidth') != null)) {
                                    mobileWidth = $(this).attr('data-mobile_settingwidth');
                                }
                                else {
                                    mobileWidth = '';
                                }
                                if (($(this).attr('data-tab_settingwidth') != undefined) && ($(this).attr('data-tab_settingwidth') != '') && ($(this).attr('data-tab_settingwidth') != null)) {
                                    tabWidth = $(this).attr('data-tab_settingwidth');
                                }
                                else {
                                    tabWidth = '';
                                }
                                instance.structureDesignArray.push({
                                    structuredesignId: Number(blockId),
                                    StructureId: Number(structureid),
                                    StructureHIndex: Number($(this).attr('data-structureindex')),
                                    StructureVIndex: Number(vindex),
                                    PortletId: Number(portletid),
                                    isblock: block,
                                    DropOrderIndex: instance.DropOrderIndex,
                                    StrctWidgetIndex: Number(strctWidgetIndex),
                                    ParentIndex: Number(ParentIndex),
                                    StructureMobileWidth: mobileWidth,
                                    StructureTabWidth: tabWidth,
                                    InstalledAppId: Unibase.Themes.Providers.DetailHelper.installedAppId
                                });
                                $(this).find('.' + widgetitem).each(function (event, ui) {
                                    if ($(ui.offsetParent).attr('id') == widgetstructDesignId) {
                                        let WidgetId = $(ui).attr('id');
                                        let widgetindex = $('.widgetid-' + WidgetId).index();
                                        $('#' + VisibleContainerId).find('#' + WidgetId).find('#hf_widgetId_uniq').val();
                                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet.push({
                                            PortletId: Number(portletid),
                                            WidgetId: Number($(ui).attr('id')),
                                            WidgetName: $('#' + VisibleContainerId).find('#' + WidgetId).find('#WidgetName a strong').text(),
                                            WidgetUniqueId: $('#' + VisibleContainerId).find('#' + WidgetId).find('#hf_widgetId_uniq').val(),
                                            StructureDesignId: blockId,
                                            DropOrderIndex: instance.DropOrderIndex,
                                            StrctWidgetIndex: Number(widgetindex)
                                        });
                                    }
                                });
                                instance.DropOrderIndex++;
                                instance.prepareStructureDesign($(this).attr("id"), widgetitem);
                            });
                        });
                    }
                    SaveStructureLayout() {
                        let InstalledAppid = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        let instance = this;
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesigns = instance.structureDesignArray;
                        var layoutObj = ({
                            StructureDesign: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesigns,
                            AddWidgetsToPortlet: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet,
                            DeletePortletWidgets: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().deleteWidget,
                            PortletIndex: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets,
                            PortletWidgetIndex: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets,
                            StructureDesignDelete: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesignDelete,
                        });
                        instance.fileCacheHelper.loadJsFile("platform/widgets/managers/widgetmanager.js", function () {
                            return __awaiter(this, void 0, void 0, function* () {
                                yield Unibase.Platform.Widgets.Managers.WidgetManager.Instance().saveLayout(layoutObj).then(function (response) {
                                    MessageHelper.Instance().showSuccess('successfully Saved', '');
                                });
                            });
                        });
                    }
                    SaveWidget() {
                        let InstalledAppid = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        let instance = this;
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesigns = instance.structureDesignArray;
                        var layoutObj = ({
                            StructureDesign: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesigns,
                            AddWidgetsToPortlet: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet,
                            DeletePortletWidgets: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().deleteWidget,
                            PortletIndex: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets,
                            PortletWidgetIndex: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets,
                            StructureDesignDelete: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesignDelete,
                        });
                        instance.fileCacheHelper.loadJsFile("platform/widgets/managers/widgetmanager.js", function () {
                            return __awaiter(this, void 0, void 0, function* () {
                                yield Unibase.Platform.Widgets.Managers.WidgetManager.Instance().saveLayout(layoutObj).then(function (response) {
                                    if (InstalledAppid != 0) {
                                        Unibase.Themes.Compact.Components.Details.Instance().isPortletModified = false;
                                        Unibase.Themes.Compact.Components.Details.Instance().isPortletEdit = false;
                                    }
                                    instance.structureDesignArray = [], instance.DropOrderIndex = 1;
                                    instance.structDesignIdArrayDelete = [];
                                    let _WidgetHiddenFields = Unibase.Platform.Widgets.WidgetHiddenFields.Instance();
                                    _WidgetHiddenFields.StructureDesigns = [];
                                    _WidgetHiddenFields.NewWidgetsForPortlet = [];
                                    _WidgetHiddenFields.deleteWidget = [];
                                    _WidgetHiddenFields.Portlets = [];
                                    _WidgetHiddenFields.PortletWidgets = [];
                                    _WidgetHiddenFields.StructureDesignDelete = [];
                                });
                                if (!($("#confirmPortletChangesModal").data('bs.modal') || {})._isShown) {
                                    instance.navigationHelper.showLoading();
                                    yield Unibase.Platform.Widgets.Components.Widget.Instance().loadportlet();
                                    instance.navigationHelper.hideLoading();
                                }
                                else {
                                    if ($('#AddPortlets').attr('data-isClicked') == 'true') {
                                        $('#AddPortlets').attr('data-isClicked', 'false');
                                        instance.renderAddPortletText(true, InstalledAppid);
                                    }
                                    let portletId = $('#confirmPortletChangesModal').attr('data-portletid');
                                    let panel = Unibase.Themes.Compact.Components.Details.Instance()._containerId;
                                    $("#confirmPortletChangesModal").modal('hide');
                                    yield Unibase.Themes.Compact.Components.Details.Instance().loadWidgets(InstalledAppid, portletId, '#' + panel);
                                }
                            });
                        });
                    }
                    closeDetails() {
                        if ($(".layout-detail-tabs").hasClass("ui-sortable") == true) {
                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet = [];
                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets = [];
                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgets = [];
                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().SelectedWidgets = [];
                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().deleteWidget = [];
                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().editWidget = [];
                            let containerId = '#' + Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId();
                            $(containerId).find("#tab-container").removeAttr("style");
                            $("#divAddedWidgetList").show();
                            $("#divNewWidgetList").hide();
                            $(".divBizgaze_HiddenFields").html('');
                            $("#app-list").removeClass("hide");
                            $("#app-details").addClass("hide");
                            $("#SavePortlet").addClass("hidden");
                            $("#chkLayout_PortletsSelectors").removeClass("hidden");
                            $("#chkLayout_Portlet").addClass("hidden");
                            $("#AddWidget_btnSelectWidget").addClass("hidden");
                            $("#AddWidget_btnCreateWidget").addClass("hidden");
                            $(containerId).find("#tab-container").sortable('destroy');
                            $("#layout-detail-tabs").sortable('destroy');
                            $("#layout-dashboard-tabs").sortable('destroy');
                            $(containerId).find("#dashboardwidget-item").sortable('destroy');
                            $("#Stage").removeClass('hidden');
                            $(".Detail_Configurations").removeClass('hidden');
                            $("#app-list").removeClass("hide");
                            $("#app-details").addClass("hide");
                            $("#nav-widgets-container").addClass('hidden');
                            $(".indexcardfooter").addClass('hidden');
                        }
                    }
                    createWidget(Installedappid) {
                        $(".biz-submenu").css({ "z-index": "" });
                        $(".biz-layout-3-left-nav").css({ "z-index": "" });
                        $(".toplayout-structures-panel").css({ "z-index": "1040" });
                        this.navigationHelper.popup(Installedappid, "", Widget.Instance(), null, Platform.Helpers.Size.ExtraLarge);
                    }
                    resetWidget(widgetId) {
                        var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        $('#btn-widget-close').click();
                        if (widgetId != "undefined") {
                            Unibase.Platform.Widgets.Components.Widget.Instance().loadWidgetData(widgetId, 0, false);
                        }
                        else {
                            Unibase.Platform.Widgets.Components.Widget.Instance().createWidget(InstalledAppId);
                        }
                    }
                    addDashboardWidgets(InstalledAppId, data) {
                        var hidden = "";
                        if (InstalledAppId == undefined) {
                            hidden = "hidden";
                        }
                        var html = '<br><div class="row1">' +
                            '<div class="col-sm-12">' +
                            '<div class="form-group">' +
                            '<div class="input-group"><br/>' +
                            '<input id="txtSearchWidgets" class="form-control rounded" placeholder="Search Widgets" type="text">' +
                            ' </div>' +
                            ' </div>' +
                            '</div>' +
                            '</div>';
                        html = '<div class="divNewWidgetListContainer clear">' +
                            '<div class="panel-group m-b" id="widgetAccordian">' +
                            '<div class="nav-tabs-header panel divpage" id="PageWidgets">' +
                            '<ul class="navbar-nav flex-column">' +
                            '<li class="nav-item active">' +
                            '<a class="nav-link-text accordion-toggle" style="cursor:pointer;" data-toggle="collapse" data-parent="#widgetAccordian" href="#collapseOne">' +
                            '<span class="nav-link-text">App Widgets</span>' +
                            ' </a>' +
                            '<ul id="collapseOne" class="panel-collapse in navbar-nav flex-column"><li>' +
                            '<ul class="flex-column no-border no-radius list-group-alt sortableWidgetList" id="sortableWidgetList">' +
                            ' <li id="drag" class="hidden nav-item widget-item  divPageWidgetSlider"></li>' +
                            '</ul>' +
                            '</li>' +
                            ' </ul>' +
                            '</li></ul>' +
                            '</div>' +
                            '<div class="nav-tabs-header panel pb-60" id="CommonWidgets">' +
                            '<ul class="nav nav-tabs nav-light bg-light" id = "myTab" role = "tablist" >' +
                            '<li class="nav-item w-50 text-center" >' +
                            '<a class="nav-link active   sidenavlink p-3  h-55p align-items-center" id="structure-tab" data-toggle="tab" href="#structure" role="tab" aria-controls="structure"  aria-selected="true" style="color:#2f343a !important" >Structure </a>' +
                            '</li>' +
                            '<li class="nav-item w-50 text-center" >' +
                            '<a class="nav-link p-3 sidenavlink  h-55p align-items-center " id="Widgets-tab" data-toggle="tab" href="#Widgets" role="tab" aria-controls="Widgets" aria-selected="false" style="color:#2f343a !important" > Widgets </a>' +
                            '</li>' +
                            '</ul>' +
                            '<div class="tab-content m-0" id = "myTabContent" >' +
                            ' <div class="tab-pane fade show active displaynone_onTab-Container" id="structure" role="tabpanel" aria-labelledby="structure-tab" >' +
                            '<ul id="collapseThree" class="d-flex flex-column" >';
                        for (var i = 0; i < data.length; i++) {
                            if (i == 0) {
                                $('[data-divstructureid="default-structure"]').attr('data-divstructureid', data[i].StructureId);
                            }
                            html += '<li class=""><div class="container structure-draggable ui-draggable p-0 droppable-items-place-none"><div class="d-flex flex-wrap structureToDelete w-100" data-structuredesignid="' + data[i].StructureName + '"  data-divstructureid="' + data[i].StructureId + '" data-isEdit="true"> <div class="w-100 d-flex position-relative" style="z-index:2; margin-bottom: -18px;"><a class="structuredelete hideButtonDashboard px-1 p-0 btn btn-danger text-white border-0 hidden" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().structuredelete(this)" ;="" id="structuredelete"> <i class="fa fa-trash "></i></a><a class="px-1 p-0 btn btn-dark ml-auto text-white border-0 structures-settings hidden" data-toggle="modal" data-target="#structure_settingModal" data-backdrop="false" onclick="Unibase.Platform.Widgets.Components._Widget.Instance().structSetting(this);"  id="structures-settings"><i class="las la-tools"></i></a></div>';
                            let width = data[i].StructureWidth.split('|');
                            for (var k = 0; k < width.length; k++) {
                                html += '<div class="col-md-' + width[k] + ' droppablePlaceCol p-0" data-isblock="1" data-structureindex=' + k + '><div class="border rounded-2 p-3 blocks-droppable-items-place" id="' + width[k] + '"></div></div>';
                            }
                        }
                        html += '</ul>' +
                            '</div>' +
                            '<div class="tab-pane fade" id="Widgets" role="tabpanel" aria-labelledby="Widgets-tab">' +
                            '<ul class="navbar-nav flex-column">' +
                            '<li class="nav-item">' +
                            '<a class="nav-link-text accordion-toggle" style="cursor:pointer;" data-toggle="collapse" data-parent="#widgetAccordian" href="#collapseTwo">' +
                            '<span class="nav-link-text">Common Widgets</span>' +
                            ' </a>' +
                            '<ul id="collapseTwo" class="panel-collapse collapse navbar-nav flex-column"><li>' +
                            '<ul class="flex-column no-border no-radius list-group-alt sortableWidgetList dsl-block-wrap" id="sortableWidgetList">' +
                            '<li id="drag" class="hidden nav-item widget-item divCommonWidgetSlider"></li>' +
                            '<li id="drag" class="hidden nav-item widget-item divCommonWidgetSlider"></li>' +
                            '</ul>' +
                            '</li>' +
                            '</ul>' +
                            '</li></ul>' +
                            '<hr class="nav-separator">' +
                            '<div class="nav-tabs-header panel" id="AddedWidgets">' +
                            '<ul class="navbar-nav flex-column dsl-block-wrap">' +
                            '<li class="nav-item">' +
                            '<a class="nav-link-text accordion-toggle" style="cursor:pointer;" data-toggle="collapse" data-parent="#widgetAccordian" href="#collapseThree">' +
                            '<span class="nav-link-text">Already AddedWidgets</span>' +
                            '</a>' +
                            ' <ul id="collapseThree" class="panel-collapse collapse navbar-nav flex-column"><li>' +
                            '<ul class="flex-column no-border no-radius list-group-alt sortableWidgetList dsl-block-wrap" id="sortableWidgetList">' +
                            '<li class="hidden nav-item widget-item divAddedWidgetSlider"></li>' +
                            '</ul>' +
                            '</li>' +
                            '</li></ul>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                        $("#nav-widgets-container").html(html);
                        $("#dashboardwidget-container, #tab-container").on('mouseover', '.structureToDelete', function () {
                            var CheckWidget_Avalaiable = $(this).find(".widgetdataHere").length;
                            if (CheckWidget_Avalaiable == 0) {
                                $(this).find(".structuredelete").removeClass("hidden ");
                            }
                        });
                        $("#dashboardwidget-container, #tab-container").on('mouseout', '.structureToDelete', function () {
                            $(this).find(".structuredelete").addClass("hidden");
                        });
                        $(".structure-draggable").sortable({
                            connectWith: `#${Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()} #dashboardwidget-container, #${Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()} #tab-container, #${Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()} .widgetplace`,
                            forcePlaceholderSize: true,
                            handle: 'div',
                            opacity: 0.6,
                            cursor: 'move',
                            tolerance: "intersect",
                            axis: 'y',
                            helper: function (event, ui) {
                                $(ui).attr({ 'data-clone': 'clonestruct' });
                                $(ui).find('.ui-sortable.ui-sortable-handle').not('.dashboardwidget-container').removeClass('biz-primary-border-color').addClass('border-dashed border');
                                var copyHelper = ui.clone().insertAfter(ui);
                                return ui.clone();
                            },
                            sort: function (event, ui) {
                                let height = $(ui.item).height() + 'px';
                                $("#dashboardwidget-container, .tab-container").find(".ui-sortable-placeholder").css({
                                    "visibility": "visible", "width": "100%", "height": height, "background-image": "linear-gradient(135deg, rgb(255 255 255) 0%, transparent 0%, rgb(255 255 255) 50%, rgb(112 108 108) 0%, rgb(240 240 240) 51%, transparent 38%, rgb(255 255 255))", "background-size": "12px 12px", "margin": "20px 0px"
                                });
                                $(".ui-draggable").find(".ui-sortable-placeholder").css({
                                    "visibility": "hidden", "width": "0%", "height": "0px"
                                });
                                $(".widgetplace").find(".ui-sortable-placeholder").css({
                                    "visibility": "visible", "width": "100%", "height": height, "background-image": "linear-gradient(135deg, rgb(255 255 255) 0%, transparent 0%, rgb(255 255 255) 50%, rgb(112 108 108) 0%, rgb(240 240 240) 51%, transparent 38%, rgb(255 255 255))", "background-size": "12px 12px", "margin": "20px 0px"
                                });
                            },
                            stop: function (event, ui) {
                                console.log("structure-draggable is firing");
                                let dragdrop_html = '<div class="structureContent d-flex justify-content-center p-2 mx-auto w-100 my-25" id="details-page-portlet"><a href="javascript:void(0)" class="w-100 d-flex justify-content-center p" data-toggle="modal" data-target="#dashboardWidgetModal" onclick=" Unibase.Platform.Widgets.Components._Widget.Instance().widgetsModal(' + InstalledAppId + ', this);"> <span><i class="la la-plus mr-2"></i>Add Widget</span></a></div>';
                                let structureParent = 'divStructure_' + Math.floor(Math.random() * Date.now());
                                let parentstructureid = $(event.originalEvent.target).closest('.structureDiv').attr('data-divstructureid');
                                if (Unibase.Themes.Providers.DetailHelper.installedAppId == 0) {
                                    $('.ui-sortable.ui-sortable-handle').not('.dashboardwidget-container').removeClass('border-2 border-dashed').addClass('biz-primary-border-color');
                                    if ($(ui.item).parents('#dashboardwidget-container').length != 0) {
                                        $('#dashboardwidget-container').attr({ 'data-isedit': 'true' });
                                        let parentElement = $(ui.item).parent().attr('data-id');
                                        $(event.originalEvent.target).parent().attr('data-isblock', '0');
                                        if (parentElement != 'dashboardwidget-container') {
                                            parentElement = $(ui.item).closest('.droppablePlaceCol:has([data-clone="clonestruct"])').attr('id');
                                        }
                                        $(ui.item).addClass('border border-2 border-dashed p-2 m-1 structureDiv').attr({ 'data-parent': parentElement, id: structureParent });
                                        $(ui.item).find('.droppablePlaceCol').each(function () {
                                            let structureId = 'structureId_' + Math.floor(Math.random() * Date.now());
                                            $(this).removeClass('biz-primary-border-color p-1').addClass('px-0 px-sm-10').attr({ 'data-parent': structureParent, id: structureId, 'data-parentstructureid': parentstructureid });
                                        });
                                        $(ui.item).find('.blocks-droppable-items-place').addClass('widgetplace border-primary border-2').removeClass("biz-primary-border-color").append(dragdrop_html);
                                        $(ui.item).find('.structures-settings').removeClass('hidden');
                                        $('#collapseThree').find('.structureToDelete[data-clone= clonestruct]:not(:last-child)').remove();
                                    }
                                    $('#dashboardwidget-container .ui-sortable.ui-sortable-handle').removeClass('biz-primary-border-color').addClass("border-2 border");
                                }
                                else {
                                    if ($(ui.item).parents('#tab-container').length != 0) {
                                        $(ui.item).removeClass('d-flex flex-wrap').addClass('row mx-0');
                                        $(ui.item).find('.structures-settings').removeClass('hidden');
                                        $(ui.item).addClass('my-1 structureDiv border border-2 border-dashed').attr("id", structureParent);
                                        $(ui.item).find('.droppablePlaceCol').addClass('px-1 pb-1');
                                        $(ui.item).find('.droppablePlaceCol').each(function () {
                                            let appstructureId = 'structureId_' + Math.floor(Math.random() * Date.now()), appsparentstructureid, appsparent;
                                            if ($(ui.item).closest('.droppablePlaceCol').attr('id') != undefined) {
                                                appsparentstructureid = $(ui.item).closest('.droppablePlaceCol').attr('id');
                                                $(ui.item).attr({ "data-parent": appsparentstructureid });
                                            }
                                            else {
                                                $(ui.item).attr({ "data-parent": "tab-container" });
                                                appsparentstructureid = 0;
                                            }
                                            $(this).attr({ 'data-apps_parentstructureid': appsparentstructureid, "id": appstructureId, 'data-parent': structureParent, 'data-parentstructureid': parentstructureid });
                                        });
                                        $(ui.item).find('.droppablePlaceCol').removeClass('p-1').find('.blocks-droppable-items-place').removeClass('biz-primary-border-color').addClass('border-primary border-2 widgetplace ').html(dragdrop_html);
                                        $('.widgetplace').sortable();
                                    }
                                }
                            },
                        });
                        $("#collapseThree  .droppablePlaceCol").removeClass("p-0").addClass("p-1");
                        $("#collapseThree .blocks-droppable-items-place").addClass("border biz-primary-border-color");
                        if (InstalledAppId == 0) {
                            $('#PageWidgets').hide();
                            $('#BindPortletPermissions').remove();
                            $('#AddWidget_btnSelectWidget').addClass('hidden');
                            $('.detail-edit-close').removeClass('btn-light');
                        }
                        $("#txt_global_Search").on("keyup", function () {
                            var txt = $('#txt_global_Search').val();
                            if (txt == '') {
                                $('.widget-added-item').show();
                                $('.panel-collapse.in').collapse('hide');
                            }
                            else {
                                $('.widget-added-item').hide();
                                $('.panel-collapse:not(".in")').collapse('show');
                                var value = $(this).val().toString().toLowerCase();
                                $("#sortableWidgetList li").each(function () {
                                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                                });
                            }
                        });
                        $(".dripicons-cross").click(function () {
                            $('#txt_global_Search').empty();
                            $('.widget-added-item').show();
                            $('.panel-collapse.in').collapse('hide');
                        });
                        var instance = Unibase.Platform.Widgets.Components.Widget.Instance();
                        $('.panel').on('show.bs.collapse', function (e) {
                            instance.loadNewWidgets(e.currentTarget.id, null, InstalledAppId);
                        });
                        if (InstalledAppId == 0 || InstalledAppId == undefined) {
                            $('#collapseTwo').removeClass('panel-collapse collapse');
                            $('#collapseTwo').addClass('panel-collapse in');
                            instance.loadNewWidgets("CommonWidgets", null, InstalledAppId);
                        }
                        else {
                            instance.loadNewWidgets("PageWidgets", null, InstalledAppId);
                        }
                    }
                    structuredelete(event) {
                        let instance = this;
                        instance.DeleteparentStructures(event);
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesignDelete = instance.structDesignIdArrayDelete;
                        $(event).closest('.structureToDelete').remove();
                    }
                    DeleteparentStructures(event) {
                        let instance = this, StructureDesignId;
                        let divId = $(event).parent().parent().attr('id');
                        $("#" + divId).find(".droppablePlaceCol[data-parent=" + divId + "]").each(function () {
                            StructureDesignId = $(this).attr('id').split('_');
                            instance.structDesignIdArrayDelete.push({
                                'StructureDesignId': Number(StructureDesignId[1]),
                                'StructureId': Number(0),
                                'ParentId': Number(0),
                                'PortletId': Number(0),
                                'DropOrderIndex': Number(0),
                                'StructureHIndex': Number(0),
                                'StructureVIndex': Number(0),
                                'IsBlock': false,
                                'ParentIndex': Number(0),
                                'parentstructureid': Number(0),
                                'StrctWidgetIndex': Number(0)
                            });
                            instance.DeleteprepareStructureDesign(event, $(this).attr('id'));
                        });
                    }
                    DeleteprepareStructureDesign(event, structureId) {
                        let instance = this, StructureDesignId = [];
                        $("#" + structureId).find(".structureDiv[data-parent=" + structureId + "]").each(function () {
                            let divId = $(this).attr('id');
                            $("#" + divId).find(".droppablePlaceCol[data-parent=" + divId + "]").each(function () {
                                StructureDesignId = $(this).attr('id').split('_');
                                instance.structDesignIdArrayDelete.push({
                                    'StructureDesignId': Number(StructureDesignId[1]),
                                    'StructureId': Number(0),
                                    'ParentId': Number(0),
                                    'PortletId': Number(0),
                                    'DropOrderIndex': Number(0),
                                    'StructureHIndex': Number(0),
                                    'StructureVIndex': Number(0),
                                    'IsBlock': false,
                                    'ParentIndex': Number(0)
                                });
                                instance.DeleteprepareStructureDesign(event, $(this).attr('id'));
                            });
                        });
                    }
                    loadNewWidgets(type, check, InstalledAppId, structuredesignId) {
                        var fileInstance = this.fileCacheHelper;
                        var instance = this;
                        if (InstalledAppId == undefined) {
                            InstalledAppId = 0;
                        }
                        else {
                            InstalledAppId = Number(InstalledAppId);
                        }
                        var url = "";
                        var bindingDiv = "";
                        var canProcess = false;
                        if (check == true && check != undefined) {
                            $('.widget-added-item').remove();
                        }
                        if ($('#' + type).find('.widget-added-item').length == 0)
                            canProcess = true;
                        if (canProcess) {
                            var portletId = $("#hf_PortletId").val();
                            if (type == "PageWidgets") {
                                bindingDiv = "divPageWidgetSlider";
                                Widgets.Managers.WidgetManager.Instance().getAppWidgets(InstalledAppId, portletId).then(function (response) {
                                    instance.loadWidgetsToContainer(response, bindingDiv, InstalledAppId, portletId);
                                });
                            }
                            else if (type == "CommonWidgets") {
                                bindingDiv = "divCommonWidgetSlider";
                                Widgets.Managers.WidgetManager.Instance().getCommonWidgets(InstalledAppId, portletId).then(function (response) {
                                    instance.loadWidgetsToContainer(response, bindingDiv, InstalledAppId, portletId);
                                });
                            }
                            else if (type == "AddedWidgets") {
                                bindingDiv = "divAddedWidgetSlider";
                                Widgets.Managers.WidgetManager.Instance().getAddedWidgets(InstalledAppId, portletId).then(function (response) {
                                    instance.loadWidgetsToContainer(response, bindingDiv, InstalledAppId, portletId);
                                });
                            }
                            else if (type == "details-page") {
                                Widgets.Managers.WidgetManager.Instance().getAppWidgets(InstalledAppId, portletId).then(function (response) {
                                    Unibase.Platform.Widgets.Components._Widget.Instance().loadDetailPageModal(response, 'App-Widgets', InstalledAppId, portletId);
                                });
                                Widgets.Managers.WidgetManager.Instance().getCommonWidgets(InstalledAppId, portletId).then(function (response) {
                                    Unibase.Platform.Widgets.Components._Widget.Instance().loadDetailPageModal(response, 'common-widgets', InstalledAppId, portletId);
                                });
                                Widgets.Managers.WidgetManager.Instance().getAddedWidgets(InstalledAppId, portletId).then(function (response) {
                                    Unibase.Platform.Widgets.Components._Widget.Instance().loadDetailPageModal(response, 'common-widgets', InstalledAppId, portletId);
                                });
                            }
                            else if (type == "dashbaord-page") {
                                Widgets.Managers.WidgetManager.Instance().getCommonWidgets(InstalledAppId, portletId).then(function (response) {
                                    Unibase.Platform.Widgets.Components._Widget.Instance().loadDetailPageModal(response, 'common-widgets', InstalledAppId, portletId, structuredesignId);
                                });
                            }
                        }
                    }
                    loadWidgetsToContainer(widgets, bindingDiv, installedAppId, portletId) {
                        var instance = this.fileCacheHelper;
                        var widgetData = widgets.result;
                        let VisibleContainerId = Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds[Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.length - 1];
                        for (var i = 0; i < widgetData.length; i++) {
                            var html = '<li class="nav-item widget-item widget-added-item mt-10 list-widget-' + widgetData[i].WidgetId + ' widgetid-' + widgetData[i].WidgetId + '' + bindingDiv + ' dsl-block datagroup" data-toggle="popover-hover" data-img="tenants/themes/default/imgs/imgpopover.png" value=' + widgetData[i].WidgetId + ' id="ListWidgets">' +
                                '<input type="hidden" value=' + widgetData[i].WidgetId + ' id="hf_ListwidgetId" />' +
                                '<input type="hidden" value=' + widgetData[i].WidgetUrl + ' id="widgetUrl-' + widgetData[i].WidgetId + '" />' +
                                '<input type="hidden" value="' + widgetData[i].WidgetName + '" id="widgetName" />' +
                                '<input type="hidden" value=' + widgetData[i].IsFiltarable + ' id="IsFiltarable" />' +
                                '<input type="hidden" value=' + widgetData[i].UniqueId + ' id="hf_WidgetUniqueId" />' +
                                '<input type="hidden" value=' + widgetData[i].Width + ' id="widgetWidth" />' +
                                '<span><i class="las la-braille dragger"></i>' +
                                '<span title="' + widgetData[i].WidgetName + '" class="dsl-block-name" style="color:#2f343a !important" >' + widgetData[i].WidgetName + '</span>' +
                                '</span>' +
                                '</li>';
                            $('.' + bindingDiv + ':last').after(html);
                        }
                        var connecteddiv = "";
                        if (installedAppId == undefined) {
                            installedAppId == 0;
                        }
                        if (installedAppId != 0 && installedAppId != undefined) {
                            connecteddiv = "tab-container";
                        }
                        else {
                            connecteddiv = "widgetplace";
                        }
                        $('#' + VisibleContainerId).find(".sortableWidgetList").sortable({
                            connectWith: "." + connecteddiv + "",
                            cursor: 'move',
                            tolerance: "pointer",
                            placeholder: "ui-state-highlight",
                            helper: function (e, li) {
                                const copyHelper = li.clone().insertAfter(li);
                                return li.clone();
                            },
                            start: function () {
                                $('.divNewWidgetListContainer').removeAttr("style");
                            },
                            stop: function (e) {
                                $(".divNewWidgetListContainer").css("overflow-y", "auto");
                            },
                        });
                        $('#' + VisibleContainerId).find("#dashboardwidget-container, #tab-container").on('mouseover', '.structureToDelete', function () {
                            let VisibleContainerId = Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds[Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.length - 1];
                            $('#' + VisibleContainerId).find('.blocks-droppable-items-place').sortable({
                                items: Unibase.Platform.Widgets.Components.Widget.Instance().items,
                                connectWith: ' .widgetplace',
                                tolerance: "pointer",
                                forcePlaceholderSize: true,
                                receive: function (event, ui) {
                                    console.log("blocks-droppable-items-place is firing");
                                    let _parentId = $(event.target).parents('.droppablePlaceCol').attr('id');
                                    $(ui.item).attr('data-parent', _parentId);
                                    if ($("#hf_PortletId").val() == 0) {
                                        var html = '<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>Please Add Portlet!</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary" data-dismiss="modal" onclick="_bizgazeNavigation_Add_Widgets.AddPortlet()";>AddPortlet</button></div></div></div></div>';
                                        $(".details-footer").after(html);
                                        $("#exampleModal").modal();
                                        $("#tab-container").empty();
                                        return null;
                                    }
                                    var id = ui.item.attr('id');
                                    var widget_drag_id = "ListWidgets";
                                    if (id == widget_drag_id) {
                                        this.copyHelper = null;
                                        var imgurl = ui.item.attr('data-img');
                                        var widgetid = $(this).find("#hf_ListwidgetId").val();
                                        var WidgetName = $(this).find("#widgetName").val();
                                        var widgetUniqueId = $(this).find("#hf_WidgetUniqueId").val();
                                        instance.loadJsFile("platform/widgets/components/widgethiddenfields.js", function () {
                                            var uniqkey = Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid;
                                            var html1 = '<div class="card-header"><div class="WidgetName pull-left" id="WidgetName"><a class="pull-left btn btn-sm"><strong>' + WidgetName + '</strong></a></div><div class="card-action-wrap editwidget editwidget-' + $(this).find("#hf_ListwidgetId").val() + ' pull-right" id="editwidget"><a href="javascript:;" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deletePortletWidgets(' + widgetid + ')"; title="Click here to Remove Widget"> <i class="ti-trash"></i></a></div></div>';
                                            if (installedAppId != 0) {
                                                ui.item.html('<div class="portletwidget-item dashboardwidget-item dashboarddisplaynone  portletwidget-addeditem widgetItem-' + widgetid + ' widgetid-' + widgetid + ' col-sm-12 mb-sm-20 mb-2" id="' + widgetid + '"><div class="b-a card"><input type = "hidden" value = ' + widgetid + ' id = "hf_widgetId" /><input type = "hidden" value = ' + uniqkey + ' id = "hf_widgetId_uniq" />' + html1 + '<img src=' + imgurl + ' style="width:100%" class="img-responsive"></img></div></div>').contents().unwrap();
                                            }
                                            else {
                                                ui.item.html('<div class="dashboardwidget-item dashboarddisplaynone dashboardwidget-addeditem widgetItem-' + widgetid + ' widgetid-' + widgetid + ' col-sm-12 mb-sm-20 mb-2" id="' + widgetid + '"><div class="b-a card"><input type = "hidden" value = ' + widgetid + ' id = "hf_widgetId" /><input type = "hidden" value = ' + uniqkey + ' id = "hf_widgetId_uniq" />' + html1 + '<img src=' + imgurl + ' style="width:100%" class="img-responsive"></img></div></div>').contents().unwrap();
                                            }
                                            $('.widgetItem-' + widgetid + '').parents(".widgetplace").find(".structureContent").removeClass("StructureToAlert");
                                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgets[uniqkey] = {
                                                PortletId: Number($("#hf_PortletId").val()),
                                                WidgetId: Number(widgetid),
                                                WidgetName: WidgetName,
                                                WidgetUniqueId: widgetUniqueId,
                                            };
                                        });
                                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid = Number(Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid + 1);
                                    }
                                },
                                sort: function (event, ui) {
                                    let height = $(ui.item).height() + 'px';
                                    $(".widgetplace").find(".ui-sortable-placeholder").css({
                                        "visibility": "visible", "width": "100%", "height": height, "background-image": "linear-gradient(135deg, rgb(255 255 255) 0%, transparent 0%, rgb(255 255 255) 50%, rgb(112 108 108) 0%, rgb(240 240 240) 51%, transparent 38%, rgb(255 255 255))", "background-size": "12px 12px", "margin": "20px 0px"
                                    });
                                    let array = ui.item[0].classList;
                                    array.forEach(function (item, index) {
                                        if (item.includes('col-lg')) {
                                            $(ui.item).siblings('.ui-sortable-placeholder').addClass('w-100').removeClass(item);
                                        }
                                    });
                                },
                                update: function (event, ui) {
                                    Unibase.Themes.Compact.Components.Details.Instance().isPortletModified = true;
                                    let array = ui.item[0].classList;
                                    array.forEach(function (item, index) {
                                        if (item.includes('col-lg')) {
                                            $(ui.item).addClass('w-100').removeClass(item);
                                            $(ui.item).siblings('.ui-sortable-placeholder').addClass('w-100').removeClass(item);
                                        }
                                    });
                                }
                            });
                        });
                        if (Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable != false && Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable != false) {
                            $('#' + Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()).find('.tab-container').sortable({
                                tolerance: "pointer",
                                forcePlaceholderSize: true,
                                receive: function (event, ui) {
                                    console.log("Tab-container is firing");
                                    if ($("#hf_PortletId").val() == 0) {
                                        var html = '<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>Please Add Portlet!</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary" data-dismiss="modal" onclick="_bizgazeNavigation_Add_Widgets.AddPortlet()";>AddPortlet</button></div></div></div></div>';
                                        $(".details-footer").after(html);
                                        $("#exampleModal").modal();
                                        $("#tab-container").empty();
                                        return null;
                                    }
                                    var id = ui.item.attr('id');
                                    var widget_drag_id = "ListWidgets";
                                    if (id == widget_drag_id) {
                                        $(".structuredelete ").addClass("hidden");
                                        this.copyHelper = null;
                                        var imgurl = ui.item.attr('data-img');
                                        var widgetid = $(this).find("#hf_ListwidgetId").val();
                                        var WidgetName = $(this).find("#widgetName").val();
                                        var widgetUniqueId = $(this).find("#hf_WidgetUniqueId").val();
                                        instance.loadJsFile("platform/widgets/components/widgethiddenfields.js", function () {
                                            var uniqkey = Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid;
                                            var html1 = '<div class="card-header"><div class="WidgetName pull-left" id="WidgetName">' +
                                                '<a class="pull-left btn btn-sm"><strong>' + WidgetName + '</strong></a></div>' +
                                                '<div class="card-action-wrap editwidget editwidget-' + $(this).find("#hf_ListwidgetId").val() + ' pull-right" id="editwidget"><a href="javascript:;" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deletePortletWidgets(' + widgetid + ')"; title="Click here to Remove Widget"> <i class="ti-trash"></i></a></div></div>';
                                            if (installedAppId != 0) {
                                                ui.item.html('<div class="portletwidget-item dashboardwidget-item dashboarddisplaynone  portletwidget-addeditem widgetItem-' + widgetid + ' widgetid-' + widgetid + ' col-sm-12 mb-sm-20 mb-2" id="' + widgetid + '"><div class="b-a card"><input type = "hidden" value = ' + widgetid + ' id = "hf_widgetId" /><input type = "hidden" value = ' + uniqkey + ' id = "hf_widgetId_uniq" />' + html1 + '<img src=' + imgurl + ' style="width:100%" class="img-responsive"></img></div></div>').contents().unwrap();
                                            }
                                            else {
                                                ui.item.html('<div class="dashboardwidget-item dashboarddisplaynone dashboardwidget-addeditem widgetItem-' + widgetid + ' widgetid-' + widgetid + ' col-sm-12 mb-sm-20 mb-2" id="' + widgetid + '"><div class="b-a card"><input type = "hidden" value = ' + widgetid + ' id = "hf_widgetId" /><input type = "hidden" value = ' + uniqkey + ' id = "hf_widgetId_uniq" />' + html1 + '<img src=' + imgurl + ' style="width:100%" class="img-responsive"></img></div></div>').contents().unwrap();
                                            }
                                            Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgets[uniqkey] = {
                                                PortletId: Number($("#hf_PortletId").val()),
                                                WidgetId: Number(widgetid),
                                                WidgetName: WidgetName,
                                                WidgetUniqueId: widgetUniqueId,
                                            };
                                        });
                                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid = Number(Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid + 1);
                                    }
                                },
                            });
                        }
                        else {
                            $("#dashboardwidget-container").on('mouseover', '.structureToDelete', function () {
                            });
                        }
                    }
                    RenderEditDashboard(Container) {
                        var widgetsLen = Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds.length;
                        var html1 = '';
                        var portletid = $('#hf_PortletId').val();
                        for (var i = 0; i < widgetsLen; i++) {
                            if (Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].PortletId == portletid) {
                                var html2 = '<div class="card-header"><div class="WidgetName pull-left" id="WidgetName"><a class="pull-left btn btn-sm"><strong>' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetName + '</strong></a></div><div class="card-action-wrap editwidget editwidget-' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetId + ' pull-right" id="editwidget"><a href="javascript:;" onclick="Unibase.Platform.Widgets.Components.Widget.Instance()deletePortletWidgets()";="" title="Click here to Remove Widget"> <i class="ti-trash"></i></a></div></div>';
                                if ($('#hf_ProfileInstalledappid').val() != 0) {
                                    html2 = '<div class="portletwidget-item portletwidget-addeditem widgetItem-' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetId + ' widgetid-' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetId + ' col-sm-12"><div class="b-a card"><input type = "hidden" value = ' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetId + ' id = "hf_widgetId" /><input type = "hidden" value = ' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid + ' id = "hf_widgetId_uniq" />' + html2 + '<img src=' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].ImageUrl + ' style="width:100%" class="img-responsive"></img></div></div>';
                                }
                                else {
                                    html2 = '<div class="dashboardwidget-item dashboardwidget-addeditem widgetItem-' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetId + ' widgetid-' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetId + ' col-sm-12"><div class="b-a card"><input type = "hidden" value = ' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].WidgetId + ' id = "hf_widgetId" /><input type = "hidden" value = ' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().uniq_new_portletwid + ' id = "hf_widgetId_uniq" />' + html2 + '<img src=' + Unibase.Platform.Widgets.WidgetHiddenFields.Instance().EditPortletAndWidgetsIds[i].ImageUrl + ' style="width:100%" class="img-responsive"></img></div></div>';
                                }
                                html1 += html2;
                            }
                        }
                        if (html1 != "") {
                            if ($(Container).find("#tab-container").html() == "") {
                                $(Container).find("#tab-container").html(html1);
                            }
                            else {
                            }
                        }
                    }
                    deletePortletWidgets(portletWidgetId, widgetid) {
                        var portletWidgetId = portletWidgetId;
                        if (portletWidgetId == undefined) {
                            portletWidgetId = 0;
                        }
                        var divclass = "portletwidget-item";
                        var Installedappid = Number(Unibase.Themes.Providers.DetailHelper.installedAppId);
                        if (Installedappid == 0) {
                            if (portletWidgetId == 0) {
                                $('#' + widgetid).remove();
                            }
                            else {
                                $('.widgetItem-' + portletWidgetId).parent().remove();
                            }
                        }
                        if (Installedappid != 0) {
                            if (widgetid != undefined) {
                                $('#' + widgetid).remove();
                            }
                            else {
                                $('.widgetItem-' + portletWidgetId).remove();
                            }
                        }
                        Unibase.Platform.Widgets.WidgetHiddenFields.Instance().deleteWidget.push({
                            PortletWidgetId: portletWidgetId
                        });
                        if (widgetid) {
                            Unibase.Platform.Widgets.Components._Widget.Instance().existingwidgets = Unibase.Platform.Widgets.Components._Widget.Instance().existingwidgets.filter(id => id != +widgetid);
                        }
                        Unibase.Themes.Compact.Components.Details.Instance().isPortletModified = true;
                    }
                    ShowPortletPermissions() {
                        let instance = this;
                        instance.fileCacheHelper.loadJsFile('platform/portlets/components/portletpermission.js', function () {
                            instance.navigationHelper.popup(0, "", Unibase.Platform.Portlets.Components.PortletPermission.Instance(), null, Platform.Helpers.Size.Medium);
                            $(".toplayout-structures-panel").css({ "z-index": "1040" });
                            $(".biz-submenu").css({ "z-index": "1040" });
                        });
                    }
                    DeletePortletWidgetsByPortlet(PortletWidgetArr, Id) {
                        this.fileCacheHelper.loadJsFile("platform/core/helpers/message/messagehelper.js", function () {
                            if (PortletWidgetArr.length == 0) {
                            }
                            else {
                            }
                        });
                    }
                    loadNewPortlet(InstalledAppId, PortletId) {
                        let panel = "#" + Unibase.Themes.Compact.Components.Details.Instance()._containerId;
                        var obj = new Unibase.Themes.Compact.Components.Details();
                        var installedappid = Number(Unibase.Themes.Providers.DetailHelper.installedAppId);
                        var recordid = Unibase.Themes.Providers.DetailHelper.recordId;
                        obj._installedAppId = installedappid;
                        obj._recordId = recordid;
                        $(panel).find('.tab-container').empty();
                        Unibase.Themes.Compact.Components.Details.Instance().loadPortlets(obj);
                    }
                    ClosePermissionModal() {
                        $('.btn_addportlt').removeClass('hidden');
                        $('.btnEdit_portlet').removeClass('hidden');
                        $('.manage_pPermissions').removeClass('hidden');
                        $('.btn_dltportlet').removeClass('hidden');
                    }
                    closeCreate() {
                        var panel = $("#_bizgaze_modal").prev('.modal')[0].attributes.item.name;
                        $('#' + panel).modal('hide');
                        $('#' + panel).remove();
                        if ($("._bizgaze_create_container_EditScreen").length <= 0) {
                            $('.modal-backdrop').slice(1, $(".modal-backdrop").length - 2).remove();
                            $("#bizgaze_body").addClass("modal-open");
                        }
                    }
                    renderAddPortletText(isEdit, InstalledAppId) {
                        let containerId = Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId();
                        let portletId = Number($('#' + containerId).find(".tab-addeditem a.active").find('#hf_PortletId').val());
                        if (Unibase.Themes.Compact.Components.Details.Instance().isPortletModified == true) {
                            $('#' + containerId).find('#AddPortlets').attr('data-isClicked', 'true');
                            let panel = Unibase.Themes.Compact.Components.Details.Instance()._containerId;
                            Unibase.Themes.Compact.Components.Details.Instance().confirmPortletChangesModal(InstalledAppId, portletId, panel);
                        }
                        else {
                            this.fileCacheHelper.loadJsFile("platform/portlets/components/portlet.js", function () {
                                $(".biz-submenu").css({ "z-index": "" });
                                $(".biz-layout-3-left-nav").css({ "z-index": "" });
                                $(".toplayout-structures-panel").css({ "z-index": "1040" });
                                Unibase.Platform.Helpers.NavigationHelper.Instance().popup("", "", Unibase.Platform.Portlets.Components.Portlet.Instance(), function () {
                                    let Id = Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId();
                                    Unibase.Platform.Widgets.WidgetHiddenFields.Instance().isEdit = Boolean(isEdit);
                                    if (!isEdit) {
                                        Unibase.Platform.Portlets.Managers.PortletManager.Instance().getPortletsByInstalledApp(InstalledAppId, 0).then(function (response) {
                                            if (response.result != null) {
                                                $('#' + Id).find('.modal-header .modal-title').text('Create Portlet');
                                                $('#' + Id).find("#txt_PortletIndex").val(response.result.length + 1);
                                                $('#' + Id).find("#txt_PortletIndex").attr('disabled', 'true');
                                            }
                                        });
                                    }
                                    if (isEdit) {
                                        Unibase.Platform.Portlets.Managers.PortletManager.Instance().getPortlet(portletId).then(function (response) {
                                            var portlet = response.result;
                                            $('#' + Id).find('.modal-header .modal-title').text('Edit Portlet');
                                            $('#' + Id).find("#txt_PortletName").val(portlet.PortletName);
                                            $('#' + Id).find("#txt_PortletIndex").val(portlet.PortletIndex);
                                            $('#' + Id).find("#hf_portletviewallstages").val(String(portlet.ViewAllStages));
                                            if (portlet.IsStructureEnabled == false) {
                                                $('#' + Id).find("#chkIsStructureEnabled").prop('checked', false);
                                            }
                                            $('#chkIsStructureEnabled').on('change', function () {
                                                var msg, enable;
                                                enable = !$('#chkIsStructureEnabled').prop("checked");
                                                if ($('#chkIsStructureEnabled').prop("checked")) {
                                                    msg = 'Are you sure want to enable structures for this portlet?';
                                                }
                                                else {
                                                    msg = 'Are you sure? Do you want to disable structures? <br><br>  structures and layouts of widgets for this portlet  will be deleted.you need to reconfigure structures when you enabled it.';
                                                }
                                                bootbox.confirm({
                                                    message: msg,
                                                    closeButton: false,
                                                    buttons: {
                                                        confirm: {
                                                            label: 'OK',
                                                            className: 'btn-success'
                                                        },
                                                        cancel: {
                                                            label: 'Cancel',
                                                            className: 'btn-danger'
                                                        }
                                                    },
                                                    callback: function (result) {
                                                        return __awaiter(this, void 0, void 0, function* () {
                                                            if (!result) {
                                                                $('#chkIsStructureEnabled').prop("checked", enable);
                                                            }
                                                        });
                                                    }
                                                });
                                            });
                                        });
                                    }
                                }, Platform.Helpers.Size.Medium);
                            });
                        }
                    }
                    savePortlet() {
                        var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        $('.btn_addportlt').removeClass('hidden');
                        $('.btnEdit_portlet').removeClass('hidden');
                        $('.manage_pPermissions').removeClass('hidden');
                        $('.btn_dltportlet').removeClass('hidden');
                        if (InstalledAppId == undefined || InstalledAppId == null) {
                            var InstalledAppId = 0;
                        }
                        if ($("#txt_PortletName").val() == "") {
                            MessageHelper.Instance().showError("Portlet name cant be empty.", "Bizgaze_SpiltErrorMessages");
                            return false;
                        }
                        if (InstalledAppId != undefined && InstalledAppId != null)
                            InstalledAppId = Number(Unibase.Themes.Providers.DetailHelper.installedAppId);
                        this.fileCacheHelper.loadJsFile("platform/portlets/requests/portlet.js", function () {
                            var viewallstages = true;
                            let VisibleContainerId = '#' + Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId();
                            let reqObj = new Unibase.Platform.Portlets.Requests.Portlet();
                            if (!Unibase.Platform.Widgets.WidgetHiddenFields.Instance().isEdit) {
                                reqObj.PortletName = String($(VisibleContainerId).find("#txt_PortletName").val());
                                reqObj.PortletIndex = Number($(VisibleContainerId).find("#txt_PortletIndex").val());
                                reqObj.IsMandatory = Boolean($(VisibleContainerId).find('#chkIsWidgetViewable').is(':checked')),
                                    reqObj.ViewAllStages = viewallstages,
                                    reqObj.IsStructureEnabled = Boolean($(VisibleContainerId).find("#chkIsStructureEnabled").prop("checked")),
                                    reqObj.InstalledAppId = Number(Unibase.Themes.Providers.DetailHelper.installedAppId);
                            }
                            else {
                                if ($("#hf_portletviewallstages").val() == 'false') {
                                    viewallstages = false;
                                }
                                reqObj.PortletId = Unibase.Themes.Compact.Components.Details.Instance().unibase_core_activeportletid;
                                reqObj.PortletName = String($(VisibleContainerId).find("#txt_PortletName").val());
                                reqObj.PortletIndex = Number($(VisibleContainerId).find("#txt_PortletIndex").val());
                                reqObj.IsMandatory = Boolean($(VisibleContainerId).find('#chkIsWidgetViewable').is(':checked')),
                                    reqObj.ViewAllStages = viewallstages,
                                    reqObj.InstalledAppId = Number(Unibase.Themes.Providers.DetailHelper.installedAppId),
                                    reqObj.IsStructureEnabled = Boolean($(VisibleContainerId).find("#chkIsStructureEnabled").prop("checked"));
                            }
                            Unibase.Platform.Portlets.Managers.PortletManager.Instance().savePortlet(reqObj).then(function (response) {
                                var portlet = response.result;
                                Unibase.Platform.Helpers.NavigationHelper.Instance().closePopUp();
                                $('#' + Unibase.Platform.Helpers.NavigationHelper.Instance().getLastContainerId()).find('.findportlets_' + response.result.PortletId).attr('data_isappstructenable', response.result.IsStructureEnabled.toString());
                                Unibase.Themes.Compact.Components.Details.Instance().isAppStructEnable = response.result.IsStructureEnabled;
                                Unibase.Platform.Widgets.Components.Widget.Instance().loadNewPortlet(Number(response.result.InstalledAppId), portlet.PortletId);
                            });
                        });
                    }
                    DeletePortlet(installedappid) {
                        $(".biz-submenu").css({ "z-index": "1040" });
                        $(".biz-layout-3-left-nav").css({ "z-index": "1040" });
                        $(".toplayout-structures-panel").css({ "z-index": "1040" });
                        var instance = this;
                        bootbox.confirm({
                            message: "Are you sure you want to Delete",
                            closeButton: false,
                            buttons: {
                                confirm: {
                                    label: 'Yes',
                                    className: 'btn-success'
                                },
                                cancel: {
                                    label: 'No',
                                    className: 'btn-defualt'
                                }
                            },
                            callback: function (result) {
                                let containerId = Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds[Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.length - 1];
                                $(".biz-submenu").css({ "z-index": "9999" });
                                $(".biz-layout-3-left-nav").css({ "z-index": "9999" });
                                $(".toplayout-structures-panel").css({ "z-index": "9999" });
                                if (result) {
                                    var layoutObj = ({
                                        StructureDesign: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesigns,
                                        AddWidgetsToPortlet: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().NewWidgetsForPortlet,
                                        DeletePortletWidgets: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().deleteWidget,
                                        PortletIndex: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().Portlets,
                                        PortletWidgetIndex: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().PortletWidgets,
                                        StructureDesignDelete: Unibase.Platform.Widgets.WidgetHiddenFields.Instance().StructureDesignDelete
                                    });
                                    Unibase.Platform.Widgets.Managers.WidgetManager.Instance().saveLayout(layoutObj).then(function (response) {
                                        if (response.status == Unibase.Data.Status.Success) {
                                            var activeportletid;
                                            let ActivePortletIndex = Unibase.Themes.Providers.Detail_Settings.Instance().ActivePortlets.findIndex(x => x.InstalledAppId == installedappid);
                                            if (ActivePortletIndex != -1) {
                                                activeportletid = Unibase.Themes.Providers.Detail_Settings.Instance().ActivePortlets[ActivePortletIndex].ActivePortletId;
                                            }
                                            else {
                                                activeportletid = Number($('#' + containerId).find('#layout-detail-tabs .tab-pane.tab-addeditem a.active').parent().attr('value'));
                                            }
                                            let portletId = activeportletid;
                                            Unibase.Platform.Portlets.Managers.PortletManager.Instance().deletePortlet(portletId).then(function (response) {
                                                if (response.status == Unibase.Data.Status.Error) {
                                                    MessageHelper.Instance().showError(response.message, "div_message");
                                                }
                                                else {
                                                    MessageHelper.Instance().showSuccess(response.message, '');
                                                    let recordid = Unibase.Themes.Providers.DetailHelper.recordId;
                                                    let installedappid = Unibase.Themes.Providers.DetailHelper.installedAppId;
                                                    if (installedappid == undefined) {
                                                        installedappid = 0;
                                                    }
                                                    var obj = Unibase.Themes.Compact.Components.Details.Instance();
                                                    obj._recordId = recordid;
                                                    obj._installedAppId = installedappid;
                                                    Unibase.Themes.Compact.Components.Details.Instance().loadPortlets(obj);
                                                }
                                            });
                                        }
                                    });
                                    Unibase.Themes.Providers.Detail_Settings.Instance().ActivePortlets = [];
                                }
                            }
                        });
                    }
                    loadInstalledapp(InstalledAppId) {
                        if (InstalledAppId != 0) {
                            Unibase.Platform.Apps.Managers.AppManager.Instance().getInstallApp(InstalledAppId).then(function (response) {
                                if (response.result != null) {
                                    let installedapparray = [];
                                    installedapparray.push({
                                        InstalledAppId: response.result.InstalledAppId,
                                        AppTitle: response.result.AppTitle,
                                    });
                                    Widget.Instance().InstalledAppInfo(installedapparray, InstalledAppId);
                                }
                            });
                        }
                        else {
                            Widget.Instance().InstalledAppInfo(null, InstalledAppId);
                        }
                    }
                    deisgnsclick(e) {
                        var instance = this;
                        $('#frmUnibase_widgetBuilderAppearance').trigger("reset");
                        $('#option-back').removeClass('hidden');
                        $("#ddlWidgetDesign option:selected").val($(e).attr('data-designValue'));
                        $("#ddlWidgetDesign option:selected").text($(e).attr('data-designs'));
                        $('#ddlWidgetDesign').change();
                        instance.backOption = 'Mode-2';
                        $('.KPIDesigns span.rounded-circle').remove();
                        $('#kpi-design-tab').addClass('hidden');
                        $('.static_js_hidden').removeClass('hidden');
                        let html = '<div class="d-flex justify-content-end"><span class="bg-success rounded-circle p-1 position-absolute mr-2" style="margin-top:-40px;"><i class="la la-check font-24 text-white"></i></span></div>';
                        $(e).append(html);
                        if ($(e).attr('data-designs') == 'Details_Custom') {
                            $('#kpi-design-tab, #tab_design').removeClass('active show');
                            $('.static_js_hidden').removeClass('hidden').click();
                        }
                        else {
                            $('#drawer_push').addClass('biz-drawer-toggle');
                            $('#biz-wrapper').addClass('biz-drawer-pushright');
                            $('#PivotIcon').addClass('d-none');
                            $('#Preview-Designs').removeClass('hidden').click();
                            instance.CreateWidgetPreview();
                        }
                    }
                    bindWidgetTypes(installedappid) {
                        this.fileCacheHelper.loadJsFile("platform/widgets/components/widget.template.js", function () {
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getWidgetTyes().then(function (response) {
                                if (response != null) {
                                    var res = response.result;
                                    let html = "";
                                    for (let i = 0; i < res.length; i++) {
                                        var widgettype = res[i];
                                        var template = Unibase.Widgets.Widget_Template.Instance().loadWidgetTypesDropdownTemplate();
                                        var templateScript = Handlebars.compile(template);
                                        var context = { "WidgetTypeId": widgettype.WidgetTypeId, "WidgetTypeName": widgettype.WidgetTypeName };
                                        html += templateScript(context);
                                    }
                                    jQuery("#ddlWidgetType").html(html);
                                    if (installedappid != 0)
                                        jQuery("#ddlWidgetType").val(2);
                                    jQuery("#ddlWidgetType").trigger('change');
                                }
                            });
                        });
                    }
                    bindWidgetFormats() {
                        Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getWidgetFormats().then(function (response) {
                            if (response != null) {
                                var res = response.result;
                                for (let i = 0; i < res.length; i++) {
                                    var widgetformat = res[i];
                                    $("#ddlWidgetFormat").append('<option value="' + widgetformat.WidgetFormatId + '" data-table="' + widgetformat.WidgetFormatName + '">' + widgetformat.WidgetFormatName + '</option>');
                                }
                            }
                        });
                    }
                    bindWidgetLayouts() {
                        this.fileCacheHelper.loadJsFile("platform/widgets/managers/widgetmanager.js", null);
                        this.fileCacheHelper.loadJsFile("platform/widgets/components/widget.template.js", null);
                        Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getWidgetLayouts().then(function (response) {
                            if (response != null) {
                                var res = response.result;
                                let html = "<option value=''>Select WidgetLayout</option><option value='0'>User Designed</option>";
                                for (let i = 0; i < res.length; i++) {
                                    var widgetlayout = res[i];
                                    var template = Unibase.Widgets.Widget_Template.Instance().loadWidgetLayoutsDropdownTemplate();
                                    var templateScript = Handlebars.compile(template);
                                    var context = { "WidgetLayoutId": widgetlayout.WidgetLayoutId, "WidgetLayoutName": widgetlayout.WidgetLayoutName };
                                    html += templateScript(context);
                                    if (widgetlayout.WidgetLayoutName == 'Detail') {
                                        $("#layoutDetails").attr('data-layoutid', widgetlayout.WidgetLayoutId);
                                    }
                                    if (widgetlayout.WidgetLayoutName == 'KPI') {
                                        $("#layoutKPI").attr('data-layoutid', widgetlayout.WidgetLayoutId);
                                    }
                                    if (widgetlayout.WidgetLayoutName == 'Report') {
                                        $("#layoutChartReport").attr('data-layoutid', widgetlayout.WidgetLayoutId);
                                    }
                                }
                                jQuery("#ddlWidgetLayout").html(html);
                            }
                        });
                    }
                    bindWidgetDesigns(designid, layoutid) {
                        var instance = this, LayoutId;
                        if (layoutid == undefined || layoutid == null || layoutid == '') {
                            LayoutId = $("#ddlWidgetLayout option:selected").val();
                        }
                        else {
                            LayoutId = layoutid;
                        }
                        this.fileCacheHelper.loadJsFile("platform/widgets/managers/widgetmanager.js", null);
                        this.fileCacheHelper.loadJsFile("platform/widgets/components/widget.template.js", null);
                        if (LayoutId != 0) {
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getWidgetDesigns(LayoutId).then(function (response) {
                                var load_design = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                                let mode = load_design[0].mode, loaddesign = load_design[0].loadDesigns, defaultMode = load_design[0].defaultMode = "editing";
                                instance.defautSettings = [];
                                let name = { "widgetdesignid": 20210628, "mode": mode, "loadDesigns": loaddesign, "defaultMode": defaultMode };
                                instance.defautSettings.push(name);
                                if (load_design[0].loadDesigns < 1) {
                                    for (var i = 0; i < response.result.length; i++) {
                                        instance.defautSettings.push(response.result[i]);
                                    }
                                    load_design[0].loadDesigns++;
                                }
                                if (response != null) {
                                    var res = response.result;
                                    let html = "";
                                    $('#design-Library').empty();
                                    let kpiOrdering = ["KPI_Left_Bar_color_Icon", "KPI_Icon_Bg_Color", "KPI_KPISingleValueWithborder", "KPI_KPISingleValueWithPercentage_ProgressBar", "KPI_KPISingleValueWithPercentage_BgColor", "KPI_TwoValue_BgColor", "KPI_ComparisonBottomBar_Color", "KPI_TwoValue_BottomBar_color", "KPI_ComparisonRightBar_color", "KPI_TwoValue_LineCenter", "KPI_KPISingleValueWithPie_Icon", "KPI_Icon", "KPI_Icon_Color", "KPI_Default", "KPI_KPISingleValueWithPercentage", "KPI_TwoValue", "KPI_OwlCarouselSlider", "KPI_Comparison", "Kpi_fulfillment", "KPI_CarouselSlider", "KPI_CarouselSliderBgColor"];
                                    for (let i = 0; i < res.length; i++) {
                                        var widgetdesigns = res[i];
                                        var template = Unibase.Widgets.Widget_Template.Instance().loadWidgetDesignsDropdownTemplate();
                                        var templateScript = Handlebars.compile(template);
                                        var context = { "WidgetDesignId": widgetdesigns.WidgetDesignId, "WidgetDesignName": widgetdesigns.WidgetDesignName };
                                        html += templateScript(context);
                                        var default_Settings = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === widgetdesigns.WidgetDesignName; });
                                        let TitleName, idParameter = [], previewResponse;
                                        TitleName = JSON.parse(default_Settings[0].defaultsettings).Name;
                                        var CssPropertyCreate = [{
                                                "BorderWidth": JSON.parse(default_Settings[0].defaultsettings).BorderWidth,
                                                "BorderColor": JSON.parse(default_Settings[0].defaultsettings).BorderColor,
                                                "BorderType": JSON.parse(default_Settings[0].defaultsettings).BorderType,
                                                "BorderRadius": JSON.parse(default_Settings[0].defaultsettings).BorderRadius,
                                                "FontSize": JSON.parse(default_Settings[0].defaultsettings).FontSize,
                                                "FontFamily": JSON.parse(default_Settings[0].defaultsettings).FontStyle,
                                                "BackgroundColor": JSON.parse(default_Settings[0].defaultsettings).BackgroundColor
                                            }];
                                        if ($('#ddlWidgetLayout option:selected').text() == 'KPI') {
                                            var viewertype = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === kpiOrdering[i]; });
                                            idParameter.push({ "WidgetName": JSON.parse(viewertype[0].defaultsettings).Name, "PortletWidgetId": 22501 });
                                            var classname = JSON.parse(viewertype[0].defaultsettings).classname;
                                            var viewerComponent = new Unibase.Themes.Compact.KpiWidgets[classname]();
                                            var kpidesignhtml = viewerComponent.html(idParameter, 0);
                                            var designhtml = '<li class="col-md-4 p-2 KPIDesigns" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deisgnsclick(this);"  data-designValue=' + viewertype[0].WidgetDesignId + ' data-designs="' + viewertype[0].WidgetDesignName + '">' + kpidesignhtml + '</li>';
                                            $('#design-Library').append(designhtml);
                                            if (viewertype[0].WidgetDesignName == 'KPI_Icon' || viewertype[0].WidgetDesignName == 'KPI_KPISingleValueWithPercentage' || viewertype[0].WidgetDesignName == 'KPI_Default' || viewertype[0].WidgetDesignName == 'KPI_TwoValue' || viewertype[0].WidgetDesignName == 'KPI_OwlCarouselSlider' || viewertype[0].WidgetDesignName == 'KPI_Comparison' || viewertype[0].WidgetDesignName == 'KPI_CarouselSlider' || viewertype[0].WidgetDesignName == 'KPI_Icon_Color' || viewertype[0].WidgetDesignName == 'KPI_CarouselSliderBgColor') {
                                                $(`${"li.KPIDesigns"}[data-designs="${viewertype[0].WidgetDesignName}"]`).addClass('hidden');
                                            }
                                        }
                                        if ($('#ddlWidgetLayout option:selected').text() == 'Report') {
                                            var designhtml = '<li class="col-md-6 p-1 KPIDesigns d-flex flex-column align-items-center" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deisgnsclick(this);"  data-designValue=' + widgetdesigns.WidgetDesignId + ' data-designs="' + widgetdesigns.WidgetDesignName + '"><img src="' + JSON.parse(default_Settings[0].defaultsettings).image + '" class="img-fluid h-200"><span>' + JSON.parse(default_Settings[0].defaultsettings).Name + '</span></li>';
                                            $('#design-Library').append(designhtml);
                                        }
                                        if ($('#ddlWidgetLayout option:selected').text() == 'Detail') {
                                            var viewertype = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === widgetdesigns.WidgetDesignName; });
                                            var classname = JSON.parse(viewertype[0].defaultsettings).classname;
                                            idParameter.push({ "WidgetName": JSON.parse(viewertype[0].defaultsettings).Name, "PortletWidgetId": 22501 });
                                            var viewerComponent = new Unibase.Themes.Compact.DetailWidgets[classname]();
                                            var detaildesignhtml = viewerComponent.html(idParameter, 0);
                                            var designhtml = '<li class="col-md-6 p-1 KPIDesigns" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deisgnsclick(this);" data-designs=' + viewertype[0].WidgetDesignName + ' data-designValue="' + viewertype[0].WidgetDesignId + '">' + detaildesignhtml + '</li>';
                                            $('#design-Library').append(designhtml);
                                            if (viewertype[0].WidgetDesignName == 'Details_SplitColumn' || viewertype[0].WidgetDesignName == 'Details_SingleData') {
                                                $(`${"li.KPIDesigns"}[data-designs="${viewertype[0].WidgetDesignName}"]`).addClass('hidden');
                                            }
                                        }
                                    }
                                    jQuery("#ddlWidgetDesign").html(html);
                                    if (designid != 0)
                                        jQuery("#ddlWidgetDesign").val(designid);
                                    if (designid == 0) {
                                        if ($("#ddlWidgetLayout option:selected").text() == "Report")
                                            $("#ddlWidth").val(12);
                                        else
                                            $("#ddlWidth").val(4);
                                    }
                                }
                            });
                        }
                        var lowercase = $("#ddlWidgetLayout option:selected").text().toLowerCase();
                        $("#userDefinedDiv, #DetailDiv, #KPIDiv, #ListDiv").addClass("hidden");
                        let InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        if (RegExp("detail").test(lowercase)) {
                            $('.columntab span').text('Columns');
                            $('.settings span').text('Settings');
                            $('.collapaseDiv').addClass("hidden");
                            $("#DetailDiv").removeClass("hidden");
                            $("#AppConfigurationDiv").removeClass("hidden");
                            $('.userDesignedURL').addClass('hidden');
                            $("#txt_WidgetUrlFile").removeClass("required");
                            $('.userDesignedURL').addClass('hidden');
                            $(".parametersDiv").removeClass("hidden");
                            $(".ReportDiv").removeClass("hidden");
                            $("#ddlReport").addClass("required");
                            $(".div_DesignName").addClass("hidden");
                            $("#ddlWidgetDesign").addClass("required");
                            $("#div_Value1").addClass('hidden');
                            $("#div_Value2").addClass('hidden');
                            $("#div_Value3").addClass('hidden');
                            $("#div_WidgetURL").removeClass("hidden");
                            $('.settings, .details, .columntab, .eventdisabled').removeClass('clickEventDisabled');
                            $('.columnCursor').removeClass('cursordisbaled');
                            $('#drawer_push').removeClass('cursordisbaled');
                            $('.nav-link.details').closest('ul').removeClass('cursordisbaled');
                            $('.DetailsColumns').removeClass('hidden');
                            $('#kpiheight').addClass('hidden');
                            $('#border-radius').closest('li').addClass('hidden');
                            $('.chooseImage').removeClass('d-flex').addClass('hidden');
                            $('#li_WidgetDetailIcon').removeClass('hidden');
                            $('#li_WidgetDetailHeader').removeClass('hidden');
                            $(".details-Widget").removeClass('hidden');
                            $('#list-style-type').parent().addClass('d-flex').removeClass('hidden');
                            $('#border-radius').parent().removeClass('d-flex').addClass('hidden');
                            $('#ddlheight').removeClass('required');
                        }
                        else if (RegExp("kpi").test(lowercase)) {
                            $('.columntab span').text('Columns');
                            $('.settings span').text('Settings');
                            $("#KPIDiv").removeClass("hidden");
                            $('.collapaseDiv').addClass("hidden");
                            $("#AppConfigurationDiv").removeClass("hidden");
                            $('.userDesignedURL').addClass('hidden');
                            $("#txt_WidgetUrlFile").removeClass("required");
                            $('.userDesignedURL').addClass('hidden');
                            $(".parametersDiv").removeClass("hidden");
                            $(".ReportDiv").removeClass("hidden");
                            $("#ddlReport").addClass("required");
                            $(".div_DesignName").addClass("hidden");
                            $("#ddlWidgetDesign").addClass("required");
                            $("#div_Value1").removeClass('hidden');
                            $("#div_WidgetURL").removeClass("hidden");
                            $('.settings, .details, .columntab, .eventdisabled').removeClass('clickEventDisabled');
                            $('.columnCursor').removeClass('cursordisbaled');
                            $('#drawer_push').removeClass('cursordisbaled');
                            $('.nav-link.details').closest('ul').removeClass('cursordisbaled');
                            $('.DetailsColumns').addClass('hidden');
                            $('#border-radius').closest('li').removeClass('hidden');
                            $('.chooseImage').addClass('d-flex').removeClass('hidden');
                            $('#div_LinkReportId').parent().removeClass('hidden');
                            $('#li_WidgetDetaillinkURL').removeClass('hidden');
                            $('#li_WidgetDetailIcon').addClass('hidden');
                            $('#li_WidgetDetailHeader').addClass('hidden');
                            $(".details-Widget").addClass('hidden');
                            $('#list-style-type').parent().removeClass('d-flex').addClass('hidden');
                            $('#border-radius').parent().addClass('d-flex').removeClass('hidden');
                            $('#ddlheight').addClass('required');
                            $('#kpiheight').children().removeClass('hidden');
                        }
                        else if (RegExp("report").test(lowercase)) {
                            $("#AppConfigurationDiv").removeClass("hidden");
                            $("#txt_WidgetUrlFile").removeClass("required");
                            $('.userDesignedURL').addClass('hidden');
                            $(".parametersDiv").removeClass("hidden");
                            $(".ReportDiv").removeClass("hidden");
                            $('.collapaseDiv').removeClass("hidden");
                            $("#ddlReport").addClass("required");
                            $(".div_DesignName").addClass("hidden");
                            $("#ddlWidgetDesign").addClass("required");
                            $("#div_Value1").addClass('hidden');
                            $("#div_Value2").addClass('hidden');
                            $("#div_Value3").addClass('hidden');
                            $("#div_WidgetURL").removeClass("hidden");
                            $('.settings, .details, .columntab, .eventdisabled').removeClass('clickEventDisabled');
                            $('.columnCursor').removeClass('cursordisbaled');
                            $('#drawer_push').removeClass('cursordisbaled');
                            $('.nav-link.details').closest('ul').removeClass('cursordisbaled');
                            $('.DetailsColumns').addClass('hidden');
                            $('#kpiheight').addClass('hidden');
                            $('#border-radius').closest('li').addClass('hidden');
                            $('.chooseImage').removeClass('d-flex').addClass('hidden');
                            $('#div_LinkReportId').parent().addClass('hidden');
                            $('#li_WidgetDetaillinkURL').addClass('hidden');
                            $('#li_WidgetDetailHeader').addClass('hidden');
                            $('#li_WidgetDetailIcon').addClass('hidden');
                            $(".details-Widget").addClass('hidden');
                            $('#list-style-type').parent().removeClass('d-flex').addClass('hidden');
                            $('#border-radius').parent().addClass('d-flex').removeClass('hidden');
                            $('.columntab span').text('Settings');
                            $('.settings span').text('Configuration');
                            if (InstalledAppId == 0) {
                                $('#ddlheight').addClass('required');
                                $('#kpiheight').children().removeClass('hidden');
                                $('#kpiheight').removeClass('hidden');
                            }
                            if (InstalledAppId != 0) {
                                $('#ddlheight').removeClass('required');
                            }
                        }
                        else {
                            $('.columntab span').text('Columns');
                            $('.settings span').text('Settings');
                            $("#AppConfigurationDiv").addClass("hidden");
                            $("#txt_WidgetUrlFile").removeClass("required hidden");
                            $('.userDesignedURL').removeClass('hidden');
                            $('#ddlheight').removeClass('required');
                            $(".parametersDiv").removeClass("hidden");
                            $(".ReportDiv").removeClass("hidden");
                            $('.collapaseDiv').addClass("hidden");
                            $("#ddlReport").addClass("required");
                            $(".div_DesignName").addClass("hidden");
                            $("#ddlWidgetDesign").addClass("required");
                            $("#div_Value1").addClass('hidden');
                            $("#div_Value2").addClass('hidden');
                            $("#div_Value3").addClass('hidden');
                            $("#div_WidgetURL").removeClass("hidden");
                            $('.settings, .details, .columntab, .eventdisabled').removeClass('clickEventDisabled');
                            $('.columnCursor').removeClass('cursordisbaled');
                            $('#drawer_push').removeClass('cursordisbaled');
                            $('.nav-link.details').closest('ul').removeClass('cursordisbaled');
                            $('.DetailsColumns').addClass('hidden');
                            $('#kpiheight').removeClass('hidden');
                            $('#border-radius').closest('li').addClass('hidden');
                            $('.chooseImage').removeClass('d-flex').addClass('hidden');
                            $('#div_LinkReportId').parent().addClass('hidden');
                            $('#li_WidgetDetaillinkURL').addClass('hidden');
                            $('#li_WidgetDetailHeader').addClass('hidden');
                            $('#li_WidgetDetailIcon').addClass('hidden');
                            $(".details-Widget").addClass('hidden');
                            $('#list-style-type').parent().removeClass('d-flex').addClass('hidden');
                            $('#border-radius').parent().addClass('d-flex').removeClass('hidden');
                        }
                    }
                    bindReports() {
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/analytics/reports';
                        AutoCompleteHelper.getHelper().Create("#ddlReport", "hfReportAutoComplete", url, function (response) {
                            var data = response;
                        });
                        AutoCompleteHelper.getHelper().Create("#ddlLinkReportId", "hfddlLinkReportId", url, function (response) {
                            var data = response;
                        });
                    }
                    bindHighlighter() {
                        this.fileCacheHelper.loadJsFile("platform/widgets/components/widget.template.js", function () {
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getColors().then(function (response) {
                                if (response.result != null) {
                                    var res = response.result;
                                    let html = "";
                                    for (let i = 0; i < res.length; i++) {
                                        var colors = res[i];
                                        var template = Unibase.Widgets.Widget_Template.Instance().loadWidgetHighlighterDropdownTemplate();
                                        var templateScript = Handlebars.compile(template);
                                        var context = { "ColorId": colors.ColorId, "ColorName": colors.ColorName, "ColorCode": colors.ColorCode };
                                        html += templateScript(context);
                                    }
                                    jQuery("#ddlColorCode").html(html);
                                }
                            });
                        });
                    }
                    getReportColumns(iscondition) {
                        var instance = this;
                        var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                        if (EditMode[0].mode == 'Create_Mode') {
                            $("#ddlColumns").empty();
                            $("#ddlSelectedValue_1").empty();
                            $("#ddlSelectedValue_2").empty();
                            $("#ddlSelectedValue_3").empty();
                            let ReportId = Number($("#ddlReport option:selected").val());
                            var fromDate = "";
                            var toDate = "";
                            var cf_fromDate = Unibase.Platform.Helpers.NavigationHelper.commonFilter_FromDate;
                            var cf_toDate = Unibase.Platform.Helpers.NavigationHelper.commonFilter_ToDate;
                            if (cf_fromDate != null && cf_toDate != null) {
                                fromDate = cf_fromDate.toString();
                                toDate = cf_toDate.toString();
                            }
                            else {
                                fromDate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalDateformat(new Date(Unibase.Platform.Helpers.DateTimeHelper.Instance().currentDate()), "YYYY/MM/DD");
                                toDate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalDateformat(new Date(Unibase.Platform.Helpers.DateTimeHelper.Instance().currentDate()), "YYYY/MM/DD");
                            }
                            var postdata = {
                                ReportId: ReportId,
                                IsEditReport: true,
                                FromDate: fromDate,
                                ToDate: toDate
                            };
                            this.fileCacheHelper.loadJsFile("platform/widgets/components/widget.template.js", function () {
                                Unibase.Platform.Analytics.Managers.ReportManager.Instance().getReportInfo(postdata).then(function (response) {
                                    if (response.result.ReportInfo.ReportColumns != null) {
                                        let html = "<option value=''>Select Column</option>";
                                        for (let i = 0; i < response.result.ReportInfo.ReportColumns.length; i++) {
                                            var reportcolumn = response.result.ReportInfo.ReportColumns[i];
                                            var template = Unibase.Widgets.Widget_Template.Instance().loadReportColumnDropdownTemplate();
                                            var templateScript = Handlebars.compile(template);
                                            var context = { "ReportColumnId": reportcolumn.ReportColumnId, "ReportColumnName": reportcolumn.ReportColumnName };
                                            html += templateScript(context);
                                        }
                                        jQuery("#ddlColumns").html(html);
                                        jQuery("#ddlSelectedValue_1").html(html);
                                        jQuery("#ddlSelectedValue_2").html(html);
                                        jQuery("#ddlSelectedValue_3").html(html);
                                    }
                                    instance.DataListTypeId = response.result.DataListTypeId;
                                    instance.DataListId = response.result.DataListId;
                                    if (instance.DataListTypeId == 4) {
                                        instance.getDataListColumns();
                                    }
                                });
                            });
                        }
                    }
                    getDataListColumns() {
                        var instance = this;
                        var datalistparams = "";
                        $("#ulparamers").find(".parameterrowheading").each(function () {
                            var colName = $(this).find("#row1").text();
                            var colValueName = $(this).find("#row3").text();
                            var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                            var colValue = Unibase.Themes.Providers.Detail_Settings.Instance().InputParameters.find(x => x.Key == "hf_" + InstalledAppId + "_" + colValueName);
                            if (colValue != undefined) {
                                colValue = colValue.Value;
                            }
                            else {
                                colValue = 0;
                            }
                            if (colValueName == 'filter_fromdate' || colValueName == 'filter_todate') {
                                var fromDate = $("#hfBizgaze_FromDate").val();
                                var toDate = $("#hfBizgaze_ToDate").val();
                                var today = new Date();
                                var month = today.getMonth() + 1;
                                var day = today.getDate();
                                today = today.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
                                if (fromDate == undefined || toDate == undefined) {
                                    colValue = "'" + today + "'";
                                }
                            }
                            if (colValueName == 'identity_partitionFromDate') {
                                colValue = "'" + Unibase.Platform.Membership.Infos.Identity.getCurrentUser().partitionFromDate.toString() + "'";
                            }
                            if (colValueName == 'identity_partitionToDate') {
                                colValue = "'" + Unibase.Platform.Membership.Infos.Identity.getCurrentUser().partitionToDate.toString() + "'";
                            }
                            datalistparams = datalistparams + '@' + colName + '=' + colValue + ',';
                        });
                        datalistparams = datalistparams.substring(0, datalistparams.length - 1);
                        Unibase.Platform.Analytics.Managers.ReportManager.Instance().getDataListColumns(instance.DataListId, null, datalistparams).then(function (datalistResponse) {
                            if (datalistResponse.length == 0) {
                                alert("Please enter datalist parameters");
                                $(".section_DetailWidget").addClass("hidden");
                            }
                            else {
                                $(".section_DetailWidget").removeClass("hidden");
                                let html = "<option value=''>Select Column</option>";
                                for (let i = 0; i < datalistResponse.length; i++) {
                                    var datalistcolumn = datalistResponse[i];
                                    var template = Unibase.Widgets.Widget_Template.Instance().loadReportColumnDropdownTemplate();
                                    var templateScript = Handlebars.compile(template);
                                    var context = { "ReportColumnId": datalistcolumn.ColumnId, "ReportColumnName": datalistcolumn.ColumnName };
                                    html += templateScript(context);
                                }
                                jQuery("#ddlColumns").html(html);
                                jQuery("#ddlSelectedValue_1").html(html);
                                jQuery("#ddlSelectedValue_2").html(html);
                                jQuery("#ddlSelectedValue_3").html(html);
                            }
                        });
                    }
                    getParameterValues(Installedappid) {
                        $("#ddlParameterValue").empty();
                        Widget.Instance().loadIdentity();
                        let installedappid = $("#ddlAppProviders").val().toString().split(',').map(Number);
                        let installedappids = Array();
                        for (let x = 0; x < installedappid.length; x++) {
                            let s = {
                                InstalledAppId: installedappid[x]
                            };
                            installedappids.push(s);
                        }
                        this.fileCacheHelper.loadJsFile("platform/widgets/components/widget.template.js", function () {
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getReportColumnsByInstalledappIds(installedappids).then(function (response) {
                                if (response.result != null) {
                                    let html = "";
                                    for (let i = 0; i < response.result.length; i++) {
                                        var reportcolumn = response.result[i];
                                        html += "<option value=" + reportcolumn.ReportColumnId + " data-table=" + reportcolumn.DataType + ">" + reportcolumn.ReportColumnName + "</option>";
                                    }
                                    jQuery("#ddlParameterValue").append(html);
                                }
                            });
                        });
                        if (Installedappid != 0) {
                            let RecordId = Unibase.Themes.Providers.DetailHelper.recordId;
                            let html = "<option value=" + RecordId + " data-table=" + typeof (RecordId) + ">recordid</option>";
                            jQuery("#ddlParameterValue").append(html);
                        }
                    }
                    loadIdentity() {
                        $("#ddlParameterValue").empty();
                        var identityinfo = Unibase.Platform.Membership.Infos.Identity.currentUser;
                        var keys = Object.keys(identityinfo);
                        var html = "<option value=''>Select Value</option>";
                        for (let i = 0; i < keys.length; i++) {
                            html += "<option value=" + identityinfo[keys[i]] + " data-table=" + typeof identityinfo[keys[i]] + ">identity_" + keys[i] + "</option>";
                        }
                        html += "<option value=" + new Date() + " data-table=datetime>filter_fromdate</option>";
                        html += "<option value=" + new Date() + " data-table=datetime>filter_todate</option>";
                        jQuery("#ddlParameterValue").append(html);
                    }
                    bindReportColumnOnSortable() {
                        var instance = this;
                        var ReportName = $('#ddlReport option:selected').text();
                        var ColumnName = $('#ddlColumns option:selected').text();
                        var Label = $('#txt_Label').val();
                        var LinkURL = $('#txt_LinkURL').val();
                        let columnConv = "";
                        var convertervalue = "";
                        var WidgetName = $('#txt_WidgetName').val();
                        $("#hf-widget-title").text(WidgetName);
                        let columnID = $('#li_columnId').val();
                        if ($('#ddlColumnConv').val() != 0) {
                            columnConv = $('#ddlColumnConv option:selected').html();
                            convertervalue = $('#ddlColumnConvType').val().toString();
                        }
                        else {
                            columnConv = $('#ddlColumnConv option:selected').html();
                        }
                        if (ReportName == "") {
                            return false;
                        }
                        let propertyid = 0;
                        if ($("#detailpropertyid").val() == "0")
                            propertyid = 0;
                        else
                            propertyid = Number($("#detailpropertyid").val());
                        let propertyindex = $("#propertyindex").val().toString();
                        $("#ulcolumns").find(".column-item").each(function () {
                            if ($(this).find("#row5").text() == propertyindex) {
                            }
                        });
                        Widget.Instance().refreshReportColumn();
                        Widget.Instance().rowNum = $('.sortable li').length;
                        Widget.Instance().rowNum++;
                        this.saveReportColumn++;
                        $('.formColumnWidgetBuilder').trigger("reset");
                        $('.div_WidgetColumnConvType').addClass('hidden');
                        $('#li_columnId').val('0');
                        instance.CreateWidgetPreview();
                    }
                    bindReportColumn() {
                        var instance = this;
                        var ReportName = $('#ddlReport option:selected').text();
                        var ColumnName = $('#ddlColumns option:selected').text();
                        if (ColumnName == 'Select Column') {
                            MessageHelper.Instance().showError("Please select the Value", "bizgaze_ValidationSummary");
                            event.stopPropagation();
                        }
                        var Label = $('#txt_Label').val();
                        var LinkURL = $('#txt_LinkURL').val();
                        let columnConv = "";
                        var convertervalue = "";
                        var WidgetName = $('#txt_WidgetName').val();
                        $("#hf-widget-title").text(WidgetName);
                        let columnID = $('#li_columnId').val();
                        if ($('#ddlColumnConv').val() != 0) {
                            columnConv = $('#ddlColumnConv option:selected').html();
                            convertervalue = $('#ddlColumnConvType').val().toString();
                        }
                        else {
                            columnConv = $('#ddlColumnConv option:selected').html();
                        }
                        if (ReportName == "") {
                            return false;
                        }
                        let propertyid = 0;
                        if ($("#detailpropertyid").val() == "0")
                            propertyid = 0;
                        else
                            propertyid = Number($("#detailpropertyid").val());
                        let propertyindex = $("#propertyindex").val().toString();
                        $("#ulcolumns").find(".column-item").each(function () {
                            if ($(this).find("#row5").text() == propertyindex) {
                            }
                        });
                        Widget.Instance().refreshReportColumn();
                        Widget.Instance().rowNum = $('.sortable li').length;
                        Widget.Instance().rowNum++;
                        if (ColumnName != "") {
                            if ($('#li_columnId').val() == 0) {
                                $('.sortable').append('<li class="list-group-item border-0 column-item ui-sortable-handle bg-light my-2 p-2 d-flex justify-content-between" id="columnId_' + Widget.Instance().rowNum + '"> <span class="font-15">' + Label + '</span> <span class="pull-left media-xs mr-30 hidden"> <i class="fa fa-sort text-muted fa mr-10"></i> <span id="row5" class="text-dark rowNum">' + Widget.Instance().rowNum + '</span> </span><div class="d-flex flex-row"> <span id="edit_row " class="px-2 my-auto fa fa-pencil text-dark" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().EditReportColumnRow(this)"></span> <span id="delete_row" class="px-2 my-auto fa fa-times fa-lg text-danger border-left border-2 text dark" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteReportColumnRow(this)"></span></div><div class="clear hidden"><div class="stageheading"> <input type="hidden" id="row0" value=' + propertyid + '> <input type="hidden" id="row6" value=' + convertervalue + '> <input type="hidden" id="ConverterType" value="' + $('#ddlColumnConv').val() + '" /><label class="col-sm-2" id="row1">' + ColumnName + '</label> <label class="col-sm-2 mr-10" id="row2">' + columnConv + '</label> <label class="col-sm-3" id="row3">' + Label + '</label> <label class="col-sm-2" id="row4">' + LinkURL + '</label><div></div></li>');
                            }
                            else {
                                let indexValue = $('#' + columnID).find('#row5').text();
                                $('#ulcolumns').find('#' + columnID).html(' <span class="font-15">' + Label + '</span> <span class="pull-left media-xs mr-30 hidden"> <i class="fa fa-sort text-muted fa mr-10"></i> <span id="row5" class="text-dark rowNum">' + indexValue + '</span> </span> <div class="d-flex flex-row "> <span id="edit_row " class="px-2 my-auto fa fa-pencil text-dark"  onclick="Unibase.Platform.Widgets.Components.Widget.Instance().EditReportColumnRow(this)"></span> <span id="delete_row" class="px-2 my-auto fa fa-times fa-lg text-danger border-left border-2 text dark" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteReportColumnRow(this)"></span></div><div class="clear hidden"> <div class="stageheading"> <input type="hidden" id="row0" value=' + propertyid + '> <input type="hidden" id="row6" value=' + convertervalue + '> <input type="hidden" id="ConverterType" value="' + $('#ddlColumnConv').val() + '"/><label class="col-sm-2" id="row1">' + ColumnName + '</label> <label class="col-sm-2 mr-10" id="row2">' + columnConv + '</label> <label class="col-sm-3" id="row3">' + Label + '</label> <label class="col-sm-2" id="row4">' + LinkURL + '</label> <div></div>');
                            }
                            $("#propertyindex").val(0);
                            $("#detailpropertyid").val(0);
                            $('#txt_Label').val('');
                        }
                        else {
                        }
                        this.saveReportColumn++;
                        $('.formColumnWidgetBuilder').trigger("reset");
                        $('.div_WidgetColumnConvType').addClass('hidden');
                        $('#li_columnId').val('0');
                        instance.CreateWidgetPreview();
                    }
                    bindReportClose() {
                        $('.formColumnWidgetBuilder').trigger("reset");
                        $('#li_columnId').val('0');
                    }
                    bindParameterRow() {
                        var instance = this;
                        Widget.Instance().rowNum = $('.parametersortable .bindParamterRow').length;
                        Widget.Instance().rowNum++;
                        let ParameterName = $('#txt_Parameters').val();
                        let Value;
                        let Operator = "";
                        let Datatype = "string";
                        if ($('#Operator').val() != 0)
                            Operator = $('#ddlOperator option:selected').text();
                        if ($("#ddlparametertype").val() == 1) {
                            if ($('#ddlParameterValue').val() != "")
                                Value = $('#ddlParameterValue option:selected').text();
                            Datatype = $('#ddlParameterValue option:selected').attr("data-table");
                        }
                        else {
                            Value = $('#txtParameterValue').val();
                            if ($.isNumeric(Value) == true)
                                Datatype = "number";
                            else
                                Datatype = typeof (Value);
                        }
                        if (Value != "" && Operator != "" && ParameterName != "") {
                            let parameterBody = '<li class="bindParamterRow row-item-li" id="rowId_' + Widget.Instance().rowNum + '" data-rowid="rowId_' + Widget.Instance().rowNum + '"> <div class="row font-14 box-shadow row-item ui-sortable-handle" id="rowId_' + Widget.Instance().rowNum + '"> <div class="col-md-1 hidden col-1 border p-2 text-center"> <span id="row5" class="text-dark rowNum">' + Widget.Instance().rowNum + '</span> </div><div class="col-md-12 col-12"> <div class="parameterrowheading font-14 row text-center"> <input type="hidden" id="row0" value="0"> <div class="col-sm-5 col-5 p-2 border"> <label id="row1">' + ParameterName + '</label></div><div class="col-sm-2 col-2 p-2 border"> <label id="row2">' + Operator + '</label></div><div class="col-sm-5 col-5 p-2 border d-flex flex-row"> <span id="row3">' + Value + '</span> <span id="delete_row " class="btn fa fa-times fa-lg text-danger ml-auto" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteParameterRow(this)"></span> </div><input type="hidden" id="row4" value=' + Datatype + '> <input type="hidden" id="row6" value=' + $("#ddlparametertype").val() + '> </div></div></div></li>';
                            let parameterSettings = '<li class="d-flex flex-column bg-light my-3 p-2 rounded-2 rowId_' + Widget.Instance().rowNum + '" data-rowId="rowId_' + Widget.Instance().rowNum + '"> <div class="d-flex flex-row text-dark"> <span class="border-bottom border-dashed border-dark p-1">' + ParameterName + '</span> <a href="javascript:void(0);" class=" my-auto ml-auto px-2" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteParameterRow(this);" > <i class="fa p-1 fa-trash text-danger"></i> </a> </div></li>';
                            $('#bindParameterList').append(parameterSettings);
                            $('#ulparamers').append(parameterBody);
                            if (instance.DataListTypeId == 4) {
                                instance.getDataListColumns();
                            }
                        }
                        else {
                        }
                        $('.parametersForm').trigger("reset");
                    }
                    deleteParameterRow(x) {
                        var result = confirm("Do you want to delete the row");
                        $('.parametersForm').trigger("reset");
                        if (result == true) {
                            let settingDeleteParam = $(x.closest('li')).attr('data-rowid');
                            $('#bindParameterList').find('.' + settingDeleteParam).remove();
                            $('#ulparamers').find('#' + settingDeleteParam).remove();
                            Widget.Instance().refreshParameterRow();
                            Widget.Instance().refreshParameterRowli();
                            return true;
                        }
                    }
                    deleteParameterRow_(x) {
                        var result = confirm("Do you want to delete the row");
                        $('.parametersForm').trigger("reset");
                        if (result == true) {
                            $('#rowId_' + x).remove();
                            Widget.Instance().refreshParameterRow();
                            return true;
                        }
                    }
                    refreshParameterRow() {
                        var len = $('.row-item').length;
                        var count = 1;
                        $("#ulparamers").find(".row-item-li").each(function () {
                            if (count <= len) {
                                $(this).attr('id', 'rowId_' + count);
                                $(this).attr('data-rowid', 'rowId_' + count);
                                $(this).find('.rowNum').text(count);
                                count += 1;
                            }
                        });
                    }
                    refreshParameterRowli() {
                        var len = $('#bindParameterList').children.length;
                        var count = 1;
                        $("#bindParameterList").find("li").each(function () {
                            if (count <= len) {
                                $(this).attr('data-rowid', 'rowId_' + count);
                                $(this).attr('class', 'd-flex flex-column bg-light my-3 p-2 rounded-2 rowId_' + count);
                                count += 1;
                            }
                        });
                    }
                    DeleteAppParameters(index) {
                        $('#bindParameterList').find('#IdParameterli_' + index).remove();
                        this.deleteParameterRow_(index);
                    }
                    deleteReportColumnRow(x) {
                        var result = confirm("Do you want to delete the row");
                        if (result == true) {
                            x.closest('li').remove();
                            let y = $(x.closest('li')).attr('id');
                            $('.' + y).remove();
                            Widget.Instance().refreshReportColumn();
                            Widget.Instance().refreshPreviewReportColumn();
                            $('#DetailDoubleColumn').find("." + y).remove();
                            return true;
                        }
                    }
                    EditReportColumnRow(x) {
                        $('#addColumn-detailWidget').click();
                        let ele = x.closest('li');
                        $("#ddlColumnConv").val($(ele).find("#ConverterType").val()).trigger("change");
                        $("#ddlColumnConvType").val($(ele).find("#row6").val());
                        $("#ddlColumns").val($(`#ddlColumns [data-table="${$(ele).find("#row1").text()}"]`).val());
                        $("#txt_Label").val($(ele).find("#row3").text());
                        $("#txt_LinkURL").val($(ele).find("#row4").text());
                        $("#detailpropertyid").val($(ele).find("#row0").val());
                        $("#propertyindex").val($(ele).find("#row5").text());
                        $("#li_columnId").val($(x.closest('li')).attr('id'));
                    }
                    refreshReportColumn() {
                        var len = $('.column-item').length;
                        var count = 1;
                        $("#ulcolumns").find(".column-item").each(function () {
                            if (count <= len) {
                                $(this).attr('id', 'columnId_' + count);
                                $(this).find('.rowNum').text(count);
                                count += 1;
                            }
                        });
                    }
                    refreshPreviewReportColumn() {
                        var len = $('.detailProperty').length;
                        var count = 1;
                        $("#DetailColumns ").find(".detailProperty ").each(function () {
                            if (count <= len) {
                                $(this).attr('class', 'd-flex justify-content-between m-2 p-2 detailProperty columnId_' + count);
                                count += 1;
                            }
                        });
                    }
                    javaScript(formid, roleid, id, jstext) {
                        var instance = this;
                        instance.formproperties = [];
                        Unibase.Platform.Forms.Managers.FormManager.Instance().getFormProperties(formid).then(function (response) {
                            for (let i = 0; i < response.result.length; i++) {
                                instance.formproperties.push(response.result[i].FormPropertyName + "-PropertyName");
                            }
                        });
                        Unibase.Platform.Forms.Managers.FormManager.Instance().getSections(formid).then(function (response) {
                            for (let j = 0; j < response.result.length; j++) {
                                instance.formproperties.push(response.result[j].SectionName + "-SectionName");
                            }
                        });
                        var detailsdata = Unibase.Themes.Providers.Detail_Settings.Instance().InputParameters;
                        if (detailsdata.length > 0) {
                            for (let k = 0; k < detailsdata.length; k++) {
                                let split = detailsdata[k].Key.split('_');
                                instance.formproperties.push(split[2] + "-HiddenFieldName");
                            }
                        }
                        $("#appconfiguration_javascript_" + formid + "_" + roleid + "_" + id).summernote({
                            height: 200,
                            placeholder: "text",
                            disableDragAndDrop: true,
                            codemirror: {
                                mode: 'text/html',
                                lineNumbers: true,
                            },
                            toolbar: [
                                ['view', ['help']],
                            ],
                            hint: {
                                match: /\B[@!](\w*)$/,
                                search: function (keyword, callback) {
                                    callback($.grep(instance.formproperties, function (i) {
                                        var user = i;
                                        return user.indexOf(keyword) === 0;
                                    }));
                                },
                                content: function (i) {
                                    var user = i;
                                    return $('<span>@' + user + '</span>')[0];
                                }
                            }
                        });
                    }
                    loadrolesdata(formid, formname, roleid, rolename, FormRoleId, id, formroleid) {
                        var EditMode = this.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                        if (EditMode[0].mode == 'Create_Mode') {
                            var lihtml = `<div class="formroles ` + roleid + `_duplicate" id="li_` + formid + `_` + roleid + `_` + id + `"><input type="hidden" value="` + formid + `" id="hidden_li_` + formid + `_` + roleid + `_` + id + `_formid" value="` + formid + `" class='formid'>
<input type="hidden" value="` + formroleid + `" id="hidden_li_` + formid + `_` + roleid + `_` + id + `_formroleid" value="` + formroleid + `" class='formroleid'><input type="hidden"  id="hidden_li_` + formid + `_` + roleid + `_` + id + `_roleid" value="` + roleid + `" class='formid'><div class="card"><div class="card-body"><div class="row">                            
                            <div class="col-sm-6"><h6>FormRoles</h6></div>
                            <div class="col-sm-6 div_delete"><a class="ml-auto pull-right"  id ="li_` + formid + `_` + roleid + `_` + id + `__delete__` + formroleid + `" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteConfig(event,` + id + `)"; title="Remove row"><i class="text-white bg-danger p-1 fa fa-trash remove-icon_1"></i></a></div>
                            </div><br>
                           <div class="row">
                           <div class="col-sm-4"><span id="spform_` + formid + `_` + id + `" class="sp_form" data-text=` + formid + `>` + formname + `</span></div>
                            <div class="col-sm-4"><span id="sprole_` + roleid + `_` + id + `" class="sp_role" data-text=` + roleid + `>` + rolename + `</span></div>
                            <input type="hidden" class="form-control floating-label-control txtformrole" data-isdynamic="false" value="` + FormRoleId + `">
                            </div><br>
                            <div class="row"><div class="col-sm-12"><div class="value-control" style="display: block;" id="appconfiguration_javascript_` + formid + `_` + roleid + `_` + id + `"></div></div></div>
                            </div>
                            </div></div>`;
                            return lihtml;
                        }
                    }
                    EditAppConfiguration(InstalledAppId, editID) {
                        let edithtml = '<a href = "javascript:;" class="btn btn-theme ml-auto py-0 btn-adj-drawer-close" onclick = "Unibase.Platform.Widgets.Components.Widget.Instance().appendconfigSaveNames_(' + InstalledAppId + ')"> Save </a>';
                        $('.AppConfig-row.column-appconfigitem').addClass(["hidden"]);
                        $('.btnAddNewConfiguration').click();
                        $('.AppConfig-row.active.column-appconfigitem').last().remove();
                        $('.appendconfigSaveNamesClass').html(edithtml);
                        $('.AppConfig-row.column-appconfigitem.AppConfig_' + editID).addClass('active').removeClass('hidden');
                    }
                    DeleteAppConfiguration(InstalledAppId, deleteID) {
                        Widget.Instance().DeleteConfigurationIds = Widget.Instance().DeleteConfigurationIds + "," + $('.AppConfig-row.AppConfig_' + deleteID).find('#hf_AppConfigurationId_' + deleteID).val();
                        $('#AppConfigNames').find('#li_' + deleteID).remove();
                        $('#appConfigColumns').find('.AppConfig-row.column-appconfigitem.AppConfig_' + deleteID).remove();
                        Widget.Instance().refreshConfugarationsList();
                        Widget.Instance().refreshAppConfiglist();
                        $('.AppConfig-row.AppConfig_' + deleteID + '.column-appconfigitem').find(".RoleSetting").on('input', function () {
                            Widget.Instance().loadAppPermissions(deleteID, InstalledAppId);
                        });
                    }
                    addAppConfiguration(InstalledAppId) {
                        var EditMode = this.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                        if (EditMode[0].mode == 'Create_Mode') {
                            var len = $('.AppConfig-row').length;
                            Widget.Instance().len = $('.AppConfig-row').length;
                            Widget.Instance().rowNum = $('.appConfigSortable .column-appconfigitem').length;
                            Widget.Instance().rowNum++;
                            var html = '';
                            html = ' <div class="AppConfig-row active AppConfig_' + len + ' column-appconfigitem" id="divAppConfig_' + len + '" data-length="' + len + '"> <div class="card border-0" style="box-shadow:none"> <div class="card-body pt-0">' + ' <input type="hidden" class="hf_AppConfigurationId" id="hf_AppConfigurationId_' + len + '" value="0"/>' + ' <input type="hidden" class="hf_AppConfigurationUniqueId" id="hf_AppConfigurationUniqueId_' + len + '" value=""/>' + ' <div class="b-b deleteAppConfigRow media">' + ' <span class="h5 text-dark pull-left media-xs hidden"> <i class="fa fa-sort text-muted fa mr-10"></i> <span id="row5" class="text-dark rowNum">' + Widget.Instance().rowNum + '</span> </span>' + ' <div class="col-sm-6 pr-4 pl-0"> <div class="d-flex flex-column floating-label-form-group-with-value" id="div_WidgetAppConfigSettingName"> <label class="font-weight-600">Configuration name<span class="text-danger"> *</span></label> <input type="text" id="txt_SettingName_' + len + '" class="form-control required SettingName border-light-20" data-isdynamic="false" placeholder="Setting Name" data-placeholder="Enter Setting Name" style="box-shadow:none" data-label="Setting Name" autocomplete="off"/> </div></div><a class="ml-auto btn-xs btn hidden btn-danger delete remove-icon_' + len + '" href="javascript:;" title="Remove row"> <i class="fa fa-times remove-icon_' + len + '"></i> </a> <span class="btn pull- right hidden col-sm-1 pb-0 pt- 0"> <i class="pull-right chevron_' + len + ' fa fa-chevron-down"></i> </span>' + ' </div>' + ' <div class="AppConfigRow' + len + '">' + ' <ul class="d-flex flex-column"> <li class="w-100 py-2"> <ul class="d-flex flex-row"> <li class="w-50 pr-4"> <div class="floating-label-form-group-with-value" id="div_WidgetAppConfigFormInstallApp" style="border-bottom:0;"> <label for="ddlFormInstallAppId" id="lblFormInstallAppId" class="font-weight-500">InstalledApp</label> <select id="ddlFormInstallAppId_' + len + '" style="width:100%" class="b-a form-control floating-label-control FormInstallAppId required" placeholder="Form InstalledApp" data-placeholder="Select Form InstalledApp" data-label="Form InstalledApp"></select> </div></li><li class="w-50 roleSettingDiv"> <div class="floating-label-form-group-with-value" id="div_WidgetAppConfigRoleSetting" style="border-bottom:0;"> <label for="txt_RoleSetting" id="lblRoleSetting" class="font-bold">Role Setting <span class="text-danger"> *</span> </label> <input type="hidden" id="hfRoleSettingValue_' + len + '" value=""/> <input type="hidden" id="hfRoleSettingAutoComplete_' + len + '" value=""/> <select style="width:100%" class="b-a form-control floating-label-control required RoleSetting" id="txt_RoleSetting_' + len + '" data-isdynamic="false" placeholder="Role Setting *" data-placeholder="Select Role Setting" data-label="Role Setting *"></select> </div></li></ul> </li><li class="w-100 py-2"> <ul class="d-flex flex-row"> <li class="w-50 pr-4"> <div class="d-flex flex-column floating-label-form-group-with-value" id="div_WidgetAppConfigPermission" style="border-bottom:0;"> <label for="ddlPermission" id="lblPermission" class="font-bold">Permission <span class="text-danger"> *</span> </label> <select id="ddlPermission_' + len + '" class="w-100 form-control floating-label-control required Permission" data-isdynamic="false" placeholder="Permission *" data-placeholder="Select Permission" data-label="Permission *"></select> <input type="hidden" id="hfPermission_' + len + '" value=""/> </div></li><li class="w-50 roleSettingDiv"> <div class="floating-label-form-group-with-value" id="div_WidgetAppConfigType" style="border-bottom:0;"> <label for="ddlAppConfigType" id="lblAppConfigType" class="font-bold">AppConfig Type <span class="text-danger">*</span> </label> <select id="ddlAppConfigType_' + len + '" class="form-control floating-label-control required AppConfigType" placeholder="AppConfig Type *" data-placeholder="Select AppConfig Type" data-label="AppConfig Type *" style="width:100%"></select> <input type="hidden" class="hfAppConfigType" id="hfAppConfigType_' + len + '" value=""/> </div></li></ul> </li><li class="w-100 py-2"> <ul class="d-flex flex-row"> <li class="w-50 pr-4"> <div class="d-flex flex-column floating-label-form-group-with-value" id="div_WidgetAppConfigIcon" style="border-bottom:0;"> <label for="ddlAppConfigIcon" id="lblAppConfigIcon" class="font-bold">Icon</label> <select id="ddlAppConfigIcon_' + len + '" class="w-100 form-control floating-label-control AppConfigIcon" placeholder="Icon" data-placeholder="Select Icon" data-label="Icon"></select> <input type="hidden" id="hfAppConfigIcon_' + len + '" value=""/> </div></li><li class="w-50 roleSettingDiv"> <div class="floating-label-form-group-with-value" id="div_WidgetAppConfigSettingUrlType" style="border-bottom:0;"> <label for="ddlSettingUrlType" id="lbl_SettingUrlType" class="font-bold"> Setting URL Type <span class="text-danger">* </span> </label> <select id="ddlSettingUrlType_' + len + '" class="form-control floating-label-control required AppConfigISettingUrlType" data - isdynamic="false" placeholder="Setting URL Type *" data - placeholder="Select Setting URL Type" data - label="Setting URL Type *" style="width:100%"></select> <input type="hidden" id="hfSettingUrlType_' + len + '" value=""> <label for="Validation" id="lblValidation_SettingUrlType"></label> <input type="hidden" id="hfFormPropertyId" value=""> </div></li></ul> </li><li class="w-100 floating-label-form-group-with-value"> <div class="w-50 div_formsize_' + len + ' hidden"> <label for="lblFormSize" class="font-bold" id="lblWidth">Select Form Size</label> <select id="ddlFormSize_' + len + '" class="form-control ddlFormSize text-control" style="width:100%" placeholder="Form" data-placeholder="Form Size"> <option value=0>Select size</option> <option value=1>Mini</option> <option value=2>Medium</option> <option value=3>Large</option> <option value=4>ExtraLarge</option> <option value=5>Auto</option> <option value=6>DockRight</option> <option value=7 selected>DockLeft</option> </select> <input type="hidden" id="hfAutocomplete_FormSize_' + len + '" class="hfFormSize_' + len + ' form-control value-control" data - isdynamic="true"/> </div></li><li class="w-50 div_dashboard_' + len + ' hidden"> <div class="floating-label-form-group-with-value" id="div_dashboard" style="border-bottom:0;"> <label for="ddlDashboard" id="lblDashboard" class="font-bold">DashBoards</label> <select id="ddlDashboard_' + len + '" class="form-control floating-label-control required Dashboard" placeholder="DashBoards" data-placeholder="Select Dashboard " data-label="DashBoards" style="width:100%"></select> <input type="hidden" class="hfDashBoard_' + len + '" id="hfDashBoard_' + len + '" value=""/> </div></li><li class="w-50 div_dashboardgroup_' + len + ' hidden"> <div class="floating-label-form-group-with-value" id="div_dashboardgroup" style="border-bottom:0;"> <label for="ddlDashboardGroup" id="lblDashboardGroup" class="font-bold">DashBoard Groups</label> <select id="ddlDashboardGroup_' + len + '" class="form-control floating-label-control required DashboardGroups" placeholder="DashBoard Groups" data-placeholder="Select Dashboard group " data-label="DashBoard Groups" style="width:100%"></select> <input type="hidden" class="hfDashBoardGroup_' + len + '" id="hfDashBoardGroup_' + len + '" value=""/> </div></li><li class="w-50 widgetsetingdiv_' + len + ' hidden"> <div class="floating-label-form-group-with-value" id="div_LoadWidgetAppConfigForm_' + len + '" style="border-bottom:0;"> <label for="ddlFormUniqueKey" id="lblFormUniqueKey" class="font-bold">Widgets</label> <input type="hidden" id="hfWidgetsAutoComplete_' + len + '" value=""/> <input type="hidden" id="hfWidgetsAutoComplete_' + len + '" value=""/> <select id="ddlWidgets_' + len + '" style="width:100%" class="b-a form-control floating-label-control FormUniqueKey" placeholder="Widgets" data-placeholder=" Select Widget" data-label="Form"></select> </div></div></li><li class="py-2"> <div class="col-sm-12 p-0 hidden Procedure w-50"> <div class="floating-label-form-group" id="div_Procedurename"> <label for="txt_Procedure" id="lblProcedure" class="font-bold">Procedure Name</label> <input type="text" class="form-control floating-label-control ProcedureName" id="txt_ProcedureName_' + len + '" data - isdynamic="false" placeholder="ProcedureName" data-placeholder="Enter ProcedureName" data - label="Procedure" autocomplete="off" /> </div> </div> </li><li class="w-100 py-2"> <ul class="d-flex flex-row"> <li class="w-30 pr-4"> <label for="chkIsDefault" class="w-100"> <b>IsDefault </b> </label> <label id="lblIsDefault" class="switch"> <input id="chkIsDefault_' + len + '" class="IsDefault" data - group="IsDefault" type="checkbox" data - controlpropertyname="IsDefault"> <span></span> </label> </li><li class="w-30 roleSettingDiv"> <label for="chkUngrouped" class="w-100"> <b>Ungrouped</b> </label> <label id="lblUngrouped" class="switch"> <input id="chkUngrouped_' + len + '" data-group="Ungrouped" class="Ungrouped" type="checkbox" data-controlpropertyname="Ungrouped"> <span></span> </label> </li><li class="w-30 pr-4"> <label for="chkExcludeFromLock" class="w-100"> <b>Exclude From Lock </b> </label> <label id="lblExcludeFromLock" class="switch"> <input id="chkExcludeFromLock_' + len + '" class="ExcludeFromLock" data - group="ExcludeFromLock" type="checkbox" data - controlpropertyname="ExcludeFromLock"> <span></span> </label> </li></ul> </li><li class="hidden py-2"> <div class="floating-label-form-group-with-value" id="div_WidgetAppConfigForm" style="border-bottom:0;"> <label for="ddlFormUniqueKey" id="lblFormUniqueKey" class="font-bold"> Form < /label> <input type="hidden" class="hfFormUniqueIdAutoComplete" id="hfFormUniqueIdAutoComplete_' + len + '" value=""/> <input type="hidden" id="hfFormUniqueKeyAutoComplete_' + len + '" value=""/> <select id="ddlFormUniqueKey_' + len + '" class="b-a w-100 form-control floating-label-control FormUniqueKey" placeholder="Form" data - placeholder="Select Form" data - label="Form"></select> </div></li><li class="py-2"> <div class="col-sm-12 p-0 hidden WidgetAppConfigSettingURL"> <div class="floating-label-form-group" id="div_WidgetAppConfigSettingURL"> <label for="txt_SettingURL" id="lblSettingURL" class="font-bold">Setting URL</label> <input type="text" class="form-control floating-label-control SettingURL" id="txt_SettingURL_' + len + '" data - isdynamic="false" placeholder="Setting URL" data - placeholder="Enter Setting URL" data - label="Setting URL" autocomplete="off"/> </div></div></li><li class="py-2"> <div class="floating-label-form-group-with-value" id="summernoteDiv_AppConfigJsFunction"> <label for="Validation" id="lblValidation">Jsfunction</label> <textarea class="w-100 p-2 summernote_JsFunction border" id="summernote_JsFunction_' + len + '" data - propdoctypename="JsFunction" placeholder="Enter JsFunction" data - placeholder="Enter JsFunction" data - label="JsFunction" rows="3"></textarea> </div></li><li class="py-2"> <div class="col-sm-12 p-0 floating-label-form-group-with-value hidden" id="Div_SettingDesignhtml_' + len + '"> <label for="Validation" id="lblValidation">SettingDesignhtml</label> <textarea class="txt_SettingDesignhtml" style="width:inherit;" id="txt_SettingDesignhtml_' + len + '" data - propdoctypename="SettingDesignhtml" placeholder="Enter SettingDesignhtml" data - placeholder="Enter SettingDesignhtml" data - label="SettingDesignhtml" rows="3" cols="112"></textarea> </div></li><li class="py-2"> <div class="col-sm-12 p-0 floating-label-form-group-with-value hidden" id="Div_DynamicJs_' + len + '"> <label for="Validation" id="lblValidation">DynamicJs</label> <textarea class="txt_DynamicJs" style="width:inherit;" id="txt_DynamicJs_' + len + '" data - propdoctypename="DynamicJs" placeholder="Method" data - placeholder="Method Description" data - label="Method" rows="3" cols="112"></textarea> </div></li></ul> ' + ' </div>' + ' </div>' + '</div>' + ' </div>';
                            var AddAppConfigAppendhtml = '<a href="javascript:;" class="btn btn-light py-0 btn-adj-drawer-close"onclick="Unibase.Platform.Widgets.Components.Widget.Instance().appModalconfigClose()">Close</a> <a href = "javascript:;" class="btn btn-theme py-0 btn-adj-drawer-close" onclick = "Unibase.Platform.Widgets.Components.Widget.Instance().appendconfigSaveNames(' + InstalledAppId + ')" > Save </a>';
                            $('.appendconfigSaveNamesClass').html(AddAppConfigAppendhtml);
                            for (var m = 1; m < len; m++) {
                                $('#appConfigColumns').find('.AppConfig-row').removeClass('active');
                                $('#appConfigColumns').find('#divAppConfig_' + m + '').addClass('hidden');
                                $('#appConfigColumns').find('#AppConfigId_' + m + '').addClass('hidden');
                            }
                            $(".AppConfig-row:last").after(html);
                            var element = $(".AppConfig-row:last");
                            Widget.Instance().bindList(element, len, InstalledAppId);
                            var url = _appsettings.server_url() + '/apis/v4/unibase/platform/apps/getpermissions';
                            AutoCompleteHelper.getHelper().Create("#ddlPermission_" + len, "#hfPermission_" + len, url, function (response) {
                                var data = response;
                            });
                            var url = _appsettings.server_url() + '/apis/v4/unibase/platform/apps/getappconfigtypes';
                            AutoCompleteHelper.getHelper().Create("#ddlAppConfigType_" + len, "#hfAppConfigType_" + len, url, function (response) {
                                var data = response;
                            });
                            var url = _appsettings.server_url() + '/apis/v4/unibase/platform/apps/icons';
                            AutoCompleteHelper.getHelper().Create("#ddlAppConfigIcon_" + len, "#hfAppConfigIcon_" + len, url, function (response) {
                                var data = response;
                            }, true);
                            var url = _appsettings.server_url() + '/apis/v4/unibase/platform/widgets/widgetautocomplete';
                            AutoCompleteHelper.getHelper().Create("#ddlWidgets_" + len, "#hfWidgetsAutoComplete_" + len, url, function (response) {
                                var data = response;
                            });
                            $("#ddlSettingUrlType_" + len).empty().trigger("change");
                            var url = _appsettings.server_url() + '/apis/v4/unibase/platform/apps/getsettingurl';
                            AutoCompleteHelper.getHelper().Create("#ddlSettingUrlType_" + len, "#hfSettingUrlType_" + len, url, function (response) {
                                var data = response;
                            });
                            Widget.Instance().loadForms(len, 0, "");
                            Widget.Instance().loadFormInstalledApps(len);
                            Unibase.Platform.Apps.Managers.AppManager.Instance().getInstallApp(InstalledAppId).then(function (response) {
                                if (response.result != null) {
                                    $("#ddlFormInstallAppId_" + len + "").append('<option value="' + response.result.InstalledAppId + '">' + response.result.AppTitle + '</option>');
                                    $("#ddlFormInstallAppId_" + len + "").val(response.result.InstalledAppId);
                                }
                            });
                            var widgetTypeName = $("#ddlWidgetType").children("option:selected").text();
                            var lowerCaseWidgetType = widgetTypeName.toLowerCase();
                            if (RegExp("dashboard").test(lowerCaseWidgetType)) {
                                $(".FormInstallAppId").prop('disabled', false);
                            }
                            else {
                                $(".FormInstallAppId").prop('disabled', true);
                            }
                            $('#txt_KPIImageFile').change(function (e) {
                                Widget.Instance().Singledoc_array = [];
                                let fileInput = document.getElementById("txt_KPIImageFile");
                                let file = fileInput.files[0];
                                var item = { Files: file };
                                Widget.Instance().Singledoc_array.push(item);
                            });
                            $("#ddlAppConfigType_" + len).change(function (e) {
                                if ($("#ddlAppConfigType_" + len).val() == 6 || $("#ddlAppConfigType_" + len).val() == 3) {
                                    $("#Div_SettingDesignhtml_" + len).removeClass("hidden");
                                }
                                else {
                                    $("#Div_SettingDesignhtml_" + len).addClass("hidden");
                                }
                            });
                            $("#ddlSettingUrlType_" + len).change(function (e) {
                                var currentid = e.currentTarget.id;
                                var number = currentid.match(/\d+/);
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == "Form") {
                                    var lihtml = `<div class="card"><input type="hidden" value="" id='deleteconfig_` + len + `' class='deleteconfig_config'><div class="card-body div_formroles"><div class="row"><div class="col-sm-5"><select id="autocomplete_Form_` + len + `" class="form-control text-control" style="width:100%;" placeholder = "Form" data-placeholder="Form"></select><input type = "hidden" id = "hfAutocomplete_Form_` + len + `" class="hfAutocomplete_Form form-control value-control" data - isdynamic="true" /></div><div class="col-sm-5"><select id = "autocomplete_role_` + len + `" class="form-control text-control" style = "width:100%;" placeholder = "Roles" data - placeholder="Roles" ><option value=-1>Select Role</option><option value=0>All</option> </select><input type = "hidden" id = "hf_autocomplete_role_` + len + `" class="hf_autocomplete_role form-control value-control" data - isdynamic="true"/></div><div class="col-sm-1 my-auto"><a href="javascript:;" class="Addformrole_` + len + ` formroles_class" onclick=""><i class="fa fa-plus text-primary"></i></a></div></div><br/><div id="ul_errmsg_` + len + `"></div><div class="div_formrole_` + len + `"></div></div></div></div></div></div></div>`;
                                    $("#Div_DynamicJs_" + len).addClass("hidden");
                                    element.find(".WidgetAppConfigSettingURL").addClass("hidden");
                                    element.find(".Procedure").addClass("hidden");
                                    $("#summernote_JsFunction_" + number + "").after(lihtml);
                                    $(".div_formsize_" + len + "").removeClass('hidden');
                                    $('.div_dashboard_' + len + '').addClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').addClass('hidden');
                                    $('.widgetsetingdiv_' + len + '').addClass('hidden');
                                    $(".Addformrole_" + len + "").unbind().click(function () {
                                        var formid = Number($("#autocomplete_Form_" + len + "").val());
                                        var roleid = Number($("#autocomplete_role_" + len + "").val());
                                        var formname = $("#autocomplete_Form_" + len + " option:selected").text();
                                        var rolename = $("#autocomplete_role_" + len + " option:selected").text();
                                        if ($(".div_formrole_" + len + "").find("." + roleid + "_duplicate").length > 0) {
                                            MessageHelper.Instance().showError("already existed", "ul_errmsg_" + len + "");
                                            return false;
                                        }
                                        var lihtml = Unibase.Platform.Widgets.Components.Widget.Instance().loadrolesdata(formid, formname, roleid, rolename, 0, len, 0);
                                        $(".div_formrole_" + len + "").append(lihtml);
                                        Unibase.Platform.Widgets.Components.Widget.Instance().javaScript(formid, roleid, len, "");
                                    });
                                    var url = _appsettings.server_url() + '/apis/v4/unibase/platform/forms/getformsautocomplete';
                                    AutoCompleteHelper.getHelper().Create("#autocomplete_Form_" + len, "hfAutocomplete_Form_" + len, url, function (response) {
                                        var data = response;
                                    });
                                    var url = _appsettings.server_url() + '/apis/v4/unibase/platform/roles/getroles';
                                    AutoCompleteHelper.getHelper().Create("#autocomplete_role_" + len + "", "#hf_autocomplete_role_" + len + "", url, function (response) {
                                    });
                                }
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Html') {
                                    $("#Div_DynamicJs_" + len).addClass("hidden");
                                    $('#summernote_JsFunction_' + len).next().remove();
                                    element.find(".WidgetAppConfigSettingURL").addClass("hidden");
                                    element.find(".Procedure").addClass("hidden");
                                    $(".div_formsize_" + len + "").addClass('hidden');
                                    $('.div_dashboard_' + len + '').addClass('hidden');
                                    $('.widgetsetingdiv_' + len + '').addClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').addClass('hidden');
                                }
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == 'JsFunction') {
                                    $("#Div_DynamicJs_" + len).removeClass("hidden");
                                    $('#summernote_JsFunction_' + len).next().remove();
                                    element.find(".WidgetAppConfigSettingURL").removeClass("hidden");
                                    element.find(".Procedure").addClass("hidden");
                                    $(".div_formsize_" + len + "").addClass('hidden');
                                    $('.div_dashboard_' + len + '').addClass('hidden');
                                    $('.widgetsetingdiv_' + len + '').addClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').addClass('hidden');
                                }
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Widget') {
                                    $(".widgetsetingdiv_" + len + "").removeClass("hidden");
                                    $("#Div_DynamicJs_" + len).addClass("hidden");
                                    $('#summernote_JsFunction_' + len).next().remove();
                                    element.find(".WidgetAppConfigSettingURL").addClass("hidden");
                                    element.find(".Procedure").addClass("hidden");
                                    $(".div_formsize_" + len + "").addClass('hidden');
                                    $('.div_dashboard_' + len + '').addClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').addClass('hidden');
                                }
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == 'App' || $("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Report' || $("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Component' || $("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Delete' || $("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Status') {
                                    $(".widgetsetingdiv_" + len + "").addClass("hidden");
                                    $('#summernote_JsFunction_' + len).next().remove();
                                    $("#Div_DynamicJs_" + len).addClass("hidden");
                                    element.find(".WidgetAppConfigSettingURL").addClass("hidden");
                                    element.find(".Procedure").addClass("hidden");
                                    $(".div_formsize_" + len + "").addClass('hidden');
                                    $('.div_dashboard_' + len + '').addClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').addClass('hidden');
                                }
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Dashboard') {
                                    var url = _appsettings.server_url() + '/apis/v4/unibase/platform/dashboards/dashboardsautocomplete';
                                    AutoCompleteHelper.getHelper().Create("#ddlDashboard_" + len, "#hfDashBoard_" + len, url, function (response) {
                                        var data = response;
                                    });
                                    $(".widgetsetingdiv_" + len + "").addClass("hidden");
                                    $("#Div_DynamicJs_" + len).addClass("hidden");
                                    $('#summernote_JsFunction_' + len).next().remove();
                                    element.find(".WidgetAppConfigSettingURL").addClass("hidden");
                                    element.find(".Procedure").addClass("hidden");
                                    $(".div_formsize_" + len + "").addClass('hidden');
                                    $('.div_dashboard_' + len + '').removeClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').addClass('hidden');
                                }
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Dashboardgroup') {
                                    var url = _appsettings.server_url() + '/apis/v4/unibase/platform/dashboards/dashboardgroupsautocomplete';
                                    AutoCompleteHelper.getHelper().Create("#ddlDashboardGroup_" + len, "#hfDashBoardGroup_" + len, url, function (response) {
                                        var data = response;
                                    });
                                    $(".widgetsetingdiv_" + len + "").addClass("hidden");
                                    $("#Div_DynamicJs_" + len).addClass("hidden");
                                    $('#summernote_JsFunction_' + len).next().remove();
                                    element.find(".WidgetAppConfigSettingURL").addClass("hidden");
                                    element.find(".Procedure").addClass("hidden");
                                    $(".div_formsize_" + len + "").addClass('hidden');
                                    $('.div_dashboard_' + len + '').addClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').removeClass('hidden');
                                }
                                if ($("#ddlSettingUrlType_" + len + ' option:selected').text() == 'Procedure') {
                                    $("#Div_DynamicJs_" + len).addClass("hidden");
                                    $('#summernote_JsFunction_' + len).next().remove();
                                    element.find(".WidgetAppConfigSettingURL").addClass("hidden");
                                    element.find(".Procedure").removeClass("hidden");
                                    $(".div_formsize_" + len + "").addClass('hidden');
                                    $('.div_dashboard_' + len + '').addClass('hidden');
                                    $('.widgetsetingdiv_' + len + '').addClass('hidden');
                                    $('.div_dashboardgroup_' + len + '').addClass('hidden');
                                }
                            });
                            $("#ddlFormInstallAppId_" + len).change(function (e) {
                                Widget.Instance().loadAppPermissions(len, Number($("#ddlFormInstallAppId_" + len + "").val()));
                            });
                            $(".chevron_" + len).click(function () {
                                var collapsed = $(".AppConfigRow" + len).hasClass('collapse');
                                if (!collapsed) {
                                    $(".AppConfigRow" + len).addClass('collapse');
                                    $(".chevron_" + len).removeClass('fa-chevron-up');
                                    $(".chevron_" + len).addClass('fa-chevron-down');
                                }
                                else {
                                    $(".chevron_" + len).removeClass('fa-chevron-down');
                                    $(".chevron_" + len).addClass(' fa-chevron-up');
                                    $('.AppConfigRow' + len).removeClass('collapse');
                                }
                            });
                            if (InstalledAppId != 0) {
                                Widget.Instance().loadAppPermissions(len, InstalledAppId);
                            }
                            return len;
                        }
                    }
                    loadAppPermissions(index, installedAppId) {
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/apps/apppermissionautocomplete/installedappid/' + installedAppId;
                        AutoCompleteHelper.getHelper().Create("#txt_RoleSetting_" + index, "hfRoleSettingAutoComplete_" + index, url, function (response) {
                            var data = response;
                        });
                    }
                    bindList(element, index, InstalledAppId) {
                        element.find(".delete").on('click', function () {
                            Widget.Instance().DeleteConfigurationIds = Widget.Instance().DeleteConfigurationIds + "," + $(this).parents('.AppConfig-row').find('.hf_AppConfigurationId').val();
                            $(this).parents('.AppConfig-row').remove();
                            Widget.Instance().refreshConfugarationsList;
                            Widget.Instance().refreshAppConfiglist();
                        });
                        element.find(".RoleSetting").on('select2:select', function () {
                            Widget.Instance().loadAppPermissions(index, InstalledAppId);
                        });
                    }
                    bindList_New(element, index, InstalledAppId) {
                        element.find(".delete").unbind().on('click', function () {
                            Widget.Instance().DeleteConfigurationIds = Widget.Instance().DeleteConfigurationIds + "," + $('.AppConfig_' + index).find('.hf_AppConfigurationId').val();
                            $('.AppConfig_' + index).remove();
                            $('#li_' + index).remove();
                            Widget.Instance().refreshConfugarationsList();
                            Widget.Instance().refreshAppConfiglist();
                        });
                        element.find(".RoleSetting").on('select2:select', function () {
                            Widget.Instance().loadAppPermissions(index, InstalledAppId);
                        });
                    }
                    loadForms(len, formid, formname) {
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/forms/getformsautocomplete';
                        AutoCompleteHelper.getHelper().Create("#ddlFormUniqueKey_" + len, "hfFormUniqueKeyAutoComplete_" + len, url, function (response) {
                            var data = response;
                        });
                        if (formid != 0) {
                            $("#ddlFormUniqueKey_" + len + "").append('<option value="' + formid + '">' + formname + '</option>');
                            $("#ddlFormUniqueKey_" + len + "").val(formid).trigger('change');
                        }
                    }
                    loadFormInstalledApps(len) {
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/apps/installedappautocomplete';
                        AutoCompleteHelper.getHelper().Create("#ddlFormInstallAppId_" + len, "hfFormInstalledappAutocomplete_" + len, url, function (response) {
                            var data = response;
                        });
                    }
                    loadJsFunction() {
                        $(".summernote_JsFunction").summernote({
                            height: 150,
                            minHeight: null,
                            maxHeight: null,
                            focus: true,
                            placeholder: "Enter JsFunction",
                            codemirror: {
                                mode: 'text/html',
                                htmlNode: true,
                                lineNumbers: true
                            },
                            toolbar: [
                                ['font', ['bold', 'italic', 'underline']],
                                ['color', ['color']],
                                ['view', ['fullscreen', 'codeview', 'help']],
                            ],
                        });
                    }
                    refreshConfugarationsList() {
                        var len = $('.AppConfig-row').length;
                        var count = 1;
                        $(".AppConfigurations").find(".AppConfig-row.column-appconfigitem").each(function () {
                            if (count <= len) {
                                $(this).find(".AppConfig-row").attr('class', 'AppConfig_' + count);
                                $(this).find(".SettingName").attr('id', 'txt_SettingName_' + count);
                                $(this).find(".SettingURL").attr('id', 'txt_SettingURL_' + count);
                                $(this).find(".RoleSetting").attr('id', 'txt_RoleSetting_' + count);
                                $(this).find(".Dashboard").attr('id', 'ddlDashboard_' + count);
                                $(this).find(".DashboardGroups").attr('id', 'ddlDashboardGroup_' + count);
                                $(this).find(".Permission").attr('id', 'ddlPermission_' + count);
                                $(this).find(".AppConfigType").attr('id', 'ddlAppConfigType_' + count);
                                $(this).find(".AppConfigIcon").attr('id', 'ddlAppConfigIcon_' + count);
                                $(this).find(".AppConfigISettingUrlType").attr('id', 'ddlSettingUrlType_' + count);
                                $(this).find(".FormInstallAppId").attr('id', 'ddlFormInstallAppId_' + count);
                                $(this).find(".summernote_JsFunction").attr('id', 'summernote_JsFunction_' + count);
                                $(this).find(".txt_SettingDesignhtml").attr('id', 'txt_SettingDesignhtml_' + count);
                                $(this).find(".IsDefault").attr('id', 'chkIsDefault_' + count);
                                $(this).find(".Ungrouped").attr('id', 'chkUngrouped_' + count);
                                $(this).find(".ExcludeFromLock").attr('id', 'chkExcludeFromLock_1' + count);
                                $(this).find(".FormUniqueKey").attr('id', 'ddlFormUniqueKey_' + count);
                                $(this).find(".hfAppConfigType").attr('id', 'hfAppConfigType_' + count);
                                $(this).find(".ddlFormSize").attr('id', 'ddlFormSize_' + count);
                                $(this).attr('id', 'AppConfigId_' + count);
                                $(this).attr('class', 'AppConfig-row AppConfig_' + count + ' column-appconfigitem');
                                $(this).find(".hfFormUniqueIdAutoComplete").attr('id', 'hfFormUniqueIdAutoComplete_' + count);
                                $(this).attr('data-length', count);
                                $(this).find('.rowNum').text(count);
                                count += 1;
                                var element = $(this);
                            }
                        });
                    }
                    refreshAppConfiglist() {
                        var len = $('.liclassId').length;
                        let count1 = 1;
                        $("#AppConfigNames").find(".liclassId").each(function () {
                            if (count1 <= len) {
                                var InstalledAppId_ = Unibase.Themes.Providers.DetailHelper.installedAppId;
                                $(this).attr('id', 'li_' + count1);
                                $(this).find('.EditAppConfiguration').attr('data-lengthEdit', +count1);
                                $(this).find('.EditAppConfiguration').attr('onclick', 'Unibase.Platform.Widgets.Components.Widget.Instance().EditAppConfiguration(' + InstalledAppId_ + ',' + count1 + ')');
                                $(this).find('.DeleteAppConfiguration').attr('onclick', 'Unibase.Platform.Widgets.Components.Widget.Instance().DeleteAppConfiguration(' + InstalledAppId_ + ',' + count1 + ')');
                                count1 += 1;
                            }
                        });
                    }
                    hideKPILabel(fileimage) {
                        var instance = this;
                        $("#lblKPIImage2").addClass("hidden");
                        $("#txt_KPIImageFile").css({ "color": "", "height": "", "width": "" });
                        Widget.Instance().Singledoc_array = [];
                        let fileInput = document.getElementById("txt_KPIImageFile");
                        let file = fileInput.files[0];
                        var item = { Files: file };
                        Widget.Instance().Singledoc_array.push(item);
                        $('.logo-change .progress-wrap').removeClass('d-none');
                        $('.logo-change .progress-wrap').addClass('d-flex');
                        var fileName = $('#txt_KPIImageFile').val();
                        $('#lblKPIFileName').html('<span class="d-flex justify-content-between"><span>' + fileName.replace("C:\\fakepath\\", "") + '</span><a href="javascript:;" class="ml-2 delete-icon-kpi text-danger"><i class="las la-times"></i></a></span>');
                        $('.delete-icon-kpi').unbind().on('click', function () {
                            $(this).parent().addClass('invisible');
                            Unibase.Platform.Widgets.Components.Widget.Instance().ImageData = undefined;
                        });
                        $('#lblKPIFileName').siblings('a').removeClass('hidden');
                        const reader = new FileReader();
                        reader.onload = function () {
                            console.log(`${reader.result}`);
                            instance.imageSrc = `${reader.result}`;
                            $('.imageUpload').attr('src', instance.imageSrc);
                        };
                        if (file) {
                            reader.readAsDataURL(file);
                        }
                    }
                    getBase64(item) {
                        return __awaiter(this, void 0, void 0, function* () {
                            var filename = "";
                            filename = item.Files.DocumentFileName;
                            if (filename == undefined)
                                filename = item.Files.name;
                            let file = item.Files;
                            let fileInfo = item.Files.name.split('.');
                            return new Promise((resolve, reject) => {
                                let content = '';
                                const reader = new FileReader();
                                reader.readAsDataURL(item.Files);
                                reader.onloadend = function () {
                                    var base64String = reader.result.toString().replace(/^data:.+;base64,/, '');
                                    var fileReq = {
                                        FileData: base64String,
                                        FileName: fileInfo[0],
                                        FileType: fileInfo[1],
                                        ByteData: null
                                    };
                                    resolve(fileReq);
                                };
                                reader.onerror = function (e) {
                                    reject(e);
                                };
                            });
                        });
                    }
                    saveWidget(InstalledAppId) {
                        var instance = this;
                        let FormDiv = ['frmUnibase_widgetBuilderDetailsLeftNav', 'txt_WidgetName', 'frmUnibase_widgetBuilderAppearance'];
                        let isFormValid = true;
                        let requiredFieldsLength = 0;
                        $.each(FormDiv, function (index, item) {
                            let result = Unibase.Platform.Forms.Components.FormViewer.Instance().requiredFieldValidation(item);
                            if (result == false) {
                                isFormValid = false;
                                if (item == 'frmUnibase_widgetBuilderDetailsLeftNav') {
                                    requiredFieldsLength += $("#" + item).find(".form-group-required").length;
                                }
                                else {
                                    requiredFieldsLength += $("#" + item + ".form-group-required").length;
                                }
                            }
                        });
                        if (isFormValid) {
                            let uniqueId = "";
                            if (InstalledAppId != 0) {
                                instance.fileCacheHelper.loadJsFile("platform/apps/managers/appmanager.js", function () {
                                    Unibase.Platform.Apps.Managers.AppManager.Instance().getInstallApp(InstalledAppId).then(function (response) {
                                        if (response.result != null) {
                                            uniqueId = response.result.UniqueId;
                                            Widget.Instance()._saveWidget(uniqueId, response.result.InstalledAppId);
                                        }
                                    });
                                });
                            }
                            else {
                                Widget.Instance()._saveWidget(uniqueId, InstalledAppId);
                            }
                            var designsPreviewIndex = Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.findIndex(x => x == 'designsPreviewAppend');
                            if (designsPreviewIndex != -1) {
                                Unibase.Platform.Helpers.NavigationHelper.ModalContainerIds.splice(designsPreviewIndex, 1);
                            }
                        }
                        else {
                            let formPropertyName = $('.form-group-required').data('validatename');
                            MessageHelper.Instance().showError(formPropertyName + " Mandatory fields are missing", "bizgaze_ValidationSummary");
                            return false;
                        }
                    }
                    _saveWidget(uniqueId, InstalledAppId) {
                        return __awaiter(this, void 0, void 0, function* () {
                            var instance = this;
                            let parameter = "";
                            $("#ulparamers").find(".row-item-li").each(function () {
                                if (parameter != "")
                                    parameter += "|";
                                parameter += $(this).find("#row1").text() + ":" + $(this).find("#row2").text() + ":" + $(this).find("#row3").text() + ":" + $(this).find("#row6").val() + ":" + $(this).find("#row4").val();
                            });
                            let WidgetId = 0;
                            WidgetId = Number($("#hf_WidgetId").val());
                            var ismandatory = false;
                            if ($("#chkIsMandatory").is(':checked') == true) {
                                ismandatory = true;
                            }
                            else {
                                ismandatory = false;
                            }
                            let WidgetType = 0;
                            var TableData = new Array();
                            var DetailWidgetTableData = new Array();
                            let Layout = Number($("#ddlWidgetLayout option:selected").val());
                            var layoutName = $("#ddlWidgetLayout option:selected").text();
                            var lowercase = layoutName.toLowerCase();
                            if (RegExp("detail").test(lowercase)) {
                                if ($('#ulcolumns li').length <= 0) {
                                    MessageHelper.Instance().showError("Details widget should contain atleast one column", "bizgaze_ValidationSummary");
                                    return false;
                                }
                                WidgetType = Layout;
                                var len = document.getElementById("ulcolumns").getElementsByTagName("li").length;
                                var detailIcon = "";
                                if ($("#ddlDetailIcon option:selected").val() != 0)
                                    detailIcon = "fa fa-" + $("#ddlDetailIcon option:selected").text();
                                TableData[0] =
                                    {
                                        "Icon": detailIcon,
                                        "LinkUrl": $("#txt_DetaillinkURL").val(),
                                    };
                                for (var row = 1; row <= len; row++) {
                                    var colVal = "{{" + $("#columnId_" + row).find("#row1").text().trim() + "}}";
                                    var propIndex = parseInt($("#columnId_" + row).find("#row5").text());
                                    DetailWidgetTableData[row - 1] =
                                        {
                                            "HyperLink": $("#columnId_" + row).find("#row4").text(),
                                            "Label": $("#columnId_" + row).find("#row3").text(),
                                            "PropertyIndex": propIndex - 1,
                                            "Value": colVal,
                                            "DetailsWidgetPropertyId": Number($("#columnId_" + row).find("#row0").val()),
                                            "ConverterValue": $("#columnId_" + row).find("#row6").val().toString(),
                                            "ConverterType": Number($("#columnId_" + row).find("#ConverterType").val())
                                        };
                                }
                                ;
                            }
                            else if (RegExp("kpi").test(lowercase)) {
                                var filePath = "";
                                if (Widget.Instance().Singledoc_array.length > 0) {
                                }
                                WidgetType = Layout;
                                var kpiColor = "";
                                var selected_columns = "";
                                let selected_columns_labels = "";
                                if ($("#ddlKPIColor option:selected").val() != 0)
                                    kpiColor = $("#ddlKPIColor option:selected").text();
                                if (!$("#lblKPIImage2").hasClass("hidden")) {
                                    let filePath = $("#hf_KPIIconPath").val();
                                }
                                if ($("#ddlWidgetDesign option:selected").text() == "KPI_Default" || $("#ddlWidgetDesign option:selected").text() == "KPI_Icon" || $("#ddlWidgetDesign option:selected").text() == "KPI_Icon_Color" || $("#ddlWidgetDesign option:selected").text() == "KPI_Icon_Bg_Color" || $("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithborder") {
                                    selected_columns = $("#ddlSelectedValue_1 option:selected").text();
                                    selected_columns_labels = $('#ddlSelectedLabelValue_1').val();
                                }
                                else if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BottomBar_color" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_ProgressBar" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_BgColor" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BgColor" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_PieIcon" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_LineCenter" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPie_Icon") {
                                    selected_columns = $("#ddlSelectedValue_1 option:selected").text() + ',' + $("#ddlSelectedValue_2 option:selected").text();
                                    selected_columns_labels = $('#ddlSelectedLabelValue_1').val() + ',' + $('#ddlSelectedLabelValue_2').val();
                                }
                                else if (($("#ddlWidgetDesign option:selected").text()) == "KPI_Comparison" || ($("#ddlWidgetDesign option:selected").text()) == "Kpi_fulfillment" || ($("#ddlWidgetDesign option:selected").text()) == "KPI_ComparisonRightBar_color" || ($("#ddlWidgetDesign option:selected").text()) == "KPI_ComparisonBottomBar_Color") {
                                    if ($("#ddlSelectedValue_3 option:selected").text() == "Select Column") {
                                        selected_columns = $("#ddlSelectedValue_1 option:selected").text() + ',' + $("#ddlSelectedValue_2 option:selected").text();
                                        selected_columns_labels = $('#ddlSelectedLabelValue_1').val() + ',' + $('#ddlSelectedLabelValue_2').val() + ',' + $('#ddlSelectedLabelValue_3').val();
                                    }
                                    else {
                                        selected_columns = $("#ddlSelectedValue_1 option:selected").text() + ',' + $("#ddlSelectedValue_2 option:selected").text() + ',' + $("#ddlSelectedValue_3 option:selected").text();
                                        selected_columns_labels = $('#ddlSelectedLabelValue_1').val() + ',' + $('#ddlSelectedLabelValue_2').val() + ',' + $('#ddlSelectedLabelValue_3').val();
                                    }
                                }
                                var selected_column_1 = $("#ddlSelectedValue_1 option:selected").text();
                                var selected_column_2 = $("#ddlSelectedValue_2 option:selected").text();
                                if (selected_column_1 == 'Select Column' && selected_column_2 == 'Select Column') {
                                    MessageHelper.Instance().showError("Need to select any one of the select value columns ", "bizgaze_ValidationSummary");
                                    return false;
                                }
                                var file = $('#txt_KPIImageFile').get(0);
                                var files = file.files;
                                var kpi_height = $("#ddlheight").val();
                                if (files.length == 1) {
                                    instance.ImageData = new Unibase.Platform.Helpers.File();
                                    if (files.length != 0) {
                                        var item = { Files: files[0] };
                                        yield instance.getBase64(item).then(function (res) {
                                            instance.ImageData = res;
                                        });
                                    }
                                }
                                else {
                                    instance.ImageData;
                                }
                                let KpiSettings = new Array();
                                KpiSettings[0] = {
                                    "DataType": $('#kpidataType_1 option:selected').val() + "," + $('#kpidataType_2 option:selected').val() + "," + $('#kpidataType_3 option:selected').val(),
                                    "IsRoundOff": $('#kpi_isroundoff_1[type=checkbox]').is(':checked') + "," + $('#kpi_isroundoff_2[type=checkbox]').is(':checked') + "," + $('#kpi_isroundoff_3[type=checkbox]').is(':checked')
                                };
                                TableData[0] =
                                    {
                                        "Color": kpiColor,
                                        "Icon": "",
                                        "File": instance.ImageData,
                                        "LinkUrl": $("#txt_KPIlinkURL").val(),
                                        "Selected_Columns": selected_columns,
                                        "Selected_Columns_Labels": selected_columns_labels,
                                        "LinkReportId": Number($("#ddlLinkReportId").val()),
                                        "KpiHeight": String(($("#ddlheight").val())),
                                        "KpiSetting": JSON.stringify(KpiSettings)
                                    };
                            }
                            else if (RegExp("list").test(lowercase)) {
                                WidgetType = Layout;
                                var issearchable = 0;
                                var issortable = 0;
                                var ispagination = 0;
                                if ($("#chkIsSearchable").is(':checked') == true)
                                    issearchable = 1;
                                else
                                    issearchable = 0;
                                if ($("#chkIsSortable").is(':checked') == true)
                                    issortable = 1;
                                else
                                    issortable = 0;
                                if ($("#chkIsPagination").is(':checked') == true)
                                    ispagination = 1;
                                else
                                    ispagination = 0;
                                var listIcon = "";
                                if ($("#ddlListIcon").val() != 0)
                                    listIcon = "fa fa-" + $("#ddlListIcon").children("option:selected").text();
                                TableData[0] =
                                    {
                                        "LinkUrl": $("#txt_ListlinkURL").val(),
                                        "Icon": listIcon,
                                        "IsSearchable": issearchable,
                                        "IsSortable": issortable,
                                        "IsPagination": ispagination,
                                        "HeaderText": $("#summernote_ListHeaderTxt").summernote("code"),
                                        "TemplateText": $("#summernote_ListTemplateTxt").summernote("code"),
                                        "JS": $("#summernote_ListJS").summernote("code"),
                                    };
                            }
                            else {
                                WidgetType = Layout;
                            }
                            var highlighter = "";
                            if ($("#ddlColorCode option:selected").val() != 0)
                                highlighter = $("#ddlColorCode option:selected").text();
                            var iconName = "";
                            if ($("#ddlIcon option:selected").val() != 0)
                                iconName = "fa fa-" + $("#ddlIcon option:selected").text();
                            let uniqueName = $("#txt_WidgetUniqueName").val().toString();
                            let AppproviderIds = "";
                            if ($("#ddlAppProviders").val() != 0) {
                                AppproviderIds = $("#ddlAppProviders").val().toString();
                            }
                            let layoutid = $("#Layout option:selected").val();
                            let reportid = $("#ddlReport option:selected").val();
                            if (reportid == undefined)
                                reportid = 0;
                            else
                                reportid = Number(reportid);
                            if (layoutid == "0")
                                reportid = 0;
                            let ConfugarationsData = Widget.Instance().getConfigurations(uniqueId, InstalledAppId);
                            let CssPropertyData = new Array();
                            CssPropertyData[0] =
                                {
                                    "BorderWidth": $('#border-width').val(),
                                    "BorderColor": $('#border-color').val(),
                                    "BorderType": $('#border-type').val(),
                                    "BorderRadius": $('#border-radius').val(),
                                    "FontSize": $('#font-size').val(),
                                    "FontFamily": $('#font-style').val(),
                                    "BackgroundColor": $('#backgroundcolor').attr('data-backgroundcolor'),
                                    "FontColor": "",
                                    "ListStyleType": $('#list-style-type').val(),
                                    "DetailsBorderType": $('#border-type-details').val(),
                                    "DetailsBorderWidth": $('#border-width-details').val(),
                                    "DetailsBorderColor": $('#border-color-details').val(),
                                    "DetailsBorderRadius": $('#border-radius-details').val(),
                                    "IsDetailsHeader": $('#DetailHeader_collapase').prop("checked"),
                                    "Height": $("#ddlheight").val() + 'px',
                                    "Width": $('#ddlWidth').val(),
                                    "ReportCollapase": $('#report_collapase').prop("checked"),
                                    "KPI_LinkReportLabelName": $('#txt_LinkReportLabelName').val(),
                                    "KPI_ValueHidden": $("#value_1_hidden[type='checkbox']").is(":checked") + "," + $("#value_2_hidden[type='checkbox']").is(":checked") + "," + $("#value_3_hidden[type='checkbox']").is(":checked")
                                };
                            let viewallstages = true;
                            if (WidgetId != 0 && ($("#hf_viewallstages").val() == 'false')) {
                                viewallstages = false;
                            }
                            let CustomHtml = '';
                            if ($('#designsPreviewAppend textarea').length != 0) {
                                CustomHtml = $('#designsPreviewAppend textarea').val().toString();
                            }
                            else {
                                CustomHtml = instance.customHtml;
                            }
                            let PostData = {
                                WidgetId: WidgetId,
                                PortletWidgetId: Number($('#portlewidgetid').val()),
                                PortletWidgetHeight: Number($('#ddlheight').val()),
                                IsCollapse: $('#report_collapase').prop("checked"),
                                WidgetName: $("#txt_WidgetName").val().toString(),
                                WidgetTypeId: Number($("#ddlWidgetType option:selected").val()),
                                WidgetFormatId: Number($("#ddlWidgetFormat option:selected").val()),
                                Width: Number($("#ddlWidth option:selected").val()),
                                IsMandatory: Boolean(ismandatory),
                                Data: TableData,
                                CssProperty: JSON.stringify(CssPropertyData),
                                DetailWidgetData: DetailWidgetTableData,
                                ImageUrl: $("#txt_ImageFile").text(),
                                WidgetUrl: ($("#txt_WidgetUrlFile").val()).toString(),
                                WidgetLayoutId: Number(WidgetType),
                                WidgetDesignId: Number($("#ddlWidgetDesign").val()),
                                Parameters: parameter,
                                IconName: iconName,
                                ReportId: Number(reportid),
                                Highlighter: highlighter,
                                AppProviders: "",
                                AppProviderIds: AppproviderIds,
                                UniqueId: uniqueName,
                                AppConfigurationData: ConfugarationsData,
                                Height: Number(0.0),
                                X: Number(0.0),
                                Y: Number(0.0),
                                ViewAllStages: viewallstages,
                                StaticJsPath: $(".summernote_StaticJsFunction").val().toString(),
                                DeleteConfigurationIds: Widget.Instance().DeleteConfigurationIds,
                                CustomHtml: CustomHtml
                            };
                            $.when(Unibase.Platform.Widgets.Managers.WidgetManager.Instance().saveWidget(PostData)).then(function (response) {
                                if (response.status == 0) {
                                    let message = $("#txt_WidgetName").val().toString() + " Widget Updated Successfully";
                                    if (WidgetId == 0)
                                        message = $("#txt_WidgetName").val().toString() + " Widget Saved Successfully";
                                    MessageHelper.Instance().showSuccess(message, 'bizgaze_ValidationSummary');
                                    $("#btn-widget-close").trigger('click');
                                    $("#bizgaze_body").addClass("edit-dashboard-mode");
                                    $('.biz-pg-wrapper.biz-secondary-color').find('._bizgaze_detail_container.bg-cyan-light-5-removed').last().removeClass('hidden');
                                    instance.loadNewWidgets("PageWidgets", true, InstalledAppId);
                                    instance.loadNewWidgets("CommonWidgets", true, InstalledAppId);
                                    instance.loadNewWidgets("AddedWidgets", true, InstalledAppId);
                                }
                                else {
                                    MessageHelper.Instance().showError(response.message, "bizgaze_ValidationSummary");
                                }
                            });
                        });
                    }
                    getConfigurations(uniqueId, InstalledAppId) {
                        var Confugarations = new Array();
                        var Configurationlist = [];
                        var isDefault = 0;
                        var ungrouped = 0;
                        var excludefromlock = 0;
                        let WidgetId = Number($("#hf_WidgetId").val());
                        $(".AppConfigurations").find(".AppConfig-row").each(function (e) {
                            let item = $(this).find(".SettingName");
                            if (item.length != 0) {
                                var formroles = [];
                                $(this).find('.formroles').each(function (e) {
                                    var id = $(this).attr("id");
                                    var formid = Number($("#hidden_" + id + "_formid").val());
                                    var roleid = Number($("#hidden_" + id + "_roleid").val());
                                    var formroleid = Number($("#hidden_" + id + "_formroleid").val());
                                    var obj = {
                                        FormId: formid,
                                        RoleId: roleid,
                                        FormRoleId: formroleid,
                                        DefaultSaveSetting: 1,
                                        AppConfigurationId: 0,
                                        IsDuplicateForm: false,
                                        JsText: $(this).find(".note-editable").text()
                                    };
                                    formroles.push(obj);
                                });
                                let id = item[0].id.split('_');
                                let len = id[2];
                                if ($(this).find("#txt_SettingName_" + len + "").val() != undefined) {
                                    let InstalledAppGuid = "";
                                    if ($("#chkIsDefault_" + len + "").is(':checked') == true) {
                                        isDefault = 1;
                                    }
                                    else {
                                        isDefault = 0;
                                    }
                                    if ($("#chkUngrouped_" + len + "").is(':checked') == true) {
                                        ungrouped = 1;
                                    }
                                    else {
                                        ungrouped = 0;
                                    }
                                    if ($("#chkExcludeFromLock_" + len + "").is(':checked') == true) {
                                        excludefromlock = 1;
                                    }
                                    else {
                                        excludefromlock = 0;
                                    }
                                    let SettingName = $(this).find("#txt_SettingName_" + len + "").val().toString();
                                    let SettingURL = $(this).find("#txt_SettingURL_" + len + "").val().toString();
                                    let SettingUrlType = $(this).find("#ddlSettingUrlType_" + len + "").val();
                                    let RoleSetting = 0;
                                    if ($(this).find("#txt_RoleSetting_" + len + " option:selected").val() != undefined)
                                        RoleSetting = Number($(this).find("#txt_RoleSetting_" + len + " option:selected").val());
                                    let Permission = $(this).find("#ddlPermission_" + len + " option:selected").val();
                                    let AppConfigType = $(this).find("#ddlAppConfigType_" + len + " option:selected").val();
                                    let Icon = "";
                                    if ($("#ddlAppConfigIcon_" + len).val() != "0" && $("#ddlAppConfigIcon_" + len).val() != null)
                                        Icon = $(this).find("#ddlAppConfigIcon_" + len + " option:selected").val().toString();
                                    let IsDefault = isDefault;
                                    let FormInstalledAppId;
                                    FormInstalledAppId = Number($(this).find("#ddlFormInstallAppId_" + len).val());
                                    if (FormInstalledAppId == undefined) {
                                        FormInstalledAppId = 0;
                                    }
                                    let Ungrouped = ungrouped;
                                    let FormId = $(this).find("#ddlFormUniqueKey_" + len + " option:selected").val();
                                    if (FormId == undefined)
                                        FormId = 0;
                                    let FormUniqueId = $(this).find("#hfFormUniqueIdAutoComplete_" + len + "").val();
                                    let JsFunction = HtmlHelper.getHelper().encode($("#summernote_JsFunction_" + len + "").val());
                                    let PropertyIndex = $(this).find("#row5").text();
                                    let UniqueId = uniqueId + "_AppConfiguration_" + SettingName;
                                    let SettingDesignhtml = "";
                                    let dynamicjs = "";
                                    if (Number(AppConfigType) == 6 || Number(AppConfigType) == 3) {
                                        SettingDesignhtml = HtmlHelper.getHelper().encode($("#txt_SettingDesignhtml_" + len).val().toString());
                                    }
                                    if (SettingUrlType == "3") {
                                        dynamicjs = HtmlHelper.getHelper().encode($("#txt_DynamicJs_" + len).val().toString());
                                    }
                                    var deleteconfig = "";
                                    if (JSON.parse(AppConfigType.toString()) == 3 || $(this).find('.AppConfigType option:selected').val() == 5) {
                                        if ($('#ddlSettingUrlType_' + len + ' option:selected').val() == 1) {
                                            deleteconfig = ($(this).find('.deleteconfig_config').val()).toString();
                                        }
                                    }
                                    var widgetid = $("#ddlWidgets_" + len + "").val();
                                    if (widgetid == undefined || widgetid == "") {
                                        widgetid = 0;
                                    }
                                    var formsize = $(this).find("#ddlFormSize_" + len + " option:selected").val();
                                    if (Number(SettingUrlType) != 1) {
                                        formsize = Unibase.Platform.Helpers.Size.None;
                                    }
                                    var dashboardid = $(this).find("#ddlDashboard_" + len + " option:selected").val();
                                    if (dashboardid == undefined) {
                                        dashboardid = 0;
                                    }
                                    var dashboardgroupid = $(this).find("#ddlDashboardGroup_" + len + " option:selected").val();
                                    if (dashboardgroupid == undefined) {
                                        dashboardgroupid = 0;
                                    }
                                    if ($(this).find("#txt_SettingName_" + len + "").val() != "") {
                                        var Configurations = {
                                            AppConfigurationId: Number($(this).find('.hf_AppConfigurationId').val()),
                                            SettingName: SettingName,
                                            DeleteConfigurationIds: deleteconfig,
                                            SettingUrl: SettingURL.toString(),
                                            SettingUrlType: JSON.parse(SettingUrlType.toString()),
                                            Permission: JSON.parse(Permission.toString()),
                                            AppConfigType: JSON.parse(AppConfigType.toString()),
                                            FormId: Number(FormId),
                                            Icon: Icon,
                                            LinkWidgetId: Number(widgetid),
                                            UniqueKey: '',
                                            Ungrouped: Boolean(Ungrouped),
                                            InstalledAppId: Number(FormInstalledAppId),
                                            IsDefault: Boolean(IsDefault),
                                            FormInstalledAppId: 0,
                                            FormUniqueId: FormUniqueId.toString(),
                                            JsFunction: JsFunction.toString(),
                                            PropertyIndex: Number(PropertyIndex),
                                            FormRoles: formroles,
                                            UniqueId: $(this).find('.hf_AppConfigurationUniqueId').val().toString(),
                                            InstalledAppGuid: InstalledAppGuid,
                                            SettingDesignHtml: SettingDesignhtml,
                                            DynamicJs: dynamicjs,
                                            AppPermissionId: Number(RoleSetting),
                                            FormSize: JSON.parse(formsize.toString()),
                                            DashboardId: Number(dashboardid),
                                            DashboardGroupId: Number(dashboardgroupid),
                                            ExcludeFromLock: Boolean(excludefromlock)
                                        };
                                        Configurationlist.push(Configurations);
                                    }
                                }
                            }
                        });
                        return Configurationlist;
                    }
                    loadWidgetData(wid, InstalledAppId, ispreview, PortletWidgetId, IsFromAddWidget) {
                        $("#bizgaze_body").removeClass("edit-dashboard-mode");
                        $(".biz-submenu").css({ "z-index": "1040" });
                        $(".biz-layout-3-left-nav").css({ "z-index": "1040" });
                        $(".toplayout-structures-panel").css({ "z-index": "1040" });
                        var instance = this;
                        var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                        EditMode[0].mode = 'Edit_Mode';
                        EditMode[0].defaultMode = "editing";
                        this.navigationHelper.popup(InstalledAppId, "", Widget.Instance(), function () {
                            $('#portlewidgetid').val(PortletWidgetId);
                            if (PortletWidgetId == undefined || PortletWidgetId == null) {
                                PortletWidgetId = 0;
                            }
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getWidget(wid).then(function (widgetresponse) {
                                $("#hd_WidgetName").text("Edit Widget");
                                $("#hf_viewallstages").val(String(widgetresponse.result.ViewAllStages));
                                var widgetData = widgetresponse.result, PortletWidgetHeight, csspropertyJSON;
                                instance.widgetDesignNameRes = widgetData.WidgetDesignName;
                                if (widgetData.WidgetDesignId == 0) {
                                    instance.backOption = 'Mode-1';
                                }
                                else {
                                    instance.backOption = 'Mode-2';
                                }
                                if (IsFromAddWidget) {
                                    instance.loadEditData(widgetData, null, IsFromAddWidget, InstalledAppId);
                                }
                                else {
                                    Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getPortletWidget(PortletWidgetId).then(function (portletWidgetResponse) {
                                        instance.loadEditData(widgetData, portletWidgetResponse.result, IsFromAddWidget, InstalledAppId);
                                    });
                                }
                            });
                        }, Platform.Helpers.Size.ExtraLarge);
                    }
                    loadEditData(widgetData, portletWidgetData, isFromAddWidget, appId) {
                        var instance = this, csspropertyJSON, PortletWidgetHeight, PortletWidgetId;
                        if (isFromAddWidget) {
                            if (widgetData.CssProperty == null) {
                                MessageHelper.Instance().showError("CssProperty is  null", "bizgaze_ValidationSummary");
                                return false;
                            }
                            csspropertyJSON = JSON.parse(widgetData.CssProperty);
                            PortletWidgetHeight = '';
                            PortletWidgetId = 0;
                        }
                        else {
                            if (portletWidgetData.PortletWidgetCss != null && portletWidgetData.PortletWidgetCss != "") {
                                csspropertyJSON = JSON.parse(portletWidgetData.PortletWidgetCss);
                                PortletWidgetHeight = portletWidgetData.PortletWidgetHeight;
                            }
                            else {
                                if (widgetData.CssProperty == null) {
                                    MessageHelper.Instance().showError("CssProperty is  null", "bizgaze_ValidationSummary");
                                    return false;
                                }
                                csspropertyJSON = JSON.parse(widgetData.CssProperty);
                                PortletWidgetHeight = '';
                            }
                            PortletWidgetId = portletWidgetData.PortletWidgetId;
                        }
                        let CssProperty = [{
                                "BorderWidth": csspropertyJSON[0].BorderWidth,
                                "BorderColor": csspropertyJSON[0].BorderColor,
                                "BorderType": csspropertyJSON[0].BorderType,
                                "BorderRadius": csspropertyJSON[0].BorderRadius,
                                "FontSize": csspropertyJSON[0].FontSize,
                                "FontFamily": csspropertyJSON[0].FontStyle,
                                "BackgroundColor": csspropertyJSON[0].BackgroundColor,
                                "ListStyleType": csspropertyJSON[0].ListStyleType,
                                "DetailsBorderType": csspropertyJSON[0].DetailsBorderType,
                                "DetailsBorderWidth": csspropertyJSON[0].DetailsBorderWidth,
                                "DetailsBorderColor": csspropertyJSON[0].DetailsBorderColor,
                                "DetailsBorderRadius": csspropertyJSON[0].DetailsBorderRadius,
                            }];
                        var array = [], previewResponse, result;
                        var parameters = {
                            WidgetId: widgetData.WidgetId,
                            PortletWidgetId: 2250,
                            InstalledAppId: 0,
                            InputParameters: [],
                            FromDate: '',
                            ToDate: '',
                        };
                        $("#font-size").val(csspropertyJSON[0].FontSize);
                        $("#font-style").val(csspropertyJSON[0].FontStyle);
                        $("#border-type").val(csspropertyJSON[0].BorderType);
                        $("#border-width").val(csspropertyJSON[0].BorderWidth);
                        $("#border-color").val(csspropertyJSON[0].BorderColor).trigger('change');
                        $("#backgroundcolor-color-picker").val(csspropertyJSON[0].BackgroundColor).trigger('change');
                        $("#border-radius").val(csspropertyJSON[0].BorderRadius);
                        $("#backgroundcolor").css({ 'background-color': csspropertyJSON[0].BackgroundColor });
                        $('#backgroundcolor').attr('data-backgroundcolor', csspropertyJSON[0].BackgroundColor);
                        $("#ddlWidth").val(widgetData.Width);
                        $('#list-style-type').val(csspropertyJSON[0].ListStyleType);
                        $('#border-type-details').val(csspropertyJSON[0].DetailsBorderType);
                        $('#border-width-details').val(csspropertyJSON[0].DetailsBorderWidth);
                        $('#border-color-details').val(csspropertyJSON[0].DetailsBorderColor);
                        $('#border-radius-details').val(csspropertyJSON[0].DetailsBorderRadius);
                        if (csspropertyJSON[0].IsDetailsHeader == true) {
                            $('#DetailHeader_collapase').attr("checked", "true");
                        }
                        let kpihidden = [];
                        if (csspropertyJSON[0].KPI_ValueHidden != '' && csspropertyJSON[0].KPI_ValueHidden != null) {
                            kpihidden = csspropertyJSON[0].KPI_ValueHidden.split(',');
                        }
                        if (csspropertyJSON[0].KPI_LinkReportLabelName != undefined && csspropertyJSON[0].KPI_LinkReportLabelName != null && csspropertyJSON[0].KPI_LinkReportLabelName != '') {
                            $('#txt_LinkReportLabelName').val(csspropertyJSON[0].KPI_LinkReportLabelName);
                        }
                        $('#ddlheight').val(PortletWidgetHeight);
                        if (!isFromAddWidget && portletWidgetData.PortletWidgetCss != '' && portletWidgetData.PortletWidgetCss != undefined) {
                            if (portletWidgetData.IsCollapse != true) {
                                $('#report_collapase').removeAttr("checked");
                            }
                            else {
                                $('#report_collapase').attr("checked", "true");
                            }
                            if (kpihidden[0] == 'true' && kpihidden[0] != '' && kpihidden[0] != null && kpihidden[0].length != 0) {
                                $('#value_1_hidden ').attr("checked", "true");
                            }
                            else {
                                $('#value_1_hidden ').removeAttr("checked");
                            }
                            if (kpihidden[1] == 'true' && kpihidden[1] != '' && kpihidden[1] != null && kpihidden[1].length != 0) {
                                $('#value_2_hidden ').attr("checked", "true");
                            }
                            else {
                                $('#value_2_hidden ').removeAttr("checked");
                            }
                            if (kpihidden[2] == 'true' && kpihidden[2] != '' && kpihidden[2] != null && kpihidden[2].length != 0) {
                                $('#value_3_hidden ').attr("checked", "true");
                            }
                            else {
                                $('#value_3_hidden ').removeAttr("checked");
                            }
                        }
                        else {
                            if (csspropertyJSON[0].ReportCollapase == true) {
                                $('#report_collapase').attr("checked", "true");
                            }
                            if (kpihidden[0] == 'true' && kpihidden[0] != '' && kpihidden[0] != null && kpihidden[0].length != 0) {
                                $('#value_1_hidden ').attr("checked", "true");
                            }
                            else {
                                $('#value_1_hidden ').removeAttr("checked");
                            }
                            if (kpihidden[1] == 'true' && kpihidden[1] != '' && kpihidden[1] != null && kpihidden[1].length != 0) {
                                $('#value_2_hidden ').attr("checked", "true");
                            }
                            else {
                                $('#value_2_hidden ').removeAttr("checked");
                            }
                            if (kpihidden[2] == 'true' && kpihidden[2] != '' && kpihidden[2] != null && kpihidden[2].length != 0) {
                                $('#value_3_hidden ').attr("checked", "true");
                            }
                            else {
                                $('#value_3_hidden ').removeAttr("checked");
                            }
                        }
                        if (widgetData.ImageUrl != "" && widgetData.ImageUrl != null) {
                            $("#txt_ImageFile").css({ "color": "transparent", "height": "40px", "width": "100px" });
                            $("#lblImage2").removeClass("hidden");
                            $("#div_WidgetImageFile").addClass("floating-label-form-group-with-value");
                            var widgetUrl = widgetData.ImageUrl.split("\\");
                            var wUrl = widgetUrl[widgetUrl.length - 1];
                            $("#lblImage2").text(wUrl);
                        }
                        $("#txt_WidgetName").val(widgetData.WidgetName);
                        $("#txt_WidgetUniqueName").val(widgetData.UniqueId);
                        $("#hf_WidgetId").val(widgetData.WidgetId);
                        $(".summernote_StaticJsFunction").val(widgetData.StaticJsPath);
                        $('#btn-widget-builder-reset').attr('onClick', 'Unibase.Platform.Widgets.Components.Widget.Instance().resetWidget(' + widgetData.WidgetId + ')');
                        let bottombar = '10px solid ' + csspropertyJSON[0].BorderColor;
                        jQuery("#ddlWidgetType").val(widgetData.WidgetTypeId).trigger('change');
                        jQuery("#ddlWidgetLayout").val(widgetData.WidgetLayoutId);
                        Widget.Instance().bindWidgetDesigns(widgetData.WidgetDesignId, widgetData.WidgetLayoutId);
                        Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getAppWidgetProviderById(widgetData.WidgetId).then(function (appresponse) {
                            if (appresponse.result != null)
                                Widget.Instance().InstalledAppInfo(appresponse.result, appId);
                        });
                        jQuery("#ddlWidth").val(widgetData.Width).trigger('change');
                        $('#chkIsMandatory').prop("checked", widgetData.IsMandatory);
                        if (widgetData.Highlighter != null) {
                            var ColorCodeVal = $("#ddlColorCode").find("option:contains('" + widgetData.Highlighter + "')").val();
                            $("#ddlColorCode").append('<option value="' + ColorCodeVal + '">' + widgetData.Highlighter + '</option>');
                        }
                        jQuery("#ddlWidgetFormat").val(widgetData.WidgetFormatId).trigger('change');
                        if (widgetData.IconName != null) {
                            var IconNameSubStr = widgetData.IconName.substring(6);
                            var iconVal = $("#ddlIcon").find("option:contains('" + IconNameSubStr + "')").val();
                            $("#ddlIcon").val(iconVal).trigger('change.select2');
                        }
                        if (widgetData.Parameter != "" && widgetData.Parameter != null) {
                            $('#ulparamers').empty();
                            $('#bindParameterList').empty();
                            let parameterHeader = '<li class="bindParamterRow"> <div class="row font-14 box-shadow row-item ui-sortable-handle"> <div class="col-md-1 col-1 hidden border p-2 text-center"> <span class="text-dark font-weight-500">Index</span> </div><div class="col-md-12 col-12"> <div class="parameterrowheading font-14 row text-center font-weight-500"> <div class="col-sm-5 col-5 p-2 border"> Parameter Name</div><div class="col-sm-2 col-2 p-2 border"> Operator</div><div class="col-sm-5 col-5 p-2 border"> <span id="row3">Value</span> </div></div></div></div></li>';
                            $('#ulparamers').append(parameterHeader);
                            var parameterArray = [], parameterArraySplit = [];
                            parameterArray = widgetData.Parameter.split('|');
                            for (var t = 1; t <= parameterArray.length; t++) {
                                parameterArraySplit = parameterArray[t - 1].split(':');
                                $('#ulparamers').append('<li class="bindParamterRow row-item-li" id="rowId_' + t + '"> <div class="row font-14 box-shadow row-item ui-sortable-handle"> <div class="col-md-1 hidden col-1 border p-2 text-center"> <span id="row5" class="text-dark rowNum">' + t + '</span> </div><div class="col-md-12 col-12"> <div class="parameterrowheading font-14 row text-center"> <input type="hidden" id="row0" value="0"> <div class="col-sm-5 col-5 p-2 border"> <label id="row1">' + parameterArraySplit[0] + '</label></div><div class="col-sm-2 col-2 p-2 border"> <label id="row2">' + parameterArraySplit[1] + '</label></div><div class="col-sm-5 col-5 p-2 border d-flex flex-row"> <span id="row3">' + parameterArraySplit[2] + '</span> <span id="delete_row" class="btn fa fa-times ml-auto fa-lg text-danger" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteParameterRow(this)"></span> </div><input type="hidden" id="row4" value=' + parameterArraySplit[4] + '> <input type="hidden" id="row6" value=' + parameterArraySplit[3] + '> </div></div></div></li>');
                                $('#bindParameterList').append('<li class="d-flex flex-column bg-light my-3 p-2 rounded-2 rowId_' + t + '" data-rowId="rowId_' + t + '"> <div class="d-flex flex-row text-dark"> <span class="border-bottom border-dashed border-dark p-1">' + parameterArraySplit[0] + '</span> <a href="javascript:void(0);" class=" my-auto ml-auto px-2" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteParameterRow(this);" > <i class="fa p-1 fa-trash text-danger"></i> </a> </div></li>');
                            }
                        }
                        let layoutName = "user";
                        if (widgetData.WidgetLayoutId == 0)
                            layoutName = "user";
                        else
                            layoutName = widgetData.WidgetLayoutName;
                        var lowercase = layoutName.toLowerCase();
                        $("#userDefinedDiv, #DetailDiv, #KPIDiv, #ListDiv").addClass("hidden");
                        if (RegExp("user").test(lowercase)) {
                            $("#txt_WidgetUrlFile").val(widgetData.WidgetUrl);
                            $('#option-back').removeClass('hidden');
                            $('.ReportDiv').addClass('hidden').find('#ddlReport').removeClass('required');
                            $('#bldrHeaderNavTabs .nav-link[href!="tab_preview"]').addClass('hidden');
                            $('#Preview-Designs').removeClass('hidden');
                            $('.userDesignedURL').removeClass('hidden');
                            $('#ddlheight').removeClass('required');
                            $("#frmUnibase_widgetBuilderAppearance").find(".card-header").addClass("d-none").removeClass("d-flex");
                            $('#editFontSection').addClass("d-none").removeClass("d-flex");
                            if (appId == 0) {
                                $('#ddlwidthOnEdit').children().addClass('d-none');
                                $('#ddlwidthOnEdit').addClass("d-none").removeClass("d-flex flex-column");
                            }
                            if (appId != 0) {
                                $('#kpiheight').children().addClass('d-none');
                            }
                            $('#ddlWidgetDesign').removeClass('required');
                            let widgeturl = [];
                            widgeturl = widgetData.WidgetUrl.toString().split(',');
                            var viewerComponent = widgeturl[1] + ".init('designsPreviewAppend');";
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            EditMode[0].mode = 'Create_Mode';
                            instance.fileCacheHelper.loadJsFile(widgeturl[0], function () {
                                eval(viewerComponent);
                            });
                        }
                        if (RegExp("detail").test(lowercase)) {
                            $("#DetailDiv").removeClass("hidden");
                            $('#ddlheight').removeClass('required');
                            if (appId == 0) {
                                $('#ddlwidthOnEdit').children().addClass('d-none');
                                $('#ddlwidthOnEdit').addClass("d-none").removeClass("d-flex flex-column");
                            }
                            if (appId != 0) {
                                $('#kpiheight').children().addClass('d-none');
                            }
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getDetailWidget(widgetData.WidgetId).then(function (detailresponse) {
                                var detailsData = detailresponse.result;
                                var detailcssProperty = JSON.parse(detailresponse.result.CssProperty);
                                $("#ddlColumns").empty();
                                $('.sortable').empty();
                                if (detailsData.ReportId != 0)
                                    $("#ddlReport").append('<option value="' + detailsData.ReportId + '">' + detailsData.ReportName + '</option>');
                                jQuery("#ddlReport").val(detailsData.ReportId).trigger('change');
                                $.when(Unibase.Platform.Analytics.Managers.ReportManager.Instance().getColumns(detailsData.ReportId)).done(function (columns) {
                                    if (columns.result != null) {
                                        let html = "<option value=''>Select Column</option>";
                                        for (let i = 0; i < columns.result.length; i++) {
                                            var reportcolumn = columns.result[i];
                                            var template = Unibase.Widgets.Widget_Template.Instance().loadReportColumnDropdownTemplate();
                                            var templateScript = Handlebars.compile(template);
                                            var context = { "ReportColumnId": reportcolumn.ReportColumnId, "ReportColumnName": reportcolumn.ReportColumnName };
                                            html += templateScript(context);
                                        }
                                        $("#ddlColumns").html(html);
                                    }
                                });
                                $("#txt_DetaillinkURL").val(detailsData.LinkUrl);
                                if (detailsData.Icon != null) {
                                    var detailsDataIconSubStr = detailsData.Icon.substring(6);
                                    var detailIconVal = $("#ddlDetailIcon").find("option:contains('" + detailsDataIconSubStr + "')").val();
                                    $("#ddlDetailIcon").val(detailIconVal).trigger('change.select2');
                                }
                                for (var j = 0; j < detailsData.DetailsWidgetProperties.length; j++) {
                                    if (detailsData.DetailsWidgetProperties[j].ConverterType == 1) {
                                        var conv = "Round Number";
                                    }
                                    else if (detailsData.DetailsWidgetProperties[j].ConverterType == 2) {
                                        var conv = "Local Date";
                                    }
                                    else {
                                        var conv = "None";
                                    }
                                    var value = detailsData.DetailsWidgetProperties[j].Value.match("{{(.*)}}");
                                    $('.sortable').append('<li class="list-group-item border-0 column-item ui-sortable-handle bg-light my-2 p-2 d-flex justify-content-between" id="columnId_' + (j + 1) + '"> <span class="font-15 d-flex align-items-center text-dark "> <i class="fa fa-sort mr-2"></i> ' + detailsData.DetailsWidgetProperties[j].Label + '</span> <span class="pull-left media-xs mr-30 hidden"> <i class="fa fa-sort text-muted fa mr-10"></i> <span id="row5" class="text-dark rowNum">' + (j + 1) + '</span> </span><div class="d-flex flex-row"> <span id="edit_row " class="px-2 my-auto fa fa-pencil text-dark" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().EditReportColumnRow(this)"></span> <span id="delete_row" class="px-2 my-auto fa fa-times fa-lg text-danger border-left border-2 text dark" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().deleteReportColumnRow(this)"></span></div><div class="clear hidden"><div class="stageheading"> <input type="hidden" id="row0" value="' + detailsData.DetailsWidgetProperties[j].DetailsWidgetPropertyId + '" /> <input type="hidden" id="ConverterType" value="' + detailsData.DetailsWidgetProperties[j].ConverterType + '" /> <input type="hidden" id="row6" value="' + detailsData.DetailsWidgetProperties[j].ConverterValue + '"> <label class="col-sm-2" id="row1">' + value[1] + '</label> <label class="col-sm-2 mr-10" id="row2">' + conv + '</label> <label class="col-sm-3" id="row3">' + detailsData.DetailsWidgetProperties[j].Label + '</label> <label class="col-sm-2" id="row4">' + detailsData.DetailsWidgetProperties[j].HyperLink + '</label><div></div></li>');
                                }
                                array.push({ "WidgetName": $('#txt_WidgetName').val(), "PortletWidgetId": 2250 });
                                var viewertype = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === instance.widgetDesignNameRes; });
                                var classname = JSON.parse(viewertype[0].defaultsettings).classname;
                                var viewerComponent = new Unibase.Themes.Compact.DetailWidgets[classname]();
                                if (instance.widgetDesignNameRes == 'Details_Custom') {
                                    let customArray = [];
                                    customArray.push({ "DetailContainerId": "", "InstalledAppId": 0, "PortletWidgetId": 2250, "ReportId": widgetData.ReportId, "StaticJsPath": widgetData.StaticJsPath, "WidgetId": 0, "WidgetName": detailresponse.result.WidgetName, "WidgetParameters": widgetData.Parameter });
                                    var htmlC = viewerComponent.html(customArray, 'containerId', null);
                                    $('#designsPreviewAppend').html(htmlC);
                                    viewerComponent.loadData(customArray, 'containerId', null);
                                }
                                else {
                                    var html = viewerComponent.html(array, 0);
                                    $('#designsPreviewAppend').html(html);
                                    viewerComponent.loadResponseData(2250, "designsPreviewAppend", parameters, PortletWidgetId);
                                }
                                $(`${"li.KPIDesigns"}[data-designs="${instance.widgetDesignNameRes}"]`).append('<div class="d-flex justify-content-end"><span class="bg-success rounded-circle p-1 position-absolute mr-2" style="margin-top:-40px;"><i class="la la-check font-24 text-white"></i></span></div>');
                                $('#layoutDetails').append('<span class="bg-success mt-180 rounded-circle p-1 position-absolute"><i class="la la-check font-24 text-white"></i></span>');
                                var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                                EditMode[0].mode = 'Create_Mode';
                            });
                        }
                        if (RegExp("kpi").test(lowercase)) {
                            $("#KPIDiv").removeClass("hidden");
                            if (appId == 0) {
                                $('#ddlwidthOnEdit').children().addClass('d-none');
                                $('#ddlwidthOnEdit').addClass("d-none").removeClass("d-flex flex-column");
                            }
                            $('.font-Family-section').addClass('d-none').removeClass("d-flex flex-column");
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getKPIWidget(widgetData.WidgetId).then(function (kpiresponse) {
                                var kpiData = kpiresponse.result;
                                var SelectedColumnArray = [], SelectedColumnLabelArray = [];
                                SelectedColumnArray = kpiData.Selected_Columns.split(',');
                                if (kpiData.Selected_Columns_Labels == null || kpiData.Selected_Columns_Labels == undefined) {
                                    let columnlabel = ['Label-1', 'Label-2', 'Label-3'];
                                    SelectedColumnLabelArray.push(columnlabel);
                                }
                                else {
                                    SelectedColumnLabelArray = kpiData.Selected_Columns_Labels.split(',');
                                }
                                if (kpiData.KpiSetting != '' && kpiData.KpiSetting != '' && kpiData.KpiSetting != undefined) {
                                    let dataType = [], isRoundOff = [], j = 1;
                                    dataType = JSON.parse(kpiData.KpiSetting)[0].DataType.split(',');
                                    isRoundOff = JSON.parse(kpiData.KpiSetting)[0].IsRoundOff.split(',');
                                    for (let k = 0; k < isRoundOff.length; k++) {
                                        if (dataType[k] != '' && dataType[k] != null && dataType[k] != undefined) {
                                            $('#kpidataType_' + (k + j)).val(dataType[k]);
                                        }
                                        if (isRoundOff[k] != '' && isRoundOff[k] != null && isRoundOff[k] != undefined && isRoundOff[k] == 'true') {
                                            $('#kpi_isroundoff_' + (k + j) + '[type="checkbox"]').attr('checked', 'true');
                                        }
                                    }
                                }
                                $("#txt_KPIlinkURL").val(kpiData.LinkUrl);
                                if (kpiData.Color != null && kpiData.Color != "") {
                                    var ColorCodeVal = $("#ddlKPIColor").find("option:contains('" + kpiData.Color + "')").val();
                                    $("#ddlKPIColor").append('<option value="' + ColorCodeVal + '">' + kpiData.Color + '</option>');
                                }
                                if (kpiData.Icon != null && kpiData.Icon != "") {
                                    $("#hf_KPIIconPath").val(kpiData.Icon);
                                    var data = new Unibase.Platform.Helpers.File();
                                    instance.ImageData = { 'FileName': kpiData.FileName, 'FileType': kpiData.FileType, 'FileData': kpiData.FileData, 'FilePath': kpiData.Icon };
                                    $("#txt_KPIImageFile").css({ "color": "transparent", "height": "40px", "width": "100px" });
                                    $("#lblKPIImage2").removeClass("hidden");
                                    $("#div_WidgetKPIImageFile").addClass("floating-label-form-group-with-value");
                                    var kpiUrl = kpiData.Icon.split("/");
                                    var kUrl = kpiUrl[kpiUrl.length - 1];
                                    let html = '<span class="d-flex justify-content-between"><span>' + kUrl + '</span><a href="javascript:;" class="ml-2 delete-icon-kpi text-danger"><i class="las la-times"></i></a></span>';
                                    $("#lblKPIImage2").html(html);
                                    $('.delete-icon-kpi').on('click', function () {
                                        $(this).parent().addClass('invisible');
                                        Unibase.Platform.Widgets.Components.Widget.Instance().ImageData = undefined;
                                    });
                                }
                                if (PortletWidgetHeight == undefined || PortletWidgetHeight == 0) {
                                    PortletWidgetHeight = kpiData.KpiHeight;
                                    $('#ddlheight').val(PortletWidgetHeight.replace(/px/g, ''));
                                }
                                else {
                                    $('#ddlheight').val(PortletWidgetHeight);
                                }
                                if (kpiData.LinkReportId != 0 && kpiData.LinkReportId != null) {
                                    $("#ddlLinkReportId").append('<option value="' + kpiData.LinkReportId + '">' + kpiData.LinkReportName + '</option>');
                                    jQuery("#ddlLinkReportId").val(kpiData.LinkReportId);
                                }
                                if (kpiData.ReportId != 0) {
                                    $("#ddlReport").append('<option value="' + kpiData.ReportId + '">' + kpiData.ReportName + '</option>');
                                    jQuery("#ddlReport").val(kpiData.ReportId).trigger('change');
                                }
                                var selected_columns = kpiData.Selected_Columns;
                                if (selected_columns != null || selected_columns != "") {
                                    var sp = selected_columns.split(',');
                                    var value_1 = sp[0];
                                    var value_2 = sp[1];
                                    var value_3 = sp[2];
                                }
                                $.when(Unibase.Platform.Analytics.Managers.ReportManager.Instance().getColumns(kpiData.ReportId)).done(function (columns) {
                                    if (columns.result != null) {
                                        let html = "<option value=''>Select Column</option>";
                                        for (let i = 0; i < columns.result.length; i++) {
                                            var reportcolumn = columns.result[i];
                                            var template = Unibase.Widgets.Widget_Template.Instance().loadReportColumnDropdownTemplate();
                                            var templateScript = Handlebars.compile(template);
                                            var context = { "ReportColumnId": reportcolumn.ReportColumnId, "ReportColumnName": reportcolumn.ReportColumnName };
                                            html += templateScript(context);
                                        }
                                        $("#ddlColumns").html(html);
                                        $("#ddlSelectedValue_1").html(html);
                                        $("#ddlSelectedValue_2").html(html);
                                        $("#ddlSelectedValue_3").html(html);
                                    }
                                    if ($("#ddlWidgetDesign option:selected").text() == "KPI_Default" || $("#ddlWidgetDesign option:selected").text() == "KPI_Icon" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithborder" || $("#ddlWidgetDesign option:selected").text() == "KPI_Left_Bar_color_Icon" || $('#ddlWidgetDesign option:selected').text() == "KPI_Icon_Bg_Color") {
                                        $("#div_Value1").removeClass('hidden');
                                        $("#div_Value2").addClass('hidden');
                                        $("#div_Value3").addClass('hidden');
                                        $("#ddlSelectedLabelValue_1").parent().addClass('hidden');
                                        $("#ddlSelectedValue_1 option").removeAttr("selected");
                                        $("#ddlSelectedValue_1").val($("#ddlSelectedValue_1 option[data-table=" + value_1 + "]").attr("value"));
                                    }
                                    else if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BottomBar_color" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BgColor" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_LineCenter" || $("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_PieIcon" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_ProgressBar" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_BgColor" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPie_Icon") {
                                        $("#div_Value1").removeClass('hidden');
                                        $("#div_Value2").removeClass('hidden');
                                        $("#div_Value3").addClass('hidden');
                                        if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BgColor") {
                                            $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                        }
                                        if ($("#ddlWidgetDesign option:selected").text() == "KPI_TwoValue_BottomBar_color") {
                                            $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                        }
                                        if ($("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_ProgressBar" || $("#ddlWidgetDesign option:selected").text() == "KPI_KPISingleValueWithPercentage_BgColor") {
                                            $("#ddlSelectedLabelValue_1").parent().addClass('hidden');
                                            $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                        }
                                        $("#ddlSelectedValue_1 option").removeAttr("selected");
                                        $("#ddlSelectedValue_1").val($("#ddlSelectedValue_1 option[data-table=" + value_1 + "]").attr("value"));
                                        $("#ddlSelectedValue_2 option").removeAttr("selected");
                                        $("#ddlSelectedValue_2").val($("#ddlSelectedValue_2 option[data-table=" + value_2 + "]").attr("value"));
                                    }
                                    else if (($("#ddlWidgetDesign option:selected").text() == "KPI_Comparison") || ($("#ddlWidgetDesign option:selected").text() == "KPI_ComparisonRightBar_color") || ($("#ddlWidgetDesign option:selected").text() == "KPI_ComparisonBottomBar_Color") || $("#ddlWidgetDesign option:selected").text() == "Kpi_fulfillment") {
                                        $("#div_Value1").removeClass('hidden');
                                        $("#div_Value2").removeClass('hidden');
                                        $("#div_Value3").removeClass('hidden');
                                        if ($("#ddlWidgetDesign option:selected").text() == "Kpi_fulfillment") {
                                            $("#ddlSelectedLabelValue_1").parent().removeClass('hidden');
                                            $("#ddlSelectedLabelValue_2").parent().removeClass('hidden');
                                            $("#ddlSelectedLabelValue_3").parent().removeClass('hidden');
                                        }
                                        else {
                                            $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                            $("#ddlSelectedLabelValue_3").parent().addClass('hidden');
                                        }
                                        $("#ddlSelectedValue_1 option").removeAttr("selected");
                                        $("#ddlSelectedValue_1").val($("#ddlSelectedValue_1 option[data-table=" + value_1 + "]").attr("value"));
                                        $("#ddlSelectedValue_2 option").removeAttr("selected");
                                        $("#ddlSelectedValue_2").val($("#ddlSelectedValue_2 option[data-table=" + value_2 + "]").attr("value"));
                                        $("#ddlSelectedValue_3 option").removeAttr("selected");
                                        $("#ddlSelectedValue_3").val($("#ddlSelectedValue_3 option[data-table=" + value_3 + "]").attr("value"));
                                    }
                                    else {
                                        $("#div_Value1").addClass('hidden');
                                        $("#div_Value2").addClass('hidden');
                                        $("#div_Value3").addClass('hidden');
                                        $("#ddlSelectedLabelValue_1").parent().addClass('hidden');
                                        $("#ddlSelectedLabelValue_2").parent().addClass('hidden');
                                        $("#ddlSelectedLabelValue_3").parent().addClass('hidden');
                                    }
                                    $('#ddlSelectedLabelValue_1').val(SelectedColumnLabelArray[0]);
                                    $('#ddlSelectedLabelValue_2').val(SelectedColumnLabelArray[1]);
                                    $('#ddlSelectedLabelValue_3').val(SelectedColumnLabelArray[2]);
                                });
                                var array = [], previewResponse, result;
                                var parameters = {
                                    WidgetId: widgetData.WidgetId,
                                    PortletWidgetId: 2250,
                                    InstalledAppId: 0,
                                    InputParameters: [],
                                    FromDate: Unibase.Platform.Helpers.NavigationHelper.commonFilter_FromDate,
                                    ToDate: Unibase.Platform.Helpers.NavigationHelper.commonFilter_ToDate
                                };
                                array.push({ "WidgetName": $('#txt_WidgetName').val(), "PortletWidgetId": 2250 });
                                var viewertype = instance.defautSettings.filter(function (o) { return o.WidgetDesignName === instance.widgetDesignNameRes; });
                                var classname = JSON.parse(viewertype[0].defaultsettings).classname;
                                var viewerComponent = new Unibase.Themes.Compact.KpiWidgets[classname]();
                                var html = viewerComponent.html(array, 0);
                                $('#designsPreviewAppend').html(html);
                                viewerComponent.loadResponseData(2250, "designsPreviewAppend", parameters, PortletWidgetId);
                                Unibase.Platform.Widgets.Components._Widget.Instance().KpiCode();
                                $(`${"li.KPIDesigns"}[data-designs="${instance.widgetDesignNameRes}"]`).append('<div class="d-flex justify-content-end"><span class="bg-success rounded-circle p-1 position-absolute mr-2" style="margin-top:-40px;"><i class="la la-check font-24 text-white"></i></span></div>');
                                $('#layoutKPI').append('<span class="bg-success mt-180 rounded-circle p-1 position-absolute"><i class="la la-check font-24 text-white"></i></span>');
                                var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                                EditMode[0].mode = 'Create_Mode';
                            });
                        }
                        if (RegExp("report").test(lowercase)) {
                            if (appId == 0) {
                                $('#ddlwidthOnEdit').children().addClass('d-none');
                                $('#ddlwidthOnEdit').addClass("d-none").removeClass("d-flex flex-column");
                                $("#frmUnibase_widgetBuilderAppearance").find(".card-header").addClass("d-none").removeClass("d-flex");
                                $('#editFontSection').addClass("d-none").removeClass("d-flex");
                                $('#kpiheight').removeClass('hidden');
                            }
                            if (appId != 0) {
                                $('#kpiheight').children().addClass('d-none');
                            }
                            $("#frmUnibase_widgetBuilderAppearance").find(".card-header").addClass("d-none").removeClass("d-flex");
                            $('#editFontSection').addClass("d-none").removeClass("d-flex");
                            $("#ddlReport").append('<option value="' + widgetData.ReportId + '">' + widgetData.ReportName + '</option>');
                            jQuery("#ddlReport").val(widgetData.ReportId).trigger('change');
                            $(`${"li.KPIDesigns"}[data-designs="${instance.widgetDesignNameRes}"]`).append('<div class="d-flex justify-content-end"><span class="bg-green-dark-2 mr-2 p-1 position-absolute rounded-circle" style="margin-top: -74px;"><i class="la la-check font-24 text-white"></i></span></div>');
                            $('#layoutChartReport').append('<span class="bg-success mt-180 rounded-circle p-1 position-absolute"><i class="la la-check font-24 text-white"></i></span>');
                            var obj = Unibase.Platform.Analytics.Components.ReportViewer.Instance();
                            setTimeout(function () {
                                instance.navigationHelper.popin(Number(widgetData.ReportId), 'designsPreviewAppend', obj, null);
                            }, 200);
                        }
                        if (RegExp("detail").test(lowercase) || RegExp("kpi").test(lowercase) || RegExp("report").test(lowercase)) {
                            var roleStng = "";
                            var AppConfigData;
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getAppConfigurationsByWidgetId(widgetData.WidgetId, appId).then(function (appconfigresponse) {
                                AppConfigData = appconfigresponse.result;
                                $('.configsortable').empty();
                                for (var i = 0; i < AppConfigData.length; i++) {
                                    $("#AppConfigurationDiv").removeClass("hidden");
                                    let len = Widget.Instance().addAppConfiguration(appId);
                                    $("#hf_AppConfigurationUniqueId_" + len + "").val(AppConfigData[i].UniqueId);
                                    $("#hf_AppConfigurationId_" + len + "").val(AppConfigData[i].AppConfigurationId);
                                    $("#txt_SettingName_" + len + "").val(AppConfigData[i].SettingName);
                                    $("#txt_SettingURL_" + len + "").val(AppConfigData[i].SettingUrl);
                                    var permissionoption = new Option(Unibase.Platform.Permissions.Enums.PermissionLevel[AppConfigData[i].Permission], AppConfigData[i].Permission.toString(), true);
                                    $("#ddlPermission_" + len + "").append(permissionoption);
                                    $("#ddlPermission_" + len + "").val(AppConfigData[i].Permission.toString()).trigger('change.select2');
                                    var appconfigoption = new Option(Unibase.Platform.Apps.Enums.AppConfigeType[AppConfigData[i].AppConfigType], AppConfigData[i].AppConfigType.toString(), true);
                                    $("#ddlAppConfigType_" + len + "").append(appconfigoption);
                                    $("#ddlAppConfigType_" + len + "").val(AppConfigData[i].AppConfigType.toString()).trigger('change');
                                    if (AppConfigData[i].Icon != null) {
                                        $("#ddlAppConfigIcon_" + len + "").append('<option value="' + AppConfigData[i].Icon + '">' + AppConfigData[i].Icon + '</option>');
                                        $("#ddlAppConfigIcon_" + len + "").val(AppConfigData[i].Icon).trigger('change.select2');
                                    }
                                    var settingurloption = new Option(Unibase.Platform.Apps.Enums.SettingUrlType[AppConfigData[i].SettingUrlType], AppConfigData[i].SettingUrlType.toString(), true);
                                    if (AppConfigData[i].LinkDashboardId != 0) {
                                        var dashboardoption = new Option(AppConfigData[i].DashboardName, AppConfigData[i].LinkDashboardId.toString(), true);
                                        $("#ddlDashboard_" + len + "").append(dashboardoption);
                                    }
                                    if (AppConfigData[i].LinkDashboardGroupId != 0) {
                                        var dashboardgroupoption = new Option(AppConfigData[i].DashboardGroupName, AppConfigData[i].LinkDashboardGroupId.toString(), true);
                                        $("#ddlDashboardGroup_" + len + "").append(dashboardgroupoption);
                                    }
                                    $("#ddlSettingUrlType_" + len + "").append(settingurloption);
                                    $("#ddlSettingUrlType_" + len + "").trigger('change');
                                    $('#ddlFormSize_' + len + ' option:nth(' + AppConfigData[i].FormSize + ')').prop("selected", "selected");
                                    $("#chkIsDefault_" + len + "").prop("checked", AppConfigData[i].IsDefault);
                                    $("#chkUngrouped_" + len + "").prop("checked", AppConfigData[i].Ungrouped);
                                    $("#chkExcludeFromLock_" + len + "").prop("checked", AppConfigData[i].ExcludeFromLock);
                                    $("#summernote_JsFunction_" + len + "").val(HtmlHelper.getHelper().decode(AppConfigData[i].JsFunction));
                                    $("#Index_" + len + "").text(AppConfigData[i].PropertyIndex);
                                    if (AppConfigData[i].LinkWidgetId != 0 && AppConfigData[i].LinkWidgetId != null) {
                                        Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getWidget(AppConfigData[i].LinkWidgetId).then(function (res) {
                                            $('#hfWidgetsAutoComplete_' + len).val(res.result.WidgetId);
                                            $('#ddlWidgets_' + len).append('<option value="' + res.result.WidgetId + '">' + res.result.WidgetName + '</option>')
                                                .val(AppConfigData[i].LinkWidgetId).trigger('change');
                                        });
                                    }
                                    var AppConfigType = $("#ddlAppConfigType_" + len + " option:selected").text();
                                    instance.fileCacheHelper.loadJsFile("platform/forms/managers/formmanager.js", function () {
                                        Unibase.Platform.Forms.Managers.FormManager.Instance().getFormRoles(AppConfigData[i].AppConfigurationId).then(function (formresponse) {
                                            if (formresponse.result.length > 0) {
                                                for (var i = 0; i < formresponse.result.length; i++) {
                                                    var res = formresponse.result[i];
                                                    $("#autocomplete_Form_" + len + "").append('<option value="' + formresponse.result[i].FormId + '">' + formresponse.result[i].FormName + '</option>');
                                                    $("#autocomplete_role_" + len + "").append('<option value="' + formresponse.result[i].RoleId + '">' + res.RoleName + '</option>');
                                                    $("#autocomplete_Form_" + len + "").val(formresponse.result[i].FormId).trigger('change');
                                                    $("#autocomplete_role_" + len + "").val(formresponse.result[i].RoleId).trigger('change');
                                                    var formid = Number($("#autocomplete_Form_" + len + "").val());
                                                    var roleid = Number($("#autocomplete_role_" + len + "").val());
                                                    var formname = $("#autocomplete_Form_" + len + " option:selected").text();
                                                    var rolename = $("#autocomplete_role_" + len + " option:selected").text();
                                                    var lihtml = Unibase.Platform.Widgets.Components.Widget.Instance().
                                                        loadrolesdata(formid, formname, roleid, rolename, 0, len, formresponse.result[i].FormRoleId);
                                                    $(".div_formrole_" + len + "").append(lihtml);
                                                    Unibase.Platform.Widgets.Components.Widget.Instance().javaScript(formid, roleid, len, formresponse.result[i].JsText);
                                                    $('#appconfiguration_javascript_' + formid + '_' + roleid + '_' + len + '').summernote('code', formresponse.result[i].JsText);
                                                }
                                            }
                                        });
                                    });
                                    var FormName = $("#ddlFormUniqueKey_" + len + " option:selected").text();
                                    Unibase.Platform.Apps.Managers.AppManager.Instance().getInstallApp(AppConfigData[i].InstalledAppId).then(function (installedresponse) {
                                        $("#ddlFormInstallAppId_" + len + "").append('<option value="' + installedresponse.result.InstalledAppId + '">' + installedresponse.result.AppTitle + '</option>');
                                        $("#ddlFormInstallAppId_" + len + "").val(installedresponse.result.InstalledAppId);
                                    });
                                    instance.fileCacheHelper.loadJsFile("platform/apps/managers/appmanager.js", function () {
                                        Unibase.Platform.Apps.Managers.AppManager.Instance().getAppPermission(AppConfigData[i].AppPermissionId).then(function (permissionresponse) {
                                            if (permissionresponse.result != null)
                                                $("#txt_RoleSetting_" + len + "").append('<option value="' + permissionresponse.result.AppPermissionId + '">' + permissionresponse.result.SettingName + '</option>');
                                        });
                                    });
                                    $("#txt_SettingDesignhtml_" + len).val(HtmlHelper.getHelper().decode(AppConfigData[i].SettingDesignHtml));
                                    $("#txt_DynamicJs_" + len).val(HtmlHelper.getHelper().decode(AppConfigData[i].DynamicJs));
                                    $(".AppConfig_" + len + "").find(".roleSettingDiv").find("#hfRoleSettingValue_" + len + "").val(AppConfigData[i].RoleSetting);
                                    $('.configsortable').append('<li class="list-group-item box-shadow column-configitem ui-sortable-handle" id="AppConfigId_' + len + '"><span class="pull-left media-xs mr-30"><i class="fa fa-sort text-muted fa mr-10"></i><span id="Index_' + len + '" class="text-dark rowNum">' + len + '</span></span><div class="clear"><div class="stageheading"><input type="hidden" id="row0" value="0" /> <label class="col-sm-4" id="row1">' + AppConfigData[i].SettingName + '</label><label class="col-sm-3" id="row2">' + AppConfigType + '</label><label class="col-sm-3" id="row3">' + FormName + '</label><span class="col-sm-1"><span id="delete_AppConfigrow" class="btn fa fa-times fa-lg text-danger"></span></span></li>');
                                    $('#AppConfigNames').append('<li class="d-flex flex-column bg-light my-3 p-2 rounded-2 liclassId" id="li_' + len + '"> <div class="d-flex flex-row text-dark biz-adj-drawer-wrap w-100"> <span class="border-bottom border-dashed border-dark w-70 text-truncate p-1">' + AppConfigData[i].SettingName + '</span> <a href="javascript:void(0);" data-target="adj_drawer_configuration" data-clickevent="parameter" class="ml-auto my-auto px-2 EditAppConfiguration" data-lengthedit="3" id="edit_icon_3" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().EditAppConfiguration(' + appId + ',' + len + ');"> <i class="fa p-1 fa-edit text-dark"></i> </a> <a href="javascript:void(0);" class=" my-auto border-left px-2 DeleteAppConfiguration" onclick="Unibase.Platform.Widgets.Components.Widget.Instance().DeleteAppConfiguration(' + appId + ',' + len + ');"> <i class="fa p-1 fa-trash text-danger"></i> </a> </div></li>');
                                }
                            });
                        }
                        if (instance.backOption == 'Mode-2') {
                            var EditMode = instance.defautSettings.filter(function (o) { return o.widgetdesignid === 20210628; });
                            EditMode[0].mode = 'Create_Mode';
                            $('#layout-tab').addClass('hidden');
                            $('#kpi-design-tab').addClass('hidden');
                            $('#Preview-Designs').removeClass('hidden').click();
                            $('#option-back').removeClass('hidden');
                        }
                    }
                    InstalledAppInfo(appProviders, InstalledAppId) {
                        let selectedAppProviders = [];
                        let appIds = [];
                        let ids = [];
                        if (selectedAppProviders.length > 0) {
                            for (var i = 0; i < selectedAppProviders.length; i++) {
                                appIds.push(selectedAppProviders[i].id);
                            }
                        }
                        if (appProviders != null && appProviders != "") {
                            if (appProviders.length > 0) {
                                for (var i = 0; i < appProviders.length; i++) {
                                    appIds.push({ text: appProviders[i].AppTitle, id: appProviders[i].InstalledAppId });
                                    ids.push(appProviders[i].InstalledAppId);
                                }
                            }
                            selectedAppProviders = appIds;
                        }
                        var userinfo = Unibase.Platform.Membership.Infos.Identity.getCurrentUser();
                        let url = _appsettings.server_url() + "/apis/v4/unibase/platform/apps/installedappautocomplete/";
                        $("#ddlAppProviders").select2({
                            placeholder: "Select ",
                            data: selectedAppProviders,
                            tags: true,
                            multiple: true,
                            ajax: {
                                url: function (request) {
                                    var reqUrl = url;
                                    var term = request.term;
                                    if (term == undefined || term == "")
                                        reqUrl = reqUrl + "term/" + term + "/authtoken/" + userinfo.sessionId;
                                    else
                                        reqUrl = reqUrl + "term/" + term + "/authtoken/" + userinfo.sessionId;
                                    return reqUrl;
                                },
                                dataType: 'json',
                                delay: 250,
                                data: function (params) {
                                    var query = {
                                        term: params.term,
                                        type: 'GET'
                                    };
                                    return query;
                                },
                                beforeSend: function (xhr) {
                                    if (userinfo !== undefined && userinfo !== null) {
                                        xhr.setRequestHeader("Authorization", "Basic " + userinfo.sessionId);
                                        xhr.setRequestHeader('geoposition', userinfo.latd + ':' + userinfo.lgId);
                                    }
                                },
                                processResults: function (data, params) {
                                    return {
                                        results: jQuery.map(JSON.parse(data.result), function (item) {
                                            return {
                                                id: item.Value,
                                                text: item.SelectText,
                                                addlInfo: item.addlData
                                            };
                                        })
                                    };
                                }
                            },
                            templateSelection: function (result) {
                                var $template = $('<span>' + result.text + '</span> <input type="hidden" id="hf_AutocompleteId" value="' + result.id + '">');
                                return $template;
                            }
                        });
                        jQuery("#ddlAppProviders").val(ids).trigger('change');
                    }
                    AppConfig_InstalledAppInfo(appProviders, Id) {
                        let selectedAppProviders = [];
                        let appIds = [];
                        let ids = [];
                        if (selectedAppProviders.length > 0) {
                            for (var i = 0; i < selectedAppProviders.length; i++) {
                                appIds.push(selectedAppProviders[i].id);
                            }
                        }
                        if (appProviders != null && appProviders != "") {
                            if (appProviders.length > 0) {
                                for (var i = 0; i < appProviders.length; i++) {
                                    appIds.push({ text: appProviders[i].AppTitle, id: appProviders[i].InstalledAppId });
                                    ids.push(appProviders[i].InstalledAppId);
                                }
                            }
                            selectedAppProviders = appIds;
                        }
                        var userinfo = Unibase.Platform.Membership.Infos.Identity.getCurrentUser();
                        let url = _appsettings.server_url() + "/apis/v4/unibase/platform/apps/installedappautocomplete/";
                        $("#ddlFormInstallAppId_" + Id).select2({
                            placeholder: "Select ",
                            data: selectedAppProviders,
                            tags: false,
                            multiple: false,
                            ajax: {
                                url: function (request) {
                                    var reqUrl = url;
                                    var term = request.term;
                                    if (term == undefined || term == "")
                                        reqUrl = reqUrl + "term/" + term + "/authtoken/" + userinfo.sessionId;
                                    else
                                        reqUrl = reqUrl + "term/" + term + "/authtoken/" + userinfo.sessionId;
                                    return reqUrl;
                                },
                                dataType: 'json',
                                delay: 250,
                                data: function (params) {
                                    var query = {
                                        term: params.term,
                                        type: 'GET'
                                    };
                                    return query;
                                },
                                beforeSend: function (xhr) {
                                    if (userinfo !== undefined && userinfo !== null) {
                                        xhr.setRequestHeader("Authorization", "Basic " + userinfo.sessionId);
                                        xhr.setRequestHeader('geoposition', userinfo.latd + ':' + userinfo.lgId);
                                    }
                                },
                                processResults: function (data, params) {
                                    return {
                                        results: jQuery.map(JSON.parse(data.result), function (item) {
                                            return {
                                                id: item.Value,
                                                text: item.SelectText,
                                                addlInfo: item.addlData
                                            };
                                        })
                                    };
                                }
                            },
                            templateSelection: function (result) {
                                var $template = $('<span>' + result.text + '</span> <input type="hidden" id="hfFormInstalledappAutocomplete_' + Id + '" value="' + result.id + '">');
                                return $template;
                            }
                        });
                        jQuery("#ddlFormInstallAppId_" + Id).val(ids).trigger('change');
                    }
                    exportWidgetByWidgetId(WidgetId) {
                        var instance = this;
                        Unibase.Platform.Helpers.NavigationHelper.Instance().showLoading();
                        Unibase.Platform.Widgets.Managers.WidgetManager.Instance().getWidget(WidgetId).then(function (widgetresponse) {
                            Unibase.Platform.Widgets.Managers.WidgetManager.Instance().exportWidgetByWidgetId(WidgetId).then(function (response) {
                                if (response.status == Unibase.Data.Status.Error) {
                                    if (Unibase.Themes.Providers.DetailHelper.installedAppId != 0) {
                                        $('#div_message').html(`<div id="Bizgaze-messageInfo" class="Bizgaze-messageInfo alert alert-danger m-1 mb-0 ml-auto position-absolute w"><strong>Error! </strong>${response.message}</div>`);
                                    }
                                    else {
                                        $('#bizgaze_message').html(`<div id="Bizgaze-messageInfo" class="Bizgaze-messageInfo alert alert-danger m-1 mb-0 ml-auto position-absolute w" style="z-index: 1011;left: 240px; right: 0;"><strong>Error! </strong>${response.message}</div>`);
                                    }
                                    instance.navigationHelper.hideLoading();
                                    $('.Bizgaze-messageInfo').on('click', function () {
                                        $(this).remove();
                                    });
                                }
                                else if (widgetresponse.result != null && widgetresponse.result != undefined && response.result != null && response.result != undefined) {
                                    var filename = widgetresponse.result.WidgetName + " - Widget.xml";
                                    var xmltext = response.result;
                                    var pom = document.createElement('a');
                                    var bb = new Blob([xmltext], { type: 'text/plain' });
                                    pom.setAttribute('href', window.URL.createObjectURL(bb));
                                    pom.setAttribute('download', filename);
                                    pom.dataset.downloadurl = ['text/plain', pom.download, pom.href].join(':');
                                    pom.draggable = true;
                                    pom.classList.add('dragout');
                                    pom.click();
                                }
                                Unibase.Platform.Helpers.NavigationHelper.Instance().hideLoading();
                            });
                        });
                    }
                    importWidget(containerid, fileInfo) {
                        var instance = this;
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/Widgets/importwidget/np';
                        Platform.Helpers.FileHelper.Instance().upload(url, fileInfo).then(function (response) {
                            if (response.status == Unibase.Data.Status.Error) {
                                MessageHelper.Instance().showError(response.message, "div_importmessage");
                            }
                            else {
                                MessageHelper.Instance().showSuccess(response.message, "div_importmessage");
                                $('#' + containerid).modal('hide');
                                $('#' + containerid).remove();
                            }
                            Unibase.Platform.Helpers.NavigationHelper.Instance().hideLoading();
                        });
                    }
                    static Instance() {
                        if (this._instance === undefined)
                            this._instance = new Unibase.Platform.Widgets.Components.Widget();
                        return this._instance;
                    }
                }
                Widget.formroles = [];
                Components.Widget = Widget;
            })(Components = Widgets.Components || (Widgets.Components = {}));
        })(Widgets = Platform.Widgets || (Platform.Widgets = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));