WebBuild/wwwroot/tenants/themes/compact/components/nav/nav.template.js

var Unibase;
(function (Unibase) {
    let Themes;
    (function (Themes) {
        let Compact;
        (function (Compact) {
            let Components;
            (function (Components) {
                class Nav_Template {
                    DashboardGroupsTemplate() {
                        let html = `<li class="nav-item li-dashboard-item liDashboardGroup_{{DashboardGroupId}}" id="liDashboardGroup_{{DashboardGroupId}}">
                                    <a class="nav-link nav-hover-link" href ="javascript:void(0);" onclick = "javascript:Unibase.Themes.Compact.Components.Nav.Instance().loadDashboardsInDashboard({{DashboardGroupId}},0,'true');"><span class="text-truncate">{{DashboardGroupName}}</span></a>
                                    <div class='dashboard_active_group_id d-none' data-value ='{{DashboardGroupId}}'></div><div class="dashboard_active_group_name d-none" data-value='{{DashboardGroupName}}'></div>
                                </li>`;
                        return html;
                    }
                    DashboardGroupsTemplate2() {
                        let html = `<li class="nav-item li-dashboard-item liDashboardGroup_{{DashboardGroupId}} mega-nav-li-list" id="liDashboardGroup_{{DashboardGroupId}}"><a class="nav-link nav-hover-link mega-sub-head-nav-link" href="javascript:;" onclick = "javascript:Unibase.Themes.Compact.Components.Nav.Instance().loadDashboardsInDashboard({{DashboardGroupId}},0,'true');"><span class="text-truncate">{{DashboardGroupName}}</span></a> <div class='dashboard_active_group_id d-none' data-value ='{{DashboardGroupId}}'></div><div class="dashboard_active_group_name d-none" data-value='{{DashboardGroupName}}'></div><ul class="flex-column dashboard-drp-{{DashboardGroupId}} w-100 drp-list" id="dashboard-drp-{{DashboardGroupId}}"></ul></li> `;
                        return html;
                    }
                    DashboardGroupsTemplate3() {
                        let html = `<li class="li-dashboard-item col-lg-4 col-md-6 px-0 px-sm-10 mb-5 liDashboardGroup_{{DashboardGroupId}}" id="liDashboardGroup_{{DashboardGroupId}}">
                                <a class="dropdown-item text-truncate" href="javascript:;" onclick="Unibase.Themes.Compact.Components.Nav.Instance().loadDashboardsInDashboard({{DashboardGroupId}},0,'true');">{{DashboardGroupName}}</a>
                                    <div class='dashboard_active_group_id d-none' data-value ='{{DashboardGroupId}}'></div><div class="dashboard_active_group_name d-none" data-value='{{DashboardGroupName}}'></div>
                                </li>`;
                        return html;
                    }
                    DashboardGroupsTemplate4() {
                        let html = `<li class="nav-item li-dashboard-item layout-4 collapsed liDashboardGroup_{{DashboardGroupId}}" id="liDashboardGroup_{{DashboardGroupId}}"><a class="nav-link nav-hover-link mega-sub-head-nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#dashboard-drp-{{DashboardGroupId}}" aria-expanded="false"><span class="text-truncate mr-10">{{DashboardGroupName}}</span></a><ul class="flex-column collapse collapse-level-1 dashboard-drp-{{DashboardGroupId}} w-100 drp-list" id="dashboard-drp-{{DashboardGroupId}}" name={{DashboardGroupId}} data-parent="#dash_drp"><li class="lidashboardgrp-item hidden" id="lidashboardGroup_{{DashboardGroupId}}_item"></li></ul></li>`;
                        return html;
                    }
                    UnGroupedDashboards() {
                        let html = `<li class="nav-item" id="liDashboardUnGroup_{{DashboardGroupId}}">
                    <a class="nav-link" href="javascript:void(0);" onclick="javascript:Unibase.Themes.Compact.Components.Nav.Instance().loadDashboard({{DashboardId}},\'{{DashboardName}}\');" 
                    data-target="#group-drp-{{DashboardId}}1" aria-expanded="false">
                    <span>{{DashboardName}}</span></a>
                    <ul class="nav flex-column collapse collapse-level-1 group-drp-{{DashboardId}}" 
                    id="group-drp-{{DashboardId}}" name={{DashboardId}}><li class="ligrp-item hidden"></li></ul></li>`;
                        return html;
                    }
                    DashboardsTemplate() {
                        let html = `<li id='{{DashboardId}}' class="nav-item ligrp-item ligrp-addeditem UlItem_{{DashboardId}}"
                    Dashboardindex="{{DashboardIndex}}"><input type="hidden" id="hf_Dashboard_DashboardId" 
                    value="{{DashboardId}}"><input type="hidden" id="hf_Dashboard_DashboardName" data-Dashboardname="{{DashboardName}}" value="{{DashboardName}}"> 
                    <a href="javascript:;" class="nav-link" data-Dashboardname="{{DashboardName}}" onclick="javascript:Unibase.Themes.Compact.Components.Nav.Instance().loadDashboard({{DashboardId}},\'{{DashboardName}}\')">
                    <span class="mega-nav-item">{{DashboardName}}</span></a></li>`;
                        return html;
                    }
                    DashboardItemTemplate() {
                        return `<li class="filter-item btn" id="filterItem_{{DashboardId}}" data-pincmnfilters="{{PinCommonFilters}}"><a class="filter-link" href="javascript:;" onclick="Unibase.Themes.Compact.Components.Nav.Instance().loadDashboard({{DashboardId}},\'{{DashboardName}}\')" data-tooltip="true" title="{{DashboardName}}"><span class="filter-name">{{DashboardName}}</span></a>`;
                    }
                    UserDashboards1() {
                        let html = `<li class="Dashboardid-{{DashboardId}} nav-item ligrp-addeditem" id="{{DashboardId}}"><input type="hidden" id="hf_Dashboard_DashboardId" value="{{DashboardId}}"><input type="hidden" id="hf_Dashboard_DashboardName" value="{{DashboardName}}"> 
                    <a class="nav-link" href="javascript:;" onclick="javascript: Unibase.Themes.Compact.Components.Nav.Instance().loadDashboardsInDashboard(0,{{DashboardId}});"> 
                    <span>{{DashboardName}}</span></a></li>`;
                        return html;
                    }
                    appGroupTemplate() {
                        let html = ` <li class="nav-item nav-AppGroup collapsed mega-nav-li-list" id="liAppGroup_{{AppGroupId}}">
                                    <a class="nav-link nav-hover-link mega-sub-head-nav-link" href ="javascript:void(0);" data-toggle="collapse" data-target="#appgroup-drp-{{AppGroupId}}" aria-expanded="false"><span class="text-truncate mr-10">{{AppGroupName}}</span></a>
                                    <ul class="flex-column collapse collapse-level-1 appgroup-drp-{{AppGroupId}} w-100 drp-list" id="appgroup-drp-{{AppGroupId}}" name={{AppGroupId}} data-parent="#nav-apps">
                                        <li class="liappgrp-item hidden" id="liAppGroup_{{AppGroupId}}_item"></li>
                                    </ul>
                                </li>`;
                        return html;
                    }
                    appGroupTemplate2() {
                        let html = `<li class="nav-item" id="liAppGroup_{{AppGroupId}}">
	                                    <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#appgroup-drp-{{AppGroupId}}" data-parent="#nav-apps">
		                                    {{AppGroupName}}
	                                    </a>
	                                    <ul id="appgroup-drp-{{AppGroupId}}" class="nav flex-column collapse collapse-level-2 hidden appgroup-drp-{{AppGroupId}}" id="appgroup-drp-{{AppGroupId}}"  >
		                                    <li class="nav-item">
			                                    <ul class="nav flex-column">
                                                    <li class="nav-item liappgrp-item hidden" id="liAppGroup_{{AppGroupId}}_item"></li>
			                                    </ul>
		                                    </li>
	                                    </ul>
                                    </li>`;
                        return html;
                    }
                    createAppGroupTemplate() {
                        let html = `<li class="nav-item collapsed" id="licreateAppGroup_{{AppGroupId}}">
                                    <a class="nav-link nav-hover-link" href ="javascript:void(0);" data-toggle="collapse" data-target="#appgroup-create-drp-{{AppGroupId}}" aria-expanded="false" ><span>{{AppGroupName}}</span></a>
                                    <ul class="nav flex-column collapse collapse-level-1 hidden appgroup-create-drp-{{AppGroupId}}" id="appgroup-create-drp-{{AppGroupId}}" name={{AppGroupId}} data-parent="#nav-create">
                                        <li class="liappgrp-create-item " id="licreateAppGroup_{{AppGroupId}}_item"></li>
                                    </ul>
                                </li>`;
                        return html;
                    }
                    createAppGroupTemplate2() {
                        let html = `<li class="nav-item" id="licreateAppGroup_{{AppGroupId}}">
	                                    <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#appgroup-create-drp-{{AppGroupId}}">
		                                    {{AppGroupName}}
	                                    </a>
	                                    <ul id="appgroup-create-drp-{{AppGroupId}}" class="nav flex-column collapse collapse-level-2 hidden appgroup-create-drp-{{AppGroupId}}" data-parent="#nav-create">
		                                    <li class="nav-item">
			                                    <ul class="nav flex-column">
                                                    <li class="nav-item liappgrp-create-item hidden" id="licreateAppGroup_{{AppGroupId}}_item"></li>
			                                    </ul>
		                                    </li>
	                                    </ul>
                                    </li>`;
                        return html;
                    }
                    appTemplate() {
                        let html = `<li id='{{MyAppId}}' class="nav-item liappgrp-item nav-app-link nav-hover-link liappgrp-addeditem UlItem_{{MyAppId}}"Appindex="{{AppIndex}}"><input type="hidden" id="hf_Apps_InstalledAppId" value="{{MyAppId}}"><input type="hidden" id="hf_Apps_InstalledAppName" data-installedappname="{{InstalledAppName}}" value="{{InstalledAppName}}">
<ul class="d-flex list-inline justify-content-between align-items-center w-100"><li class="w-90 drp-list-text"><a href="javascript:;" class="nav-link nav-anchor biz_anchor text-truncate w-100" data-installedappname="{{InstalledAppName}}" onclick="Unibase.Themes.Compact.Components.Nav.Instance().loadList({{MyAppId}})"><span class="text-truncate mega-nav-item">{{AppTitle}}</span></a></li><li class="w-10 drp-list-form-icon"><a class="createform hidden " createid="{{CanCreate}}" href="javascript:;" onclick="Unibase.Themes.Compact.Components.Nav.Instance().loadCreateHtml({{MyAppId}})" data-toggle="tooltip" data-placement="right" title="Create" >+</a></li></ul>
                  </li>`;
                        return html;
                    }
                    createAppTemplate() {
                        let html = `<li id='{{MyAppId}}' class="nav-item liappgrp-item liappgrp-addeditem UlItem_{{MyAppId}}" 
                    Appindex="{{AppIndex}}"><input type="hidden" id="hf_Apps_InstalledAppId"
                    value="{{MyAppId}}"><input type="hidden" id="hf_Apps_InstalledAppName" data-installedappname="{{InstalledAppName}}" value="{{InstalledAppName}}"> 
                  <a href="javascript:;" class="nav-link biz_anchor text-truncate" data-installedappname="{{InstalledAppName}}" onclick="Unibase.Themes.Compact.Components.Nav.Instance().loadCreateHtml({{MyAppId}})">
                    <span class="text-truncate">{{AppTitle}}</span></a></li>`;
                        return html;
                    }
                    reportGroupTemplate() {
                        let html;
                        html = `<li class="nav-item nav-ReportGroup mega-nav-li-list" id="liReportGroup_{{ReportGroupId}}">
                                  <a class="nav-link nav-hover-link mega-sub-head-nav-link collapsed" href ="javascript:void(0);" data-toggle="collapse" data-target="#reportgroup-drp-{{ReportGroupId}}" aria-expanded="false"><span class="text-truncate mr-10">{{ReportGroupName}}</span></a>
                                    <ul class="flex-column collapse collapse-level-1 group-drp-{{ReportGroupId}} drp-list" id="reportgroup-drp-{{ReportGroupId}}" name={{ReportGroupId}} data-parent="#nav-reports">
                                    </ul>
                                </li>`;
                        return html;
                    }
                    reportGroupTemplate2() {
                        let html = `<li class="nav-item collapsed" id="liReportGroup_{{ReportGroupId}}">
	                                    <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#reportgroup-drp-{{ReportGroupId}}">
		                                    {{ReportGroupName}}
	                                    </a>
	                                    <ul id="reportgroup-drp-{{ReportGroupId}}" class="nav flex-column collapse collapse-level-2 hidden reportgroup-drp-{{ReportGroupId}}" id="appgroup-drp-{{ReportGroupId}}" >
		                                    <li class="nav-item">
			                                    <ul class="nav flex-column">
                                                    <li class="nav-item lireportgrp-item hidden" id="liReportGroup_{{ReportGroupId}}_item" data-parent="#nav-reports"></li>
			                                    </ul>
		                                    </li>
	                                    </ul>
                                    </li>`;
                        return html;
                    }
                    reportTemplate() {
                        let html = `<li id='{{ReportId}}' class="nav-item lireportgrp-item lireportgrp-addeditem UlItem_{{ReportId}}" title="{{DisplayName}}"><input type="hidden" id="hf_Analytics_ReportId"
                    value="{{ReportId}}"><input type="hidden" id="hf_Analytics_ReportName" data-reportname="{{DisplayName}}" value="{{DisplayName}}"> 
                    <a href="javascript:;" class="nav-link nav-hover-link nav-anchor biz_anchor text-truncate" data-reportname="{{DisplayName}}" onclick="javascript: Unibase.Themes.Compact.Components.Nav.Instance().loadReport({{ReportId}});">
                    <span class="text-truncate mega-nav-item" id="ReportName_{{ReportId}}">{{DisplayName}}</span></a></li>`;
                        return html;
                    }
                    userProfile() {
                        var html = `<li class="nav-item"><a class="nav-link" href="javascript:;">
							<i class="dropdown-icon zmdi zmdi-card"></i>
							<span>My balance</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;">
							<i class="dropdown-icon zmdi zmdi-email"></i>
							<span>Inbox</span>
						</a></li>
                        <li class="nav-item">
                        <div class="divider"></div>
                        </li>
                        <li class="nav-item nav-item-designmode">
                            <a class="nav-link" href="javascript:;" id="btn_bizgaze_designmode"><i class="dropdown-icon zmdi zmdi-laptop-mac"></i><span>Design mode</span></a>
						</a></li>
                        <li class="nav-item hidden nav-item-close-designmode">
                            <a class="nav-link" href="javascript:;" id="btn_bizgaze_normalmode"><i class="dropdown-icon zmdi zmdi-close"></i><span>Close design mode</span></a>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;">
							<i class="dropdown-icon zmdi zmdi-settings"></i>
							<span>Settings</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnLogoff">
							<i class="dropdown-icon zmdi zmdi-power"></i>
							<span>Log out</span>
						</a></li>`;
                        return html;
                    }
                    settings() {
                        var html = `<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_dataapis">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh DataApis</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_datalists">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh DataLists</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_actionproviders">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh Action Providers</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_integrationproviders">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh Integration Providers</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_reports">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh Reports</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_Controls">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh Controls</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_Forms">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh Forms</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh Apps</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_Widgetlayouts">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh WidgetLayouts</span>
						</a></li>
						<li class="nav-item"><a class="nav-link" href="javascript:;" id="btnrefresh_Widgets">
							<i class=" dropdown-icon fa fa-refresh"></i>
							<span>Refresh Widgets</span>
						</a></li>`;
                        return html;
                    }
                    notifications() {
                        var html = `<div class=""><ul class="nav nav-pills nav-fill layout-Notification-tabs" role="tablist" id="layout-Notification-tabs1"><li class="nav-item tab-item tab-pane"><a id="Active_Notification" href="javascript:;" class="align-items-center nav-link active"><i class="dripicons dripicons-alarm"></i></a></li><li class="nav-item tab-item tab-pane"><a id="Active_Process" href="javascript:;" class="align-items-center nav-link"><i class="dripicons dripicons-hourglass"></i></a></li><li class="nav-item tab-item tab-pane"><a id="Active_Tasks" href="javascript:;" class="align-items-center nav-link"><i class="dripicons dripicons-checklist"></i></a></li></ul></div>`;
                        return html;
                    }
                    filterSample() {
                        var html = `<div class="ma-10">
				<input type="text" class="form-control-sm mt-15" placeholder="Input Box"></input>
					<select class="form-control-sm custom-select  mt-15">
						<option selected="">Select</option>
						<option value="1">One</option>
						<option value="2">Two</option>
						<option value="3">Three</option>
					</select>
					<input type="text" class="form-control-sm mt-15" placeholder="Readonly Input Box" value="Readonly Input Box" readonly=""></input>
						<select class="form-control-sm custom-select mt-15">
							<option selected="">Readonly Select</option>
							<option value="1" disabled="">One</option>
							<option value="2" disabled="">Two</option>
							<option value="3" disabled="">Three</option>
						</select>
						<input type="text" class="form-control-sm mt-15" placeholder="Disabled Input Box" disabled=""></input>
							<select class="form-control-sm custom-select mt-15" disabled="">
								<option selected="">Disabled Select</option>
								<option value="1">One</option>
								<option value="2">Two</option>
								<option value="3">Three</option>
							</select>
					</div>`;
                        return html;
                    }
                    branchTemplate() {
                        let html;
                        html = `<li class="nav-item collapsed" id="liBranch_{{BranchId}}">
                                    <a class="nav-link" href ="javascript:void(0);" onclick = "Unibase.Themes.Compact.Components.Nav.Instance().changeBranch({{BranchId}});" aria-expanded="false"><span>{{BranchName}}</span></a></li>`;
                        return html;
                    }
                    navGroupTemplate() {
                        let html = ` <li class="nav-item nav-NavGroup collapsed " id = "liNavGroup_{{NavGroupId}}" >
                                    <a class="nav-link nav-hover-link" href ="javascript:void(0);" data-toggle="collapse" data-target="#navgroup-drp-{{NavGroupId}}"   aria-expanded="false" ><span class="text-truncate w-165p">{{NavGroupName}}</span></a>
                                    <ul class="flex-column collapse collapse-level-1 navgroup-drp-{{NavGroupId}} w-100" id="navgroup-drp-{{NavGroupId}}" name={{NavGroupId}} data-parent="#nav-navgroups">
                                        <li class="linavgrp-item hidden" id="liNavGroup_{{NavGroupId}}_item"></li>
                                    </ul>
                                </li>`;
                        return html;
                    }
                    navDashboardTemplate() {
                        let html = `<li id='{{ItemId}}' class="nav-item ligrp-item nav-parent-item li-dashboard-item ligrp-addeditem UlItem_{{ItemId}}"
                    Dashboardindex="{{DashboardIndex}}"><input type="hidden" id="hf_Dashboard_DashboardId" 
                    value="{{ItemId}}"><input type="hidden" id="hf_Dashboard_DashboardName" data-Dashboardname="{{ItemName}}" value="{{ItemName}}">
                    <a href="javascript:;" class="nav-link nav-hover-link" data-Dashboardname="{{ItemName}}" onclick="javascript:Unibase.Themes.Compact.Components.Nav.Instance().loadNavDashBoard({{ItemId}},\'{{ItemName}}\')">
                    <span class="text-truncate">{{ItemName}}</span></a></li>`;
                        return html;
                    }
                    navDashboardGroupTemplate() {
                        let html = `
                                    <li class="nav-item nav-parent-item li-dashboard-item liDashboardGroup_{{ItemId}}" id="liDashboardGroup_{{ItemId}}">
											<a class="nav-link nav-hover-link" href="javascript:;" onclick = "javascript:Unibase.Themes.Compact.Components.Nav.Instance().loadDashboardsInDashboard({{ItemId}},0,true);"><span class="text-truncate">{{ItemName}}</span></a>
									</li>
                                `;
                        return html;
                    }
                    navAppTemplate() {
                        let html = `<li id='{{ItemId}}' class="nav-item liappgrp-item nav-hover-link nav-app-link liappgrp-addeditem UlItem_{{ItemId}}"><input type="hidden" id="hf_Apps_InstalledAppId"
                    value="{{ItemId}}"><input type="hidden" id="hf_Apps_InstalledAppName" data-installedappname="{{ItemName}}" value="{{ItemName}}">
<ul class="d-flex list-inline justify-content-between align-items-center w-100"><li class="w-90"><a href="javascript:;" class="nav-link nav-anchor biz_anchor text-truncate nav-hover-link w-100" data-installedappname="{{ItemName}}" onclick="Unibase.Themes.Compact.Components.Nav.Instance().loadList({{ItemId}})"><span class="text-truncate">{{ItemName}}</span></a></li><li class="w-10"><a class="createform hidden " createid="{{CanCreate}}" href="javascript:;" onclick="Unibase.Themes.Compact.Components.Nav.Instance().loadCreateHtml({{ItemId}})" data-toggle="tooltip" data-placement="right" title="Create">+</a></li></ul>
                  </li>`;
                        return html;
                    }
                    navAppGroupTemplate() {
                        let html = ` <li class="nav-item nav-AppGroup collapsed" id = "liAppGroup_{{ItemId}}">
                                    <a class="nav-link nav-hover-link" href ="javascript:void(0);" data-toggle="collapse" data-target="#appgroup-drp-{{ItemId}}"   aria-expanded="false"><span class="text-truncate w-165p">{{ItemName}}</span></a>
                                    <ul class="flex-column collapse collapse-level-1 appgroup-drp-{{AppGroupId}} w-100" id="appgroup-drp-{{ItemId}}" name={{ItemId}} data-parent="#nav-apps">
                                        <li class="liappgrp-item hidden" id="liAppGroup_{{ItemId}}_item"></li>
                                    </ul>
                                </li>`;
                        return html;
                    }
                    navReportTemplate() {
                        let html = `<li id='{{ItemId}}' class="nav-item lireportgrp-item lireportgrp-addeditem UlItem_{{ItemId}}" title="{{ItemName}}"><input type="hidden" id="hf_Analytics_ReportId"
                    value="{{ItemId}}"><input type="hidden" id="hf_Analytics_ReportName" data-reportname="{{ItemName}}" value="{{ItemName}}">
                    <a href="javascript:;" class="nav-link nav-anchor nav-hover-link biz_anchor text-truncate" data-reportname="{{ItemName}}" onclick="javascript: Unibase.Themes.Compact.Components.Nav.Instance().loadReport({{ItemId}});">
                    <span class="text-truncate" id="ReportName_{{ItemId}}">{{ItemName}}</span></a></li>`;
                        return html;
                    }
                    navReportGroupTemplate() {
                        let html;
                        html = `<li class="nav-item nav-ReportGroup" id="liReportGroup_{{ItemId}}">
                                  <a class="nav-link nav-hover-link collapsed" href ="javascript:void(0);" data-toggle="collapse" data-target="#reportgroup-drp-{{ItemId}}" aria-expanded="false"><span class="text-truncate mr-10">{{ItemName}}</span></a>
                                    <ul class="flex-column collapse collapse-level-1 group-drp-{{ItemId}}" id="reportgroup-drp-{{ItemId}}" name={{ItemId}} data-parent="#nav-reports">
                                    </ul>
                                </li>`;
                        return html;
                    }
                    skelTonDashboardHeader() {
                        let html;
                        html = `<div class="container-skel bg-transparent py-3 pl-2 pl-sm-0"> <div class="placeholder-skel no-dashboard-skel"></div><div class="skelton-row mt-20"> <div class="placeholder-skel filter-skel w-70p mr-2"></div><div class="placeholder-skel filter-skel mx-2 w-65p"></div><div class="placeholder-skel w-100p filter-skel mx-2"></div><div class="placeholder-skel filter-skel w-90p mx-2"></div></div></div>`;
                        return html;
                    }
                    skelTonDashboardStructure() {
                        let html;
                        html = `<div class="container-skel bg-transparent py-2"> <div class="skelton-row kpi px-sm-0 px-2"> <div class="col-4 pr-2 pl-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 px-2"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pl-2 pr-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-6 pr-2 pl-0"> <div class="placeholder-skel chart-skel-2"></div></div><div class="col-6 pl-2 pr-0"> <div class="placeholder-skel chart-skel-2"></div></div><div class="col-4 pr-2 pl-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 px-2"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pl-2 pr-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pr-2 pl-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 px-2"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pl-2 pr-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-6 pr-2 pl-0"> <div class="placeholder-skel chart-skel-2"></div></div><div class="col-6 pl-2 pr-0"> <div class="placeholder-skel chart-skel-2"></div></div><div class="col-4 pr-2 pl-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 px-2"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pl-2 pr-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pr-2 pl-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 px-2"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pl-2 pr-0"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-6 pr-2 pl-0"> <div class="placeholder-skel chart-skel-2"></div></div><div class="col-6 pl-2 pr-0"><div class="placeholder-skel chart-skel-2"></div></div><div class="col-4 pr-2 pl-0"><div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 px-2"> <div class="placeholder-skel kpi-skel-1"></div></div><div class="col-4 pl-2 pr-0"> <div class="placeholder-skel kpi-skel-1"></div></div></div></div>`;
                        return html;
                    }
                    skelTonListPage() {
                        let html;
                        html = `<div class="mx-3 my-2" data-skelTonPage="list-page"> <div class="container-skel bg-transparent" data-skelTonPage="listHeader-page"> <div class="skelton-row justify-content-between my-20"> <div class="placeholder-skel w-20 h-30p ml-0 no-dashboard-skel" style="padding:10px;"> </div><div class="placeholder-skel h-30p w-35 no-dashboard-skel"></div><div class="placeholder-skel h-30p w-20 no-dashboard-skel" style="padding:10px;"></div></div><div class="skelton-row"> <div class="placeholder-skel w-70p ml-0 filter-skel mr-2"></div><div class="placeholder-skel w-80p filter-skel mr-2"></div><div class="placeholder-skel w-60p filter-skel mr-2"></div><div class="placeholder-skel filter-skel w-90p mr-2"></div></div></div><div class="container-skel biz-secondary-color mt-40 p-0" data-skelTonPage="listBody-page"> <div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div><div class="placeholder-skel list-report mr-2"></div></div></div>`;
                        return html;
                    }
                    skelTonDetailsHDRPage() {
                        let html;
                        html = ` <div class="d-flex flex-row align-items-center mt-3">
                <div class="d-flex flex-row align-items-center">
                    <div class="placeholder-skel h-25p w-25p mr-2"></div>
                    <div class="placeholder-skel h-55p w-55p rounded-circle placeholder-skel">

                    </div>
                    <div class="d-flex flex-column ml-2">
                        <div class="placeholder-skel h-30p w-50p w-sm-120p"></div>
                        <div class="placeholder-skel h-25p w-80p w-sm-180p mt-2"></div>
                    </div>
                </div>
                <div class="ml-auto">
                    <div class="d-flex flex-row align-items-center">
                        <div class="placeholder-skel h-30p w-40p w-sm-120p mx-1"></div>
                        <div class="placeholder-skel h-30p w-40p w-sm-120p mx-1"></div>
                        <div class="placeholder-skel h-30p w-40p w-sm-120p mx-1"></div>
                    </div>
                </div>
            </div>`;
                        return html;
                    }
                    skelTonDetailsbBDYPage() {
                        let html;
                        html = `<div class="skelton-row row mx-0 py-1"><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-6 pl-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240p mx-0 my-2"></div></div><div class="col-6 pr-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240px mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-3 pl-0"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-3"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-3"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-3 pr-0"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-6 pl-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240p mx-0 my-2"></div></div><div class="col-6 pr-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240px mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-3 pl-0"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-3"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-3"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-3 pr-0"> <div class="placeholder-skel kpi-skel-1 w-100 h-90p my-2 mx-0"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-6 pl-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240p mx-0 my-2"></div></div><div class="col-6 pr-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240px mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div><div class="col-6 pl-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240p mx-0 my-2"></div></div><div class="col-6 pr-0"> <div class="placeholder-skel chart-skel-2 w-100 h-240px mx-0 my-2"></div></div><div class="col-12 px-0"> <div class="placeholder-skel report-1 w-100 h-70p mx-0 my-2"></div></div></div>`;
                        return html;
                    }
                    skelTonHorizontal() {
                        let html = `<div class="mx-3" data-skeltonpage="list-page"> <div class="container-skel biz-secondary-color p-0" data-skeltonpage="horizontal-loading"> <div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div><div class="placeholder-skel list-report"></div></div></div>`;
                        return html;
                    }
                    static Instance() {
                        return new Nav_Template();
                    }
                }
                Components.Nav_Template = Nav_Template;
            })(Components = Compact.Components || (Compact.Components = {}));
        })(Compact = Themes.Compact || (Themes.Compact = {}));
    })(Themes = Unibase.Themes || (Unibase.Themes = {}));
})(Unibase || (Unibase = {}));