dotnetreport-ng 1.0.3 → 1.0.6

package/bundles/dotnetreport-ng.umd.js

@@ -0,0 +1,172 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser/animations'), require('@angular/common/http'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('dotnetreport-ng', ['exports', '@angular/core', '@angular/platform-browser/animations', '@angular/common/http', '@angular/platform-browser'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["dotnetreport-ng"] = {}, global.ng.core, global.ng.platformBrowser.animations, global.ng.common.http, global.ng.platformBrowser));
+})(this, (function (exports, i0, animations, http, platformBrowser) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+
+    var DotnetReportService = /** @class */ (function () {
+        function DotnetReportService() {
+        }
+        return DotnetReportService;
+    }());
+    DotnetReportService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DotnetReportService_Factory() { return new DotnetReportService(); }, token: DotnetReportService, providedIn: "root" });
+    DotnetReportService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    DotnetReportService.ctorParameters = function () { return []; };
+
+    var BASE_URL_TOKEN = new i0.InjectionToken('BASE_URL');
+
+    var DotnetreportComponent = /** @class */ (function () {
+        function DotnetreportComponent(injector, sanitizer, cdref, baseUrl, http) {
+            this.sanitizer = sanitizer;
+            this.cdref = cdref;
+            this.baseUrl = baseUrl;
+            this.http = http;
+            this.baseServiceUrl = this.baseUrl; // "http://localhost:39378";    
+            this.exportExcelUrl = this.baseServiceUrl + '/Report/DownloadExcel';
+            this.reportTemplates = "";
+        }
+        DotnetreportComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var getUsersAndRolesUrl = this.baseServiceUrl + "/Report/GetUsersAndRoles";
+            getUsersAndRolesUrl = getUsersAndRolesUrl.replace(/[?&]$/, "");
+            this.http.get(getUsersAndRolesUrl).subscribe(function (response) {
+                var result = response;
+                var vm = new reportViewModel({
+                    runReportUrl: _this.baseServiceUrl + '/Report/Report',
+                    reportWizard: $("#modal-reportbuilder"),
+                    lookupListUrl: _this.baseServiceUrl + '/Report/GetLookupList',
+                    apiUrl: _this.baseServiceUrl + '/Report/CallReportApi',
+                    runReportApiUrl: _this.baseServiceUrl + '/Report/RunReportApi',
+                    getUsersAndRolesUrl: _this.baseServiceUrl + '/Report/GetUsersAndRoles',
+                    userSettings: result,
+                    execReportUrl: _this.baseServiceUrl + '/Report/RunReport',
+                    samePageOnRun: true
+                });
+                vm.printReport = function () {
+                    var printWindow = window.open("");
+                    printWindow === null || printWindow === void 0 ? void 0 : printWindow.document.open();
+                    printWindow === null || printWindow === void 0 ? void 0 : printWindow.document.write('<html><head>' +
+                        '<link href="/Content/bootstrap.css" rel="stylesheet" />' +
+                        '<style type="text/css">a[href]:after {content: none !important;}</style>' +
+                        '</head><body>' + $('.report-inner').html() +
+                        '</body></html>');
+                    setTimeout(function () {
+                        printWindow === null || printWindow === void 0 ? void 0 : printWindow.print();
+                        printWindow === null || printWindow === void 0 ? void 0 : printWindow.close();
+                    }, 250);
+                };
+                vm.downloadExcel = function () {
+                    $("#downloadExcel").submit();
+                };
+                vm.init(0, result.noAccount);
+                _this.renderKOTemplates();
+                ko.applyBindings(vm, document.getElementById('dot-net-report'));
+                _this.bindWindowResize(vm);
+            });
+        };
+        DotnetreportComponent.prototype.ngOnDestroy = function () {
+            ko.cleanNode(document.getElementById('dot-net-report'));
+        };
+        DotnetreportComponent.prototype.init = function () {
+            this.ngOnInit();
+        };
+        DotnetreportComponent.prototype.renderKOTemplates = function () {
+            this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n    <script type=\"text/html\" id=\"report-filter\">\n    <div class=\"form-group\">\n        <!-- ko if: !hasForeignKey-->\n        <!-- ko if: fieldType=='DateTime'-->\n        <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n        <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n        <!-- /ko -->\n        <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n        From\n        <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n        to\n        <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n        <!-- /ko -->\n        <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n        <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n            <option value=\"\"></option>\n            <option>Today</option>\n            <option>Today +</option>\n            <option>Today -</option>\n            <option>Yesterday</option>\n            <option>This Week</option>\n            <option>Last Week</option>\n            <option>This Month</option>\n            <option>Last Month</option>\n            <option>This Year</option>\n            <option>Last Year</option>\n            <option>This Month To Date</option>\n            <option>This Year To Date</option>\n            <option>Last 30 Days</option>\n            <optgroup label=\"Comparison Options\">\n                <option>>= Today</option>\n                <option><= Today</option>\n                <option>>= Today +</option>\n                <option><= Today +</option>\n                <option>>= Today -</option>\n                <option><= Today -</option>\n            </optgroup>\n        </select>\n        <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n            <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n        </div>\n        <!-- /ko -->\n        <!-- /ko -->\n        <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n        <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n        <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n        <!-- /ko -->\n        <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n        From\n        <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n        to\n        <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n        <!-- /ko -->\n        <!-- /ko -->\n        <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n        <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n            <option value=\"1\">Yes</option>\n            <option value=\"0\">No</option>\n        </select>\n        <!-- /ko -->\n        <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n        <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n        <!-- /ko -->\n        <!-- /ko -->\n        <!-- ko if: hasForeignKey-->\n        <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n        <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n        <!-- /ko -->\n        <!-- ko if: $parent.Operator()=='='-->\n        <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n        <!-- /ko -->\n        <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n        <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n        <!-- /ko -->\n        <!-- /ko -->\n    </div>\n  </script>\n  <script type=\"text/html\" id=\"pager-template\">\n    <div class=\"pager-container\">\n        <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a>&nbsp;\n        <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n        <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n        <span class=\"pager-pageinfo\">\n            <span>Page</span>&nbsp;\n            <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n                                value: currentPage,\n                                attr: { max: pages() }\" />&nbsp;\n            <span>of</span>&nbsp;\n            <span data-bind=\"text: pages\"></span>\n        </span>&nbsp;\n  \n        <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a>&nbsp;\n        <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n    </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-column-header\">\n    <!-- ko foreach: Columns -->\n    <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }\" style=\"border-right: 1px solid;\">\n        <!-- ko if: $parents[1].useStoredProc ? $parents[1].useStoredProc() : ($parents[2].useStoredProc ? $parents[2].useStoredProc() : false) -->\n        <span data-bind=\"text: fieldLabel ? fieldLabel : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold ? 'bold' : 'normal'}\"></span>\n        <!-- /ko -->\n        <!-- ko ifnot: $parents[1].useStoredProc ? $parents[1].useStoredProc() : ($parents[2].useStoredProc ? $parents[2].useStoredProc() : false)  -->\n        <a href=\"\" data-bind=\"click: function(){ $parents[1].pager ? $parents[1].changeSort(SqlField) : $parents[2].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold ? 'bold' : 'normal'}\">\n            <span data-bind=\"text: fieldLabel ? fieldLabel : ColumnName\"></span>\n            <span data-bind=\"text: ($parents[1].pager ? $parents[1].pager.sortColumn() : $parents[2].pager.sortColumn()) === SqlField ? (($parents[1].pager ? $parents[1].pager.sortDescending() : $parents[2].pager.sortDescending()) ? '&#9660;' : '&#9650;') : ''\"></span>\n        </a>\n        <!-- /ko -->\n    </th>\n    <!-- /ko -->\n  </script>\n  <script type=\"text/html\" id=\"report-column\">\n    <!-- ko foreach: Items -->\n    <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold ? 'bold' : 'normal', 'text-align': $parents[3].pager && $parents[3].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[3].pager && $parents[3].ReportType()=='Single' ? '64px' : ''}\">\n        <!-- ko if: LinkTo-->\n        <a data-bind=\"attr: {href: LinkTo}\"><span data-bind=\"html: FormattedValue\"></span></a>\n        <!-- /ko-->\n        <!-- ko ifnot: LinkTo-->\n        <span data-bind=\"html: FormattedValue\"></span>\n        <!-- /ko-->\n    </td>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-template\">\n    <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n    <!-- ko if: !$parent.isChart() || $parent.ShowDataWithGraph() -->\n    <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n        <table class=\"table table-hover table-condensed\">\n            <thead data-bind=\"if: $parents[1].ReportType() != 'Single'\">\n                <tr class=\"no-highlight\">\n                    <!-- ko if: $parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n                    <th style=\"width: 30px; border-left: 1px solid;\"></th>\n                    <!-- /ko -->\n                    <!-- ko template: 'report-column-header', data: $data -->\n                    <!-- /ko-->\n                </tr>\n            </thead>\n            <tbody>\n                <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                    <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                        No records found\n                    </td>\n                </tr>\n                <!-- ko foreach: Rows  -->\n                <tr>\n                    <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                    <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n                    <!-- /ko -->\n                    <!-- ko template: 'report-column', data: $data -->\n                    <!-- /ko-->\n                </tr>\n                <!-- ko if: isExpanded -->\n                <tr>\n                    <td style=\"width: 30px;\"></td>\n                    <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n                        <!-- ko if: DrillDownData -->\n                        <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n                            <thead>\n                                <tr class=\"no-highlight\">\n                                    <!-- ko template: 'report-column-header', data: $data -->\n                                    <!-- /ko-->\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                                    <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                        No records found\n                                    </td>\n                                </tr>\n                                <!-- ko foreach: Rows  -->\n                                <tr>\n                                    <!-- ko template: 'report-column', data: $data -->\n                                    <!-- /ko-->\n                                </tr>\n                                <!-- /ko -->\n                            </tbody>\n                        </table>\n                        <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                            <div class=\"form-inline small text-muted\">\n                                <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                    <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                                </div>\n                               \n                                <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                    <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                    </td>\n                </tr>\n                <!-- /ko -->\n                <!-- /ko -->\n            </tbody>\n            <!-- ko if: $parent.SubTotals().length == 1 -->\n            <tfoot data-bind=\"foreach: $parent.SubTotals\">\n                <tr>\n                    <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                    <td></td>\n                    <!-- /ko -->\n                    <!-- ko foreach: Items -->\n                    <!-- ko if: Value != 'NA' -->\n                    <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold ? 'bold' : 'normal', 'text-align': $parents[3].pager && $parents[3].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[3].pager && $parents[3].ReportType()=='Single' ? '64px' : ''}\">\n                        <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n                    </td>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </tr>\n            </tfoot>\n            <!-- /ko -->\n        </table>\n    </div>\n    <!-- /ko -->\n  </script>\n  <script type=\"text/html\" id=\"admin-mode-template\">\n    <div class=\"row\" style=\"padding: 10px 10px\">\n        <div class=\"material-switch pull-right\">\n            <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n            <label for=\"admin-mode\" class=\"label-primary\"></label>\n        </div>\n        <div class=\"pull-right\">Admin Mode</div>\n    </div>\n  \n    <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n        <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n    </div>\n  </script>\n  <script type=\"text/html\" id=\"manage-access-template\">\n    <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n    <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n        <div class=\"alert alert-info\">\n            <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n        </div>\n        <b>Manage by User</b> (allow edit)\n        <div class=\"row container-fluid\">\n            <!-- ko foreach: manageAccess.users -->\n            <div class=\"pull-left\">\n                <div class=\"checkbox\">\n                    <label class=\"label label-info\">\n                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                    </label>\n                </div>\n            </div>\n            <!-- /ko -->\n        </div>\n        <br />\n        <b>View only by User</b> (no edit/delete)\n        <div class=\"row container-fluid\">\n            <!-- ko foreach: manageAccess.viewOnlyUsers -->\n            <div class=\"pull-left\">\n                <div class=\"checkbox\">\n                    <label class=\"label label-info\">\n                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                    </label>\n                </div>\n            </div>\n            <!-- /ko -->\n        </div>\n        <br />\n        <div data-bind=\"ifnot: manageAccess.isDashboard\">\n            <b>Delete by User</b> (allow delete)\n            <div class=\"row container-fluid\">\n                <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n                <div class=\"pull-left\">\n                    <div class=\"checkbox\">\n                        <label class=\"label label-info\">\n                            <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                        </label>\n                    </div>\n                </div>\n                <!-- /ko -->\n            </div>\n            <br />\n        </div>\n        <b>Manage by User Role</b> (allow edit)\n        <div class=\"row container-fluid\">\n            <!-- ko foreach: manageAccess.userRoles -->\n            <div class=\"pull-left\">\n                <div class=\"checkbox\">\n                    <label class=\"label label-info\">\n                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                    </label>\n                </div>\n            </div>\n            <!-- /ko -->\n        </div>\n        <br />\n        <b>View only by User Role</b> (no edit/delete)\n        <div class=\"row container-fluid\">\n            <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n            <div class=\"pull-left\">\n                <div class=\"checkbox\">\n                    <label class=\"label label-info\">\n                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                    </label>\n                </div>\n            </div>\n            <!-- /ko -->\n        </div>\n        <div data-bind=\"ifnot: manageAccess.isDashboard\">            \n            <br />\n            <b>Delete by User Role</b> (allow delete)\n            <div class=\"row container-fluid\">\n                <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n                <div class=\"pull-left\">\n                    <div class=\"checkbox\">\n                        <label class=\"label label-info\">\n                            <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                        </label>\n                    </div>\n                </div>\n                <!-- /ko -->\n            </div>\n        </div>\n    </div>\n  </script>\n  <script type=\"text/html\" id=\"filter-group\">\n    <div data-bind=\"foreach: FilterGroups\">\n        <div class=\"card\" style=\"margin-left: 20px;\">\n            <div class=\"card-body\" data-bind=\"visible: !isRoot\">\n                <select data-bind=\"value: AndOr\" class=\"form-control form-control-sm pull-left\">\n                    <option>And</option>\n                    <option>Or</option>\n                </select>\n                <button class=\"btn btn-sm btn-secondary pull-left\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button>&nbsp;\n                <hr />\n            </div>\n            <div data-bind=\"template: {name: 'filter-inner'}\"></div>\n        </div>\n    </div>\n  </script>\n  <script type=\"text/html\" id=\"fly-filter-template\">\n    <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n        <div class=\"card-header\">\n            <h5 class=\"card-title\">\n                <a data-toggle=\"collapse\" data-target=\"#filter-panel\" href=\"#\">\n                    <i class=\"fa fa-filter\"></i>Choose filter options\n                </a>\n            </h5>\n        </div>\n        <div id=\"filter-panel\" class=\"card-body\">\n            <div>\n                <!-- ko foreach: FlyFilters -->\n                <div class=\"row\">\n  \n                    <div class=\"col-sm-5 col-xs-4\">\n                        <div data-bind=\"with: Field\" class=\"checkbox\">\n                            <div class=\"checkbox\">\n                                <label>\n                                    <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFieldName\"></span>\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                    <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n                        <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n                            <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                        </div>\n                    </div>\n                    <div data-bind=\"with: Field\" class=\"col-xs-5\">\n                        <div data-bind=\"if: $parent.Apply\">\n                            <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                        </div>\n                    </div>\n                </div>\n                <!-- /ko -->\n                <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n            </div>\n        </div>\n    </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"filter-inner\">\n    <div class=\"table-responsive\">\n        <table class=\"table  table-hover table-borderless\" data-bind=\"visible: Filters().length>0\">\n            <thead>\n                <tr>\n                    <th style=\"width: 10%\"></th>\n                    <th style=\"width: 30%\">Field</th>\n                    <th style=\"width: 10%\"></th>\n                    <th style=\"width: 30%\">Filter</th>\n                    <th></th>\n                </tr>\n            </thead>\n            <tbody data-bind=\"foreach: Filters\">\n                <tr>\n                    <td>\n                        <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n                            <option>And</option>\n                            <option>Or</option>\n                        </select>\n                    </td>\n                    <td>\n                        <div class=\"form-group\">\n                            <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $root.selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n                        </div>\n                    </td>\n                    <td data-bind=\"with: Field\">\n                        <div class=\"form-group\">\n                            <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                        </div>\n                    </td>\n                    <td data-bind=\"with: Field\">\n                        <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                    </td>\n                    <td>\n                        <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n                        <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $root.canAddSeries() && $index()==0 -->\n                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $root.AddSeries.bind($data)\">Add Comparison</button>\n                        <!--/ko -->\n                    </td>\n                </tr>\n                <!-- ko foreach: compareTo -->\n                <tr>\n                    <td></td>\n                    <td style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $root.RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></td>\n                    <td>Compare To</td>\n                    <td>\n                        <div class=\"form-group\">\n                            <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n                        </div>\n                    </td>\n                </tr>\n                <!-- /ko -->\n            </tbody>\n        </table>\n    </div>\n    <div data-bind=\"template: {name: 'filter-group'}\"></div>\n    <div>\n        <button class=\"btn btn-sm btn-link\" data-bind=\"click: AddFilterGroup\">Add Group</button>&nbsp;\n        <button class=\"btn btn-sm btn-link\" data-bind=\"click: AddFilter\">Add Filter</button>\n    </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"filter-parameters\">\n    <div class=\"table-responsive card\" style=\"margin-left: 20px;\">\n        <div class=\"card-body\">\n            <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n            <table class=\"table  table-hover table-borderless\" data-bind=\"visible: showParameters\">\n                <thead>\n                    <tr>\n                        <th style=\"width: 30%\">Paramter</th>\n                        <th style=\"width: 20%\"></th>\n                        <th style=\"width: 30%\">Value</th>\n                        <th></th>\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Parameters\">\n                    <tr data-bind=\"ifnot: Hidden\">\n                        <td data-bind=\"text: DisplayName\">\n                        </td>\n                        <td>\n                            <div class=\"form-group\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n                            </div>\n                        </td>\n                        <td data-bind=\"with: Field\">\n                            <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                        </td>\n                        <td></td>\n                    </tr>\n  \n                </tbody>\n            </table>\n        </div>\n    </div>\n  </script>\n  <script type=\"text/html\" id=\"report-schedule\">\n  <div data-bind=\"with: scheduleBuilder\">\n      <div class=\"checkbox\">\n          <label>\n              <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n              Schedule Report\n          </label>\n      </div>\n      <div data-bind=\"if: hasSchedule\">\n  \n          <div class=\"form-inline form-group\">\n              <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span>&nbsp;\n              <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n              <div data-bind=\"if: selectedOption() == 'once'\">\n              &nbsp;on&nbsp;<input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n              </div>\n              <div data-bind=\"if: showDays\">\n              &nbsp;on&nbsp;<select multiple class=\"form-control\" required style=\"width: 30%;\" data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n              </div>\n              <div data-bind=\"if: showDates\">\n              &nbsp;on&nbsp;<select multiple class=\"form-control\" required style=\"width: 30%;\" data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n              </div>\n              <div data-bind=\"if: showMonths\">\n              &nbsp;of&nbsp;<select multiple class=\"form-control\" required style=\"width: 30%;\" data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n              </div>\n              <div data-bind=\"if: showAtTime\">\n              &nbsp;at&nbsp;<select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n              <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n              <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n                  <option>AM</option>\n                  <option>PM</option>\n              </select>\n              </div>\n          </div>\n          <div class=\"alert alert-info\">\n              Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n              <div data-bind=\"if: selectedOption() == 'once'\">\n              on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n              </div>\n              <div data-bind=\"if: showDays\">\n              on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n              </div>\n              <div data-bind=\"if: showDates\">\n              on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n              <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n              </div>\n              <div data-bind=\"if: showMonths\">\n              of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n              </div>\n              <div data-bind=\"if: showAtTime\">\n              at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n              </div>\n          </div>\n          <div class=\"form-horizontal form-group\">\n              <div class=\"form-group row\">\n                  <label class=\"col-sm-2 control-label\">Email to</label>\n                  <div class=\"col-sm-10\">\n                      <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n                  </div>\n              </div>\n          </div>\n          <div class=\"form-horizontal form-group\">\n              <div class=\"form-group row\">\n                  <div class=\"col-sm-2 control-label\">\n                      <div class=\"checkbox\">\n                          <label title=\"Set a date to start sending scheduled report\">\n                              <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n                              Set Schedule Start Date\n                          </label>\n                      </div>\n                  </div>\n                  <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n                      <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n                  </div>\n              </div>\n          </div>\n  \n          <div class=\"form-horizontal form-group\">\n              <div class=\"form-group row\">\n                  <div class=\"col-sm-2 control-label\">\n                      <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n                          <label>\n                              <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n                              Set Schedule End Date\n                          </label>\n                      </div>\n                  </div>\n                  <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n                      <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n                  </div>\n              </div>\n          </div>\n      </div>\n  </div>\n  </script>\n  \n    ");
+            this.cdref.detectChanges();
+        };
+        DotnetreportComponent.prototype.bindWindowResize = function (vm) {
+            $(window).resize(function () {
+                if (vm.reportMode == "execute") {
+                    vm.DrawChart();
+                }
+                ;
+            });
+        };
+        return DotnetreportComponent;
+    }());
+    DotnetreportComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-dotnetreport',
+                    template: "<div id=\"dot-net-report\" class=\"body-content\">\r\n    <div data-bind=\"if: ReportMode() == 'start' || ReportMode() == 'generate'\">\r\n    <h3>Report Builder</h3>\r\n    <p>\r\n        Manage your Reports below. You can use the intuitive and user friendly Report Builder to create many types of Ad-hoc Reports.\r\n    </p>\r\n    <div class=\"alert alert-info\">\r\n        <div data-bind=\"if: currentUserName\">Current User: <span data-bind=\"text: currentUserName\"></span></div>\r\n        <div data-bind=\"if: currentUserRole\">Current Roles: <span data-bind=\"text: currentUserRole\"></span></div>\r\n    </div>\r\n    <div class=\"alert alert-warning\">\r\n        You can easily integrate the Report Builder in your Application. See how to <a href=\"https://dotnetreport.com/getting-started-with-dotnet-report/\">Get Started here</a>. <br />\r\n    </div>\r\n    \r\n    <div data-bind=\"template: {name: 'admin-mode-template'}, visible: allowAdmin\" style=\"display: none;\"></div>\r\n    \r\n    <!--\r\n        The markup code below is related to presentation. You don't have to change it, unless you\r\n        intentionally want to change something in the Report Builder's behavior in your Application.\r\n        It's Recommended you use it as is. You will be responsible for managing and maintaining any changes.\r\n    -->\r\n    \r\n    <!-- Folders/Report List -->\r\n    <div id=\"report-start\">\r\n        <div class=\"card folder-panel\">\r\n            <div class=\"card-header\">\r\n                <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\r\n                    <a class=\"navbar-brand\" href=\"#\" data-bind=\"click: function() {SelectedFolder(null); designingHeader(false); }\">Manage Reports</a>\r\n                    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n                        <span class=\"navbar-toggler-icon\"></span>\r\n                    </button>\r\n    \r\n                    <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n                        <ul class=\"navbar-nav mr-auto\">\r\n                            <div data-bind=\"if: CanSaveReports() || adminMode()\">\r\n                            <li class=\"nav-item active\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: createNewReport\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                    <span class=\"fa fa-plus\"></span> Create a New Report\r\n                                </a>\r\n                            </li>\r\n                            </div>\r\n                            <li class=\"nav-item\" data-bind=\"visible: CanManageFolders() || adminMode()\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: ManageFolder.newFolder\">\r\n                                    <span class=\"fa fa-folder-o\"></span> Add a new Folder\r\n                                </a>\r\n                            </li>\r\n                            <li class=\"nav-item dropdown\" data-bind=\"visible: (CanManageFolders() || adminMode()) && SelectedFolder()!=null\">\r\n                                <a href=\"#\" class=\"nav-link dropdown-toggle\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <span class=\"fa fa-folder\"></span> Folder Options\r\n                                </a>\r\n                                <div class=\"dropdown-menu\">\r\n                                    <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: ManageFolder.editFolder\">Edit Selected Folder</a>\r\n                                    <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: ManageFolder.deleteFolder\">Delete Selected Folder</a>\r\n                                </div>\r\n                            </li>\r\n                            <li class=\"nav-item active\" data-bind=\"visible: false\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: function(){ initHeaderDesigner(); }\">\r\n                                    <span class=\"fa fa-arrow-up\"> Report Header</span>\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </nav>\r\n            </div>\r\n            <div class=\"card-body\">\r\n                <div data-bind=\"visible: designingHeader, with: headerDesigner\" style=\"display: none;\" class=\"overflow-auto\">\r\n                    <div class=\"checkbox\">\r\n                        <label>\r\n                            <input type=\"checkbox\" data-bind=\"checked: UseReportHeader\"> Use Report Header\r\n                        </label>\r\n                    </div>\r\n                    <div data-bind=\"visible: UseReportHeader\">\r\n                        <p class=\"alert alert-info\">\r\n                            You can design the common report header below that will be applied to all reports where report headers are turned on.\r\n                        </p>\r\n                        <canvas id=\"report-header\" width=\"900\" height=\"120\" style=\"border: solid 1px #ccc\"></canvas>\r\n                        <div class=\"form-inline\">\r\n                            <div class=\"form-group\">\r\n                                <button class=\"btn btn-sm\" title=\"Add Text\" data-bind=\"click: addText\"><span class=\"fa fa-font\"></span></button>\r\n                                <label class=\"btn btn-sm\" title=\"Add Image\">\r\n                                    <span class=\"fa fa-image\"></span>\r\n                                    <input type=\"file\" accept=\"image/*\" hidden data-bind=\"event: { change: function() { uploadImage($element.files[0]) } }\" />\r\n                                </label>\r\n                                <button class=\"btn btn-sm\" title=\"Add Line\" data-bind=\"click: addLine\"><span class=\"fa fa-arrows-h\"></span></button>\r\n                            </div>\r\n                            <div data-bind=\"if: selectedObject()\">\r\n                            <div class=\"form-group\">\r\n                                &nbsp;|&nbsp;\r\n                                <button class=\"btn btn-sm\" data-bind=\"click: remove\" title=\"Delete\"><span class=\"fa fa-trash\"></span></button>\r\n                                <div data-bind=\"if: getText()\">\r\n                                <select class=\"form-control form-control-sm\" title=\"Font Family\" data-bind=\"event: {change: setFontFamily }, value: objectProperties.fontFamily\">\r\n                                    <option value=\"arial\" selected>Arial</option>\r\n                                    <option value=\"helvetica\">Helvetica</option>\r\n                                    <option value=\"myriad pro\">Myriad Pro</option>\r\n                                    <option value=\"delicious\">Delicious</option>\r\n                                    <option value=\"verdana\">Verdana</option>\r\n                                    <option value=\"georgia\">Georgia</option>\r\n                                    <option value=\"courier\">Courier</option>\r\n                                    <option value=\"comic sans ms\">Comic Sans MS</option>\r\n                                    <option value=\"impact\">Impact</option>\r\n                                    <option value=\"monaco\">Monaco</option>\r\n                                    <option value=\"optima\">Optima</option>\r\n                                    <option value=\"hoefler text\">Hoefler Text</option>\r\n                                    <option value=\"plaster\">Plaster</option>\r\n                                    <option value=\"engagement\">Engagement</option>\r\n                                </select>\r\n                                &nbsp;\r\n                                <select class=\"form-control form-control-sm\" title=\"Text Align\" data-bind=\"event: {change: setTextAlign }, value: objectProperties.textAlign\">\r\n                                    <option>Left</option>\r\n                                    <option>Center</option>\r\n                                    <option>Right</option>\r\n                                    <option>Justify</option>\r\n                                </select>\r\n                                &nbsp;\r\n                                <input type=\"color\" size=\"5\" class=\"btn-object-action\" title=\"Font Color\" data-bind=\"event: {change: setFontColor }, value: objectProperties.fontColor\">\r\n                                <button class=\"btn btn-sm\" title=\"Bold\" data-bind=\"event: {click: setFontBold }, value: objectProperties.fontBold\"><span class=\"fa fa-bold\"></span></button>\r\n                                <button class=\"btn btn-sm\" title=\"Italic\" data-bind=\"event: {click: setFontItalic }, value: objectProperties.fontItalic\"><span class=\"fa fa-italic\"></span></button>\r\n                                <button class=\"btn btn-sm\" title=\"Underline\" data-bind=\"event: {click: setFontUnderline }, value: objectProperties.fontUnderline\"><span class=\"fa fa-underline\"></span></button>\r\n                                </div>\r\n                            </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"btn btn-primary\" data-bind=\"click: saveCanvas\">Save Changes</button>\r\n                </div>\r\n                <div data-bind=\"ifnot: designingHeader\">\r\n                    <div data-bind=\"visible: SelectedFolder()==null\">\r\n                        <p>Please choose Folders below to view Reports</p>\r\n                        <ul class=\"folder-list\" data-bind=\"foreach: Folders\">\r\n                            <li data-bind=\"click: function(){ $parent.SelectedFolder($data); }\">\r\n                                <span class=\"fa fa-3x fa-folder\" style=\"color: #ffd800\"></span>\r\n                                <span class=\"desc\" data-bind=\"text: FolderName\"></span>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div data-bind=\"visible: SelectedFolder()!=null\">\r\n                        <div class=\"clearfix\">\r\n                            <p class=\"pull-left\">Please choose a Report from this Folder</p>\r\n                            <div class=\"pull-right\">\r\n                                <a href=\"#\" data-bind=\"click: function(){ SelectedFolder(null); }\">\r\n                                    ..back to Folders List\r\n                                </a>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"list-group list-overflow\">\r\n                            <div data-bind=\"if: SelectedFolder()==null\">\r\n                                Please choose a folder to view Reports\r\n                            </div>\r\n                            <div data-bind=\"if: SelectedFolder()!=null && reportsInFolder().length==0\">\r\n                                No Reports Saved in this Folder\r\n                            </div>\r\n                            <div data-bind=\"foreach: reportsInFolder\">\r\n                            <div class=\"list-group-item\">\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-sm-7\">\r\n                                        <div class=\"fa fa-2x pull-left\" data-bind=\"css: {'fa-file': reportType=='List', 'fa-th-list': reportType=='Summary', 'fa-bar-chart': reportType=='Bar', 'fa-pie-chart': reportType=='Pie',  'fa-line-chart': reportType=='Line', 'fa-globe': reportType =='Map', 'fa-window-maximize': reportType=='Single'}\"></div>\r\n                                        <div class=\"pull-left\">\r\n                                            <h4><a data-bind=\"text: reportName, click: runReport\" style=\"cursor: pointer\"></a></h4>\r\n                                        </div>\r\n                                        <div class=\"clearfix\"></div>\r\n                                        <p data-bind=\"text: reportDescription\"></p>\r\n                                        <div data-bind=\"if: $parent.adminMode\">\r\n                                        <div class=\"small\">\r\n                                            <b>Report Access</b><br />\r\n                                            Manage by User <span class=\"badge badge-info\" data-bind=\"text: userId ? userId : 'No User'\"></span>\r\n                                            <br />\r\n                                            View only by User <span class=\"badge badge-info\" data-bind=\"text: (viewOnlyUserId ? viewOnlyUserId : (userId ? userId : 'Any User'))\"></span>\r\n                                            <br />\r\n                                            <div data-bind=\"if: deleteOnlyUserId\">\r\n                                            Delete only by User <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserId\"></span>\r\n                                            <br />\r\n                                            </div>\r\n                                            <div data-bind=\"if: userRole\">\r\n                                            Manage by Role <span class=\"badge badge-info\" data-bind=\"text: userRole ? userRole : 'No Role'\"></span>\r\n                                            <br />\r\n                                            </div>\r\n                                            <div data-bind=\"if: viewOnlyUserRole\">\r\n                                            View only by Role <span class=\"badge badge-info\" data-bind=\"text: viewOnlyUserRole ? viewOnlyUserRole : 'Any Role'\"></span>\r\n                                            <br />\r\n                                            </div>\r\n                                            <div data-bind=\"if: deleteOnlyUserRole\">\r\n                                            Delete only by Role <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserRole ? deleteOnlyUserRole : 'Same as Manage'\"></span>\r\n                                            <br />\r\n                                            </div>\r\n                                            <div data-bind=\"if: clientId\">\r\n                                            For Client <span class=\"label label-info\" data-bind=\"text: clientId ? clientId : 'Any'\"></span>\r\n                                            <br />\r\n                                            </div>\r\n                                        </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-sm-5 right-align\">\r\n                                        <div class=\"d-none d-md-block\">\r\n                                            <br />\r\n                                            <span data-bind=\"if: $root.CanSaveReports() || $root.adminMode() \">\r\n                                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: openReport, visible: canEdit\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                <span class=\"fa fa-edit\" aria-hidden=\"true\"></span>Edit\r\n                                            </button>\r\n                                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: copyReport\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                <span class=\"fa fa-copy\" aria-hidden=\"true\"></span>Copy\r\n                                            </button>\r\n                                            </span>\r\n                                            <button class=\"btn btn-sm btn-primary\" data-bind=\"click: runReport\">\r\n                                                <span class=\"fa fa-gears\" aria-hidden=\"true\"></span>Run\r\n                                            </button>\r\n                                            <button class=\"btn btn-sm btn-danger\" data-bind=\"click: deleteReport, visible: canDelete\">\r\n                                                <span class=\"fa fa-trash\" aria-hidden=\"true\"></span>Delete\r\n                                            </button>\r\n                                            <br />\r\n                                        </div>\r\n    \r\n                                        <div class=\"d-block d-md-none\">\r\n                                            <span data-bind=\"if: $root.CanSaveReports() || $root.adminMode()\">\r\n                                            <button class=\"btn btn-sm btn-secondary\" title=\"Edit Report\" data-bind=\"click: openReport, visible: canEdit\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                <span class=\"fa fa-edit\" aria-hidden=\"true\"></span>\r\n                                            </button>\r\n                                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: copyReport\" title=\"Copy Report\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                <span class=\"fa fa-copy\" aria-hidden=\"true\"></span>\r\n                                            </button>\r\n                                            </span>\r\n                                            <button class=\"btn btn-sm btn-primary\" data-bind=\"click: runReport\" title=\"Run Report\">\r\n                                                <span class=\"fa fa-gears\" aria-hidden=\"true\"></span>\r\n                                            </button>\r\n                                            <button class=\"btn btn-sm btn-danger\" title=\"Delete Report\" data-bind=\"click: deleteReport, visible: canDelete\">\r\n                                                <span class=\"fa fa-trash\" aria-hidden=\"true\"></span>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <!-- Report Builder -->\r\n    <div class=\"modal modal-fullscreen\" id=\"modal-reportbuilder\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" style=\"padding-right: 0px !important;\">\r\n        <div class=\"modal-dialog\">\r\n            <div class=\"modal-content\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\" id=\"myModalLabel\">\r\n                        <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/docs/designing-reports/\">\r\n                            <span class=\"fa fa-question-circle\"></span>\r\n                        </a>Design your Report\r\n                    </h5>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\r\n                </div>\r\n                <div class=\"modal-body needs-validation\">\r\n                    <h5><span class=\"fa fa-file\"></span>&nbsp;Choose Report Type</h5>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\r\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\r\n                                <span class=\"fa fa-2x fa-list-alt\"></span>\r\n                                <p>List</p>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\r\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\r\n                                <span class=\"fa fa-2x fa-table\"></span>\r\n                                <p>Summary</p>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\r\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\r\n                                <span class=\"fa fa-2x fa-bar-chart\"></span>\r\n                                <p>Bar</p>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\r\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\r\n                                <span class=\"fa fa-2x fa-pie-chart\"></span>\r\n                                <p>Pie</p>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\r\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\r\n                                <span class=\"fa fa-2x fa-line-chart\"></span>\r\n                                <p>Line</p>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\r\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType()=='Map'}\">\r\n                                <span class=\"fa fa-2x fa-globe\"></span>\r\n                                <p>Map</p>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\r\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\r\n                                <span class=\"fa fa-2x fa-window-maximize\"></span>\r\n                                <p>Single Value</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <hr />\r\n                    <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span>&nbsp;Choose Data for Report</h5>\r\n                    <div class=\"pull-right btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\r\n                        <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\r\n                            <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\r\n                        </label>\r\n                        <label class=\"btn btn-primary\">\r\n                            <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"clearfix\"></div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-12\">\r\n                            <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\r\n                            <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\r\n                        </div>\r\n    \r\n                        <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\r\n                            <div class=\"small pull-left\">\r\n                                Check the fields you would like to use in the Report\r\n                            </div>\r\n                            <div class=\"pull-right btn-toolbar\">\r\n                                <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\r\n                                <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\r\n    \r\n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\r\n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\r\n                            <div class=\"alert alert-info\">\r\n                                You are now creating a Customized Field. Check Fields you want to use in the calculation below, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\r\n                                Please note that Custom Field must be chosen in within the same Section and their data types must match.\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\r\n                            <div class=\"col-md-3 col-sm-4 col-xs-6\">\r\n                                <div class=\"list-group-item\">\r\n                                    <div class=\"checkbox\">\r\n                                        <label>\r\n                                            <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\r\n                                            <span data-bind=\"text: fieldName\"></span>\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n    \r\n                    <div data-bind=\"if: isFormulaField\">\r\n                        <br />\r\n                        <div class=\"card\">\r\n                            <div class=\"card-body\">\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-sm-6 small\">\r\n                                        Setup your Formula for calculating this Field\r\n                                    </div>\r\n                                    <div class=\"col-sm-6 right-align\">\r\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\r\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue, hidden: formulaOnlyHasDateFields\">Add Value</a>\r\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\r\n                                    <div class=\"col-sm-12\">\r\n                                        <div class=\"alert alert-info\">\r\n                                            For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-sm-2 control-label\">Field Label</label>\r\n                                    <div class=\"col-sm-10\">\r\n                                        <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-sm-2 control-label\">Data Format</label>\r\n                                    <div class=\"col-sm-10\">\r\n                                        <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\r\n                                            <!-- ko ifnot: formulaOnlyHasDateFields -->\r\n                                            <option>String</option>\r\n                                            <option>Integer</option>\r\n                                            <option>Decimal</option>\r\n                                            <!-- /ko -->\r\n                                            <!-- ko if: formulaOnlyHasDateFields -->\r\n                                            <option>Days</option>\r\n                                            <option>Hours</option>\r\n                                            <option>Minutes</option>\r\n                                            <option>Seconds</option>\r\n                                            <!-- /ko -->\r\n                                        </select>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal'\">\r\n                                    <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\r\n                                    <div class=\"col-sm-10\">\r\n                                        <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\r\n                                    </div>\r\n                                </div>\r\n    \r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-sm-2 control-label\">Field Formula</label>\r\n                                    <div class=\"col-sm-10\">\r\n                                        <div data-bind=\"foreach: formulaFields\">\r\n                                        <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\r\n                                        <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\r\n                                        <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\r\n                                            <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\r\n                                            <div data-bind=\"if: setupFormula.isConstantValue\">\r\n                                            <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\r\n                                            </div>\r\n                                        </div>\r\n                                        </div>\r\n                                        <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\r\n                                        <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\r\n                                            <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\r\n                                                <!-- ko if: !$root.formulaOnlyHasDateFields() || ($root.formulaOnlyHasDateFields() && $root.isConstantOperation($index())) -->\r\n                                                <option>+</option>\r\n                                                <!-- /ko -->\r\n                                                <option>-</option>\r\n                                                <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\r\n                                                <option>*</option>\r\n                                                <option>/</option>\r\n                                                <!-- /ko -->\r\n                                            </select>\r\n                                        </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"clearfix\"></div>\r\n                    </div>\r\n                    <div data-bind=\"if: SelectedFields().length>0\">\r\n                    <hr />\r\n                    <h5><span class=\"fa fa-table\"></span>&nbsp;Selected data for the Report</h5>\r\n                    <div>\r\n                        <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\r\n                            <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\r\n                        </div>\r\n                        <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\r\n                            <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\r\n                        </div>\r\n                        <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Map'\">\r\n                            <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Map Graph, the first field below has to be a Region, like a Country.\r\n                        </div>\r\n                        <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\r\n                            <li class=\"list-group-item\">\r\n                                <div class=\"row\">\r\n                                    <div class=\"col\">\r\n                                        <span class=\"fa fa-columns\"></span>\r\n                                        <span data-bind=\"text: selectedFieldName\"></span>\r\n                                        <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\r\n                                        <span data-bind=\"visible: !$root.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\r\n                                            <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $root.ReportType\"></span>Chart</span>\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"col\">\r\n                                        <div class=\"pull-right\" style=\"margin-top: -5px;\">\r\n                                            <select class=\"form-control form-control-sm\" data-bind=\"options: $root.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate, visible: $parent.AggregateReport() && !$parent.useStoredProc()\"></select>\r\n                                        </div>\r\n                                        <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\r\n                                            <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\r\n                                            <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\r\n                                            <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\r\n                                            <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\r\n                                                <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"\">\r\n                                            <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\r\n                                                <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $root.ReportType()!='List' && !$parent.useStoredProc()\">\r\n                                            <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\r\n                                                <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $root.isFieldValidForYAxis($index(), fieldType, selectedAggregate())  && $root.isChart() && $index()>0\">\r\n                                            <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\r\n                                                <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $root.IncludeSubTotal()  &&  (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\r\n                                            <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\r\n                                                <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't Sub Total\"></span>\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\">\r\n                                            <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\r\n                                                <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"pull-right\" style=\"padding-right: 15px;\">\r\n                                            <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\r\n                                                <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\r\n                                            </span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <hr />\r\n                    <div data-bind=\"if: useStoredProc\">\r\n                        <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\r\n    \r\n                        <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\r\n                            <div data-bind=\"template: {name: 'filter-parameters'}\" class=\"col\"></div>\r\n                            <br />\r\n                        </div>\r\n                    </div>\r\n                    <div data-bind=\"ifnot: useStoredProc\">\r\n                        <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\r\n    \r\n                        <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\r\n                            <div data-bind=\"template: {name: 'filter-group'}\" class=\"col-12\"></div>\r\n                            <br />\r\n    \r\n                            <div class=\"checkbox col-12\">\r\n                                <label>\r\n                                    <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\r\n                                    Allow setting up and saving filters on Report\r\n                                </label>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                    <hr />\r\n                    <h5><span class=\"fa fa-hourglass\"></span>&nbsp;Choose Schedule</h5>\r\n    \r\n                    <div style=\"padding: 10px 10px\">\r\n                        <div data-bind=\"template: {name: 'report-schedule'}\"></div>\r\n                    </div>\r\n                    <hr />\r\n    \r\n                    <div>\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-sm-2 control-label\">Report Name</label>\r\n                            <div class=\"col-sm-10\">\r\n                                <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-sm-2 control-label\">Report Description</label>\r\n                            <div class=\"col-sm-10\">\r\n                                <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\r\n                            </div>\r\n                        </div>\r\n                        <div data-bind=\"ifnot: useStoredProc\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-sm-2 control-label\">Sort By</label>\r\n                            <div class=\"col-sm-6\">\r\n                                <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\r\n                            </div>\r\n                            <div class=\"col-sm-2\">\r\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\r\n                            </div>\r\n                            <div class=\"col-sm-2\">\r\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\r\n                            </div>\r\n                        </div>\r\n                        <div data-bind=\"foreach: SortFields\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-sm-2 control-label\">&nbsp;&nbsp;Then Sort By</label>\r\n                            <div class=\"col-sm-4\">\r\n                                <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\r\n                            </div>\r\n                            <div class=\"col-sm-2\">\r\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\r\n                            </div>\r\n                            <div class=\"col-sm-2\">\r\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\r\n                            </div>\r\n                            <div class=\"col-sm-2\">\r\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\r\n                            </div>\r\n                        </div>\r\n                        </div>\r\n                        <div class=\"checkbox\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\r\n                                Include Subtotals\r\n                            </label>\r\n                        </div>\r\n                        <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\r\n                                Show only Unique Records\r\n                            </label>\r\n                        </div>\r\n                        </div>\r\n                        <div class=\"checkbox\" data-bind=\"visible: isChart\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\r\n                                Show Data along with Graph\r\n                            </label>\r\n                        </div>\r\n                        <div class=\"checkbox\" data-bind=\"visible: CanSaveReports() && ReportID()>0\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\r\n                                Save Report\r\n                            </label>\r\n                        </div>\r\n                        <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\r\n                            <label class=\"col-sm-2 control-label\">Choose Folder</label>\r\n                            <div class=\"col-sm-10\">\r\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\r\n                            </div>\r\n                        </div>\r\n    \r\n                        <div data-bind=\"if: adminMode\">\r\n                        <hr />\r\n                        <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\r\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\r\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <!-- Folder Edit Modal -->\r\n    <div class=\"modal\" id=\"folderModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog\">\r\n            <div class=\"modal-content\" data-bind=\"with: ManageFolder\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\">Manage Folder</h5>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n                        <span aria-hidden=\"true\">&times;</span>\r\n                    </button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <div class=\"form-group\">\r\n                        <label class=\"col-sm-4 col-md-4 control-label\">Folder Name</label>\r\n                        <div class=\"col-sm-8 col-md-8\">\r\n                            <input type=\"text\" class=\"form-control\" id=\"folderName\" required placeholder=\"Folder Name\" data-bind=\"value: FolderName\">\r\n                        </div>\r\n                    </div>\r\n                    <br />\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFolder\">Save</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <!-- Link Edit Modal -->\r\n    <div class=\"modal\" id=\"linkModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\r\n            <div class=\"modal-content\" data-bind=\"with: editLinkField\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\">Setup Link Field</h5>\r\n                </div>\r\n                <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\r\n                        </div>\r\n                    </div>\r\n                    <div data-bind=\"if: LinksToReport\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\r\n                            <div class=\"col-sm-7 col-md-7\">\r\n                                <select class=\"form-control\" required data-bind=\"options: $root.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\r\n                                Send field value as Report Filter Parameter\r\n                            </label>\r\n                        </div>\r\n                        <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\r\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\r\n                            <div class=\"col-sm-7 col-md-7\">\r\n                                <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div data-bind=\"ifnot: LinksToReport\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\r\n                            <div class=\"col-sm-7 col-md-7\">\r\n                                <input type=\"url\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"checkbox\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\r\n                                Send field value as Query Parameter\r\n                            </label>\r\n                        </div>\r\n                        <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\r\n                            <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\r\n                            <div class=\"col-sm-7 col-md-7\">\r\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\r\n                            </div>\r\n                        </div>\r\n                        <br />\r\n                    </div>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <!-- Field Options Modal -->\r\n    <div class=\"modal\" id=\"fieldOptionsModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\r\n            <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\">Setup Additional Field Options</h5>\r\n                </div>\r\n                <div class=\"modal-body needs-validation\">\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <select class=\"form-control\" required data-bind=\"options: $root.fieldFormatTypes, value: fieldFormat\"></select>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\" data-bind=\"visible: $root.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <select class=\"form-control\" required data-bind=\"options: $root.fieldAlignments, value: fieldAlign\"></select>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\r\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\r\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\r\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\r\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\r\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\r\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\r\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\r\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\r\n                                <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\r\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\r\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\r\n                                <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\r\n                        <div class=\"col-sm-7 col-md-7\">\r\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <div class=\"col-sm-12\">\r\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\r\n                                <label>\r\n                                    <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\r\n                                    Make Header Text Bold\r\n                                </label>\r\n                            </div>\r\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\r\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <div class=\"col-sm-12\">\r\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\r\n                                <label>\r\n                                    <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\r\n                                    Make Text Bold\r\n                                </label>\r\n                            </div>\r\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\r\n                                <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    </div>\r\n    <div class=\"row\" data-bind=\"if: ReportMode() == 'execute'\" class=\"\">\r\n    \r\n        <div data-bind=\"with: ReportResult\">\r\n    \r\n            <div data-bind=\"ifnot: HasError\">\r\n                <div class=\"report-view\" data-bind=\"with: $root\">\r\n                    \r\n                    <div class=\"pull-right\">\r\n                        <form action=\"{{ exportExcelUrl }}\" method=\"post\" id=\"downloadExcel\">\r\n                            <input type=\"hidden\" name=\"reportSql\" data-bind=\"value: currentSql\" />\r\n                            <input type=\"hidden\" name=\"connectKey\" data-bind=\"value: currentConnectKey\" />\r\n                            <input type=\"hidden\" name=\"reportName\" data-bind=\"value: ReportName\" />\r\n                            <input type=\"hidden\" name=\"allExpanded\" data-bind=\"value: allExpanded\" />\r\n                            <input type=\"hidden\" name=\"expandSqls\" data-bind=\"value: getExpandSqls\" />\r\n                            <input type=\"hidden\" name=\"columnDetails\" data-bind=\"value: getColumnDetails\" />\r\n                        </form>\r\n        \r\n                        <button data-bind=\"click: function() {$root.ReportMode('start');}\" class=\"btn btn-primary\">\r\n                            Back to Reports\r\n                        </button>\r\n                        \r\n                        <button type=\"button\" class=\"btn btn-secondary\" data-bind=\"click: printReport, visible: false\">\r\n                            <span class=\"fa fa-print\" aria-hidden=\"true\"></span> Print Report\r\n                        </button>\r\n    \r\n                        <button type=\"button\" class=\"btn btn-secondary\" data-bind=\"click: downloadExcel\">\r\n                            <span class=\"fa fa-file-excel\" aria-hidden=\"true\"></span> Export to Excel\r\n                        </button>\r\n                    </div>\r\n                    <br />\r\n                    <br />\r\n                    <div style=\"clear: both;\"></div>\r\n                    <br />\r\n        \r\n                    <div data-bind=\"if: EditFiltersOnReport\">\r\n                        <div class=\"card\">\r\n                            <div class=\"card-header\">\r\n                                <h5 class=\"card-title\">\r\n                                    <a data-toggle=\"collapse\" data-target=\"#filter-panel\" href=\"#\">\r\n                                        <i class=\"fa fa-filter\"></i>Choose filter options\r\n                                    </a>\r\n                                </h5>\r\n                            </div>\r\n                            <div id=\"filter-panel\" class=\"card-body\">\r\n                                <div>\r\n                                    <div class=\"row\">\r\n                                        <div data-bind=\"template: {name: 'filter-group'}\" class=\"col\"></div>\r\n                                    </div>\r\n        \r\n                                    <br />\r\n                                    <button class=\"btn btn-primary\" data-bind=\"click: SaveFilterAndRunReport\">Update Filters</button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <br />\r\n                    </div>\r\n                    <div data-bind=\"ifnot: EditFiltersOnReport\">\r\n                        <div data-bind=\"template: {name: 'fly-filter-template'}\"></div>\r\n                        <br />\r\n                    </div>\r\n                    <div data-bind=\"if: canDrilldown\">\r\n                        <button class=\"btn btn-secondary btn-xs\" data-bind=\"click: ExpandAll\">Expand All</button>\r\n                        <button class=\"btn btn-secondary btn-xs\" data-bind=\"click: CollapseAll\">Collapse All</button>\r\n                        <br />\r\n                        <br />\r\n                    </div>\r\n                    <div class=\"report-menubar\">\r\n                        <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\r\n                            <div class=\"form-inline\" data-bind=\"visible: pages()\">\r\n                                <div class=\"form-group pull-left total-records\">\r\n                                    <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span><br />\r\n                                </div>\r\n                                <div class=\"pull-left\">\r\n                                    <button class=\"btn btn-secondary btn-sm\" onclick=\"downloadExcel();\" data-bind=\"visible: !$root.isChart() || $root.ShowDataWithGraph()\" title=\"Export to Excel\">\r\n                                        <span class=\"fa fa-file-excel-o\"></span>\r\n                                    </button>\r\n                                </div>\r\n                                <div class=\"form-group pull-right\">\r\n                                    <div data-bind=\"template: 'pager-template', data: $data\"></div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"report-canvas\">\r\n                        <div class=\"report-container\">\r\n                            <div class=\"report-inner\">\r\n                                <div class=\"canvas-container\">\r\n                                    <canvas id=\"report-header\" width=\"900\" height=\"120\" data-bind=\"visible: useReportHeader\"></canvas>\r\n                                </div>\r\n                                <h2 data-bind=\"text: ReportName\"></h2>\r\n                                <p data-bind=\"html: ReportDescription\">\r\n                                </p>\r\n                                <div data-bind=\"with: ReportResult\">\r\n                                    <div data-bind=\"template: 'report-template', data: $data\"></div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <br />\r\n                </div>\r\n            </div>\r\n            <div data-bind=\"if: HasError\">\r\n                <h2 data-bind=\"text: $root.ReportName\"></h2>\r\n                <p data-bind=\"text: $root.ReportDescription\">\r\n                </p>\r\n    \r\n                <button data-bind=\"click: function() {$root.ReportMode('start');}\" class=\"btn btn-primary\">\r\n                    Back to Reports\r\n                </button>\r\n                <h3>An unexpected error occured while running the Report</h3>\r\n                <hr />\r\n                <b>Error Details</b>\r\n                <p data-bind=\"text: Exception\"></p>\r\n                <div data-bind=\"if: ReportDebug() || HasError()\">\r\n                    <br />\r\n                    <br />\r\n                    <hr />\r\n                    <code data-bind=\"text: ReportSql\">\r\n            \r\n                    </code>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    \r\n    </div>\r\n    <div class=\"modal\" id=\"noaccountModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog\">\r\n            <div class=\"modal-content\">\r\n                <div class=\"modal-header\">\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                    <h4 class=\"modal-title\">Account not Setup</h4>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <p class=\"alert alert-danger\">dotnet Report Account Configuration missing!</p>\r\n                    <p>You do not have the neccessary initial configuration completed to use dotnet Report.</p>\r\n                    <p>Please view the <a href=\"https://dotnetreport.com/blog/2016/03/getting-started-with-dotnet-report/\" target=\"_blank\">Getting Started Guide</a> to correctly configure dotnet Report.</p>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n      <!-- Templates -->\r\n      <div [innerHtml]=\"reportTemplates\"></div>\r\n      <!-- Templates -->\r\n    \r\n    <div style=\"padding-top: 30px;\">Powered by <a href=\"http://www.dotNetReport.com\" target=\"_blank\">dotnetReport.com</a></div>\r\n    </div>",
+                    styles: [""]
+                },] }
+    ];
+    DotnetreportComponent.ctorParameters = function () { return [
+        { type: i0.Injector },
+        { type: platformBrowser.DomSanitizer },
+        { type: i0.ChangeDetectorRef },
+        { type: String, decorators: [{ type: i0.Inject, args: [BASE_URL_TOKEN,] }] },
+        { type: http.HttpClient }
+    ]; };
+
+    var DotnetReportModule = /** @class */ (function () {
+        function DotnetReportModule() {
+        }
+        DotnetReportModule.forRoot = function (base_url) {
+            return {
+                ngModule: DotnetReportModule,
+                providers: [
+                    {
+                        provide: BASE_URL_TOKEN,
+                        useValue: base_url
+                    }
+                ]
+            };
+        };
+        return DotnetReportModule;
+    }());
+    DotnetReportModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        DotnetreportComponent,
+                    ],
+                    imports: [
+                        animations.BrowserAnimationsModule
+                    ],
+                    exports: [
+                        DotnetreportComponent,
+                    ]
+                },] }
+    ];
+
+    /*
+     * Public API Surface of dotnetreport-lib
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.DotnetReportModule = DotnetReportModule;
+    exports.DotnetReportService = DotnetReportService;
+    exports.DotnetreportComponent = DotnetreportComponent;
+    exports["ɵa"] = BASE_URL_TOKEN;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=dotnetreport-ng.umd.js.map