dattatable 2.1.6 → 2.1.8

package/build/dashboard/filter.js

@@ -35,11 +35,6 @@ var FilterSlideout = /** @class */ (function () {
             text: "Clear Filters",
             type: gd_sprest_bs_1.Components.ButtonTypes.OutlineDanger,
             onClick: function () {
-                // Parse the filters
-                for (var i = 0; i < _this._cbs.length; i++) {
-                    // Clear the filter
-                    _this._cbs[i].setValue("");
-                }
                 // Execute the event
                 _this._onClear ? _this._onClear() : null;
             }

package/build/dashboard/index.js

@@ -56,8 +56,13 @@ var Dashboard = /** @class */ (function () {
         // Create the filters
         this._filters = new filter_1.FilterSlideout({
             filters: this._props.filters ? this._props.filters.items : [],
-            onClear: this._props.filters ? this._props.filters.onClear : null,
-            onRendered: this._props.filters ? this._props.filters.onRendered : null
+            onRendered: this._props.filters ? this._props.filters.onRendered : null,
+            onClear: function () {
+                // Clear the filters
+                _this._dt.datatable.columns().search('').draw();
+                // Call the event
+                _this._props.filters ? _this._props.filters.onClear : null;
+            }
         });
         // Render the template
         var elTemplate = document.createElement("div");

package/build/itemForm.js

@@ -225,13 +225,13 @@ var ItemForm = /** @class */ (function () {
         props = this._onCreateViewForm ? this._onCreateViewForm(props) : props;
         // Override the form rendered event
         var customEvent = props.onFormRendered;
-        props.onFormRendered = function (form) {
+        props.onFormRendered = function (listForm) {
             /* Remove the bottom margin from the last row of the form */
-            form.el.lastChild.classList.remove("mb-3");
+            listForm.el.lastChild.classList.remove("mb-3");
             // Call the event if it exists
             tab && tab.onFormRendered ? tab.onFormRendered(form) : null;
             // Call the custom event if it exists
-            customEvent ? customEvent(form) : null;
+            customEvent ? customEvent(listForm) : null;
         };
         // Render the display form
         var form = gd_sprest_bs_1.Components.ListForm.renderDisplayForm(props);
@@ -257,11 +257,13 @@ var ItemForm = /** @class */ (function () {
         props = this._onCreateEditForm ? this._onCreateEditForm(props) : props;
         // Override the form rendered event
         var customEvent = props.onFormRendered;
-        props.onFormRendered = function (form) {
+        props.onFormRendered = function (listForm) {
             /* Remove the bottom margin from the last row of the form */
-            form.el.lastChild.classList.remove("mb-3");
+            listForm.el.lastChild.classList.remove("mb-3");
+            // Call the event if it exists
+            tab && tab.onFormRendered ? tab.onFormRendered(form) : null;
             // Call the custom event if it exists
-            customEvent ? customEvent(form) : null;
+            customEvent ? customEvent(listForm) : null;
         };
         // Render the edit form
         var form = gd_sprest_bs_1.Components.ListForm.renderEditForm(props);

package/dist/dattatable.js

@@ -93,7 +93,7 @@ eval("\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\n
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.FilterSlideout = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.8.5/node_modules/gd-sprest-bs/build/index.js\");\r\nvar canvas_1 = __webpack_require__(/*! ../common/canvas */ \"./build/common/canvas.js\");\r\n/**\r\n * Filter Slideout\r\n */\r\nvar FilterSlideout = /** @class */ (function () {\r\n    function FilterSlideout(props) {\r\n        this._cbs = null;\r\n        this._el = null;\r\n        this._filters = null;\r\n        this._items = null;\r\n        // Save the properties\r\n        this._filters = props.filters || [];\r\n        this._onClear = props.onClear;\r\n        // Initialize the variables\r\n        this._cbs = [];\r\n        this._items = [];\r\n        // Generate the items\r\n        this.generateFilters();\r\n        // Call the render event\r\n        props.onRendered ? props.onRendered(this._el) : null;\r\n    }\r\n    // Generates the filters\r\n    FilterSlideout.prototype.generateFilters = function () {\r\n        var _this = this;\r\n        // Create the filters element\r\n        this._el = document.createElement(\"div\");\r\n        // Render a clear button\r\n        gd_sprest_bs_1.Components.Button({\r\n            el: this._el,\r\n            className: \"mb-3\",\r\n            text: \"Clear Filters\",\r\n            type: gd_sprest_bs_1.Components.ButtonTypes.OutlineDanger,\r\n            onClick: function () {\r\n                // Parse the filters\r\n                for (var i = 0; i < _this._cbs.length; i++) {\r\n                    // Clear the filter\r\n                    _this._cbs[i].setValue(\"\");\r\n                }\r\n                // Execute the event\r\n                _this._onClear ? _this._onClear() : null;\r\n            }\r\n        });\r\n        // Parse the filters\r\n        for (var i = 0; i < this._filters.length; i++) {\r\n            var filter = this._filters[i];\r\n            // Add the filter\r\n            this._items.push(this.generateItem(filter));\r\n        }\r\n        // Default the first filter to be displayed\r\n        this._items.length > 0 ? this._items[0].showFl = true : null;\r\n        // Render an accordion\r\n        gd_sprest_bs_1.Components.Accordion({\r\n            el: this._el,\r\n            items: this._items\r\n        });\r\n    };\r\n    // Generates the navigation dropdown items\r\n    FilterSlideout.prototype.generateItem = function (filter) {\r\n        var _this = this;\r\n        // Create the item\r\n        var item = {\r\n            header: filter.header,\r\n            onRender: function (el) {\r\n                // Render the checkbox group\r\n                _this._cbs.push(gd_sprest_bs_1.Components.CheckboxGroup({\r\n                    el: el,\r\n                    items: filter.items,\r\n                    multi: filter.multi,\r\n                    type: gd_sprest_bs_1.Components.CheckboxGroupTypes.Switch,\r\n                    onChange: function (value) {\r\n                        // See if this is a single item\r\n                        if (filter.multi) {\r\n                            var values = [];\r\n                            // Parse the items\r\n                            var items = (value || []);\r\n                            for (var i = 0; i < items.length; i++) {\r\n                                // Append the value\r\n                                values.push(items[i].label);\r\n                            }\r\n                            // Execute the event\r\n                            filter.onFilter ? filter.onFilter(values) : null;\r\n                        }\r\n                        else {\r\n                            var item_1 = value;\r\n                            // Execute the event\r\n                            filter.onFilter ? filter.onFilter(item_1 ? item_1.label : \"\") : null;\r\n                        }\r\n                    }\r\n                }));\r\n            }\r\n        };\r\n        // Return the item\r\n        return item;\r\n    };\r\n    // Gets a checkbox group by its name\r\n    FilterSlideout.prototype.getFilter = function (key) {\r\n        // Parse the items\r\n        for (var i = 0; i < this._items.length; i++) {\r\n            var item = this._items[i];\r\n            // See if this is the target\r\n            if (item.header == key) {\r\n                // Return the checkbox\r\n                return this._cbs[i];\r\n            }\r\n        }\r\n        // Not found\r\n        return null;\r\n    };\r\n    // Sets a checkbox group filter\r\n    FilterSlideout.prototype.setFilterValue = function (key, value) {\r\n        // Get the filter\r\n        var filter = this.getFilter(key);\r\n        if (filter) {\r\n            // Set the value\r\n            filter.setValue(value);\r\n        }\r\n    };\r\n    // Hides the filter\r\n    FilterSlideout.prototype.hide = function () { canvas_1.CanvasForm.hide(); };\r\n    // Shows the filters\r\n    FilterSlideout.prototype.show = function () {\r\n        // Set the header and body\r\n        canvas_1.CanvasForm.setHeader('<h5 class=\"m-0\">Filters</h5>');\r\n        canvas_1.CanvasForm.setBody(this._el || \"<p>Loading the Filters...</p>\");\r\n        // Show the filters\r\n        canvas_1.CanvasForm.show();\r\n    };\r\n    return FilterSlideout;\r\n}());\r\nexports.FilterSlideout = FilterSlideout;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/filter.js?");
+eval("\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.FilterSlideout = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.8.5/node_modules/gd-sprest-bs/build/index.js\");\r\nvar canvas_1 = __webpack_require__(/*! ../common/canvas */ \"./build/common/canvas.js\");\r\n/**\r\n * Filter Slideout\r\n */\r\nvar FilterSlideout = /** @class */ (function () {\r\n    function FilterSlideout(props) {\r\n        this._cbs = null;\r\n        this._el = null;\r\n        this._filters = null;\r\n        this._items = null;\r\n        // Save the properties\r\n        this._filters = props.filters || [];\r\n        this._onClear = props.onClear;\r\n        // Initialize the variables\r\n        this._cbs = [];\r\n        this._items = [];\r\n        // Generate the items\r\n        this.generateFilters();\r\n        // Call the render event\r\n        props.onRendered ? props.onRendered(this._el) : null;\r\n    }\r\n    // Generates the filters\r\n    FilterSlideout.prototype.generateFilters = function () {\r\n        var _this = this;\r\n        // Create the filters element\r\n        this._el = document.createElement(\"div\");\r\n        // Render a clear button\r\n        gd_sprest_bs_1.Components.Button({\r\n            el: this._el,\r\n            className: \"mb-3\",\r\n            text: \"Clear Filters\",\r\n            type: gd_sprest_bs_1.Components.ButtonTypes.OutlineDanger,\r\n            onClick: function () {\r\n                // Execute the event\r\n                _this._onClear ? _this._onClear() : null;\r\n            }\r\n        });\r\n        // Parse the filters\r\n        for (var i = 0; i < this._filters.length; i++) {\r\n            var filter = this._filters[i];\r\n            // Add the filter\r\n            this._items.push(this.generateItem(filter));\r\n        }\r\n        // Default the first filter to be displayed\r\n        this._items.length > 0 ? this._items[0].showFl = true : null;\r\n        // Render an accordion\r\n        gd_sprest_bs_1.Components.Accordion({\r\n            el: this._el,\r\n            items: this._items\r\n        });\r\n    };\r\n    // Generates the navigation dropdown items\r\n    FilterSlideout.prototype.generateItem = function (filter) {\r\n        var _this = this;\r\n        // Create the item\r\n        var item = {\r\n            header: filter.header,\r\n            onRender: function (el) {\r\n                // Render the checkbox group\r\n                _this._cbs.push(gd_sprest_bs_1.Components.CheckboxGroup({\r\n                    el: el,\r\n                    items: filter.items,\r\n                    multi: filter.multi,\r\n                    type: gd_sprest_bs_1.Components.CheckboxGroupTypes.Switch,\r\n                    onChange: function (value) {\r\n                        // See if this is a single item\r\n                        if (filter.multi) {\r\n                            var values = [];\r\n                            // Parse the items\r\n                            var items = (value || []);\r\n                            for (var i = 0; i < items.length; i++) {\r\n                                // Append the value\r\n                                values.push(items[i].label);\r\n                            }\r\n                            // Execute the event\r\n                            filter.onFilter ? filter.onFilter(values) : null;\r\n                        }\r\n                        else {\r\n                            var item_1 = value;\r\n                            // Execute the event\r\n                            filter.onFilter ? filter.onFilter(item_1 ? item_1.label : \"\") : null;\r\n                        }\r\n                    }\r\n                }));\r\n            }\r\n        };\r\n        // Return the item\r\n        return item;\r\n    };\r\n    // Gets a checkbox group by its name\r\n    FilterSlideout.prototype.getFilter = function (key) {\r\n        // Parse the items\r\n        for (var i = 0; i < this._items.length; i++) {\r\n            var item = this._items[i];\r\n            // See if this is the target\r\n            if (item.header == key) {\r\n                // Return the checkbox\r\n                return this._cbs[i];\r\n            }\r\n        }\r\n        // Not found\r\n        return null;\r\n    };\r\n    // Sets a checkbox group filter\r\n    FilterSlideout.prototype.setFilterValue = function (key, value) {\r\n        // Get the filter\r\n        var filter = this.getFilter(key);\r\n        if (filter) {\r\n            // Set the value\r\n            filter.setValue(value);\r\n        }\r\n    };\r\n    // Hides the filter\r\n    FilterSlideout.prototype.hide = function () { canvas_1.CanvasForm.hide(); };\r\n    // Shows the filters\r\n    FilterSlideout.prototype.show = function () {\r\n        // Set the header and body\r\n        canvas_1.CanvasForm.setHeader('<h5 class=\"m-0\">Filters</h5>');\r\n        canvas_1.CanvasForm.setBody(this._el || \"<p>Loading the Filters...</p>\");\r\n        // Show the filters\r\n        canvas_1.CanvasForm.show();\r\n    };\r\n    return FilterSlideout;\r\n}());\r\nexports.FilterSlideout = FilterSlideout;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/filter.js?");
 
 /***/ }),
 
@@ -126,7 +126,7 @@ eval("\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\n
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\r\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    var desc = Object.getOwnPropertyDescriptor(m, k);\r\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n      desc = { enumerable: true, get: function() { return m[k]; } };\r\n    }\r\n    Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n}));\r\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\r\n};\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.Dashboard = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.8.5/node_modules/gd-sprest-bs/build/index.js\");\r\nvar itemForm_1 = __webpack_require__(/*! ../itemForm */ \"./build/itemForm.js\");\r\nvar filter_1 = __webpack_require__(/*! ./filter */ \"./build/dashboard/filter.js\");\r\nvar footer_1 = __webpack_require__(/*! ./footer */ \"./build/dashboard/footer.js\");\r\nvar header_1 = __webpack_require__(/*! ./header */ \"./build/dashboard/header.js\");\r\nvar navigation_1 = __webpack_require__(/*! ./navigation */ \"./build/dashboard/navigation.js\");\r\nvar table_1 = __webpack_require__(/*! ./table */ \"./build/dashboard/table.js\");\r\n// Export the components\r\n__exportStar(__webpack_require__(/*! ./filter */ \"./build/dashboard/filter.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./footer */ \"./build/dashboard/footer.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./header */ \"./build/dashboard/header.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./navigation */ \"./build/dashboard/navigation.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./table */ \"./build/dashboard/table.js\"), exports);\r\n/**\r\n * Dashboard\r\n */\r\nvar Dashboard = /** @class */ (function () {\r\n    // Constructor\r\n    function Dashboard(props) {\r\n        var _this = this;\r\n        this._dt = null;\r\n        this._filters = null;\r\n        this._props = null;\r\n        // Set the properties\r\n        this._props = props;\r\n        // Set the flag\r\n        typeof (props.useModal) === \"boolean\" ? itemForm_1.ItemForm.UseModal = props.useModal : null;\r\n        // Render the dashboard\r\n        this.render();\r\n        // Let the object get instaniated before calling the event\r\n        setTimeout(function () {\r\n            // Call the render event\r\n            props.onRendered ? props.onRendered(_this._props.el) : null;\r\n        }, 10);\r\n    }\r\n    // Renders the component\r\n    Dashboard.prototype.render = function () {\r\n        var _this = this;\r\n        // Create the filters\r\n        this._filters = new filter_1.FilterSlideout({\r\n            filters: this._props.filters ? this._props.filters.items : [],\r\n            onClear: this._props.filters ? this._props.filters.onClear : null,\r\n            onRendered: this._props.filters ? this._props.filters.onRendered : null\r\n        });\r\n        // Render the template\r\n        var elTemplate = document.createElement(\"div\");\r\n        elTemplate.classList.add(\"dashboard\");\r\n        elTemplate.innerHTML = \"\\n        <div class=\\\"row\\\">\\n            <div id=\\\"navigation\\\" class=\\\"col\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"header\\\" class=\\\"col mx-75\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"sub-navigation\\\" class=\\\"col\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"datatable\\\" class=\\\"col\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"footer\\\" class=\\\"col\\\"></div>\\n        </div>\".trim();\r\n        this._props.el.appendChild(elTemplate);\r\n        // Set/Default the visibility flags\r\n        var headerIsVisible = (this._props.hideHeader == null || this._props.hideHeader == true) && this._props.header == null ? false : true;\r\n        var navIsVisible = this._props.hideNavigation ? false : true;\r\n        var subNavIsVisible = (this._props.hideSubNavigation == null || this._props.hideSubNavigation == true) && this._props.subNavigation == null ? false : true;\r\n        // See if we are hiding the navigation\r\n        if (!navIsVisible) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#navigation\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            // Render the navigation\r\n            var navProps_1 = this._props.navigation || {};\r\n            new navigation_1.Navigation({\r\n                el: this._props.el.querySelector(\"#navigation\"),\r\n                hideFilter: navProps_1.showFilter != null ? !navProps_1.showFilter : false,\r\n                hideSearch: navProps_1.showSearch != null ? !navProps_1.showSearch : false,\r\n                items: navProps_1.items,\r\n                itemsEnd: navProps_1.itemsEnd,\r\n                title: navProps_1.title,\r\n                onFilterRendered: navProps_1.onFilterRendered,\r\n                onRendering: function (props) {\r\n                    // Set the default classname\r\n                    props.className = props.className || (\"bg-sharepoint rounded\" + (headerIsVisible || subNavIsVisible ? \"-top\" : \"\"));\r\n                    // Set the default type\r\n                    props.type = typeof (props.type) === \"number\" ? props.type : gd_sprest_bs_1.Components.NavbarTypes.Dark;\r\n                    // Call the rendering event if it exists\r\n                    navProps_1.onRendering ? navProps_1.onRendering(props) : null;\r\n                },\r\n                onRendered: navProps_1.onRendered,\r\n                onSearch: function (value) {\r\n                    // Search the data table\r\n                    _this._dt.search(value);\r\n                },\r\n                onSearchRendered: navProps_1.onSearchRendered,\r\n                onShowFilter: function () {\r\n                    // Show the filter\r\n                    _this._filters.show();\r\n                    // Call the event\r\n                    navProps_1.onShowFilter ? navProps_1.onShowFilter() : null;\r\n                },\r\n            });\r\n        }\r\n        // See if we are hiding the header\r\n        if (!headerIsVisible) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#header\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            var elHeader = this._props.el.querySelector(\"#header\");\r\n            // Render the header\r\n            var header = this._props.header || {};\r\n            new header_1.Header({\r\n                el: elHeader,\r\n                onRendering: this._props.header ? this._props.header.onRendering : null,\r\n                onRendered: this._props.header ? this._props.header.onRendered : null,\r\n                title: header.title\r\n            });\r\n            // See if the sub-nav is not visible\r\n            if (!navIsVisible && !subNavIsVisible) {\r\n                // Set the class name\r\n                elHeader.classList.add(\"rounded\");\r\n            }\r\n            else if (navIsVisible && !subNavIsVisible) {\r\n                // Set the class name\r\n                elHeader.classList.add(\"rounded-bottom\");\r\n            }\r\n            else if (!navIsVisible && subNavIsVisible) {\r\n                // Set the class name\r\n                elHeader.classList.add(\"rounded-top\");\r\n            }\r\n        }\r\n        // See if we are hiding the sub-navigation\r\n        if (!subNavIsVisible) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#sub-navigation\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            // Render the navigation\r\n            var navProps_2 = this._props.subNavigation || {};\r\n            new navigation_1.Navigation({\r\n                el: this._props.el.querySelector(\"#sub-navigation\"),\r\n                hideFilter: navProps_2.showFilter != null ? !navProps_2.showFilter : true,\r\n                hideSearch: navProps_2.showSearch != null ? !navProps_2.showSearch : true,\r\n                items: navProps_2.items,\r\n                itemsEnd: navProps_2.itemsEnd,\r\n                title: navProps_2.title,\r\n                onFilterRendered: navProps_2.onFilterRendered,\r\n                onRendering: function (props) {\r\n                    // Set the default classname\r\n                    props.className = props.className || (\"rounded\" + (!headerIsVisible && !navIsVisible ? \"\" : \"-bottom\"));\r\n                    props.className = \"sub-nav \" + props.className;\r\n                    // Set the default type\r\n                    props.type = typeof (props.type) === \"number\" ? props.type : gd_sprest_bs_1.Components.NavbarTypes.Light;\r\n                    // Call the rendering event if it exists\r\n                    navProps_2.onRendering ? navProps_2.onRendering(props) : null;\r\n                },\r\n                onRendered: navProps_2.onRendered,\r\n                onSearch: function (value) {\r\n                    // Search the data table\r\n                    _this._dt.search(value);\r\n                },\r\n                onShowFilter: function () {\r\n                    // Show the filter\r\n                    _this._filters.show();\r\n                },\r\n            });\r\n        }\r\n        // Render the data table\r\n        this._dt = new table_1.DataTable({\r\n            columns: this._props.table ? this._props.table.columns : null,\r\n            dtProps: this._props.table ? this._props.table.dtProps : null,\r\n            el: this._props.el.querySelector(\"#datatable\"),\r\n            onRendered: this._props.table ? this._props.table.onRendered : null,\r\n            rows: this._props.table ? this._props.table.rows : null\r\n        });\r\n        // See if we are hiding the footer\r\n        if (this._props.hideFooter) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#footer\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            // Render the footer\r\n            var footer = this._props.footer || {};\r\n            new footer_1.Footer({\r\n                el: this._props.el.querySelector(\"#footer\"),\r\n                items: footer.items,\r\n                itemsEnd: footer.itemsEnd,\r\n                onRendering: footer.onRendering,\r\n                onRendered: footer.onRendered\r\n            });\r\n        }\r\n    };\r\n    /**\r\n     * Public Interface\r\n     */\r\n    // Filter the table\r\n    Dashboard.prototype.filter = function (idx, value) {\r\n        // Filter the table\r\n        this._dt.filter(idx, value);\r\n    };\r\n    // Filter the table by multiple values\r\n    Dashboard.prototype.filterMulti = function (idx, values) {\r\n        // Filter the table\r\n        this._dt.filterMulti(idx, values);\r\n    };\r\n    // Returns a filter checkbox group by its key\r\n    Dashboard.prototype.getFilter = function (key) { return this._filters.getFilter(key); };\r\n    // Hides the filter\r\n    Dashboard.prototype.hideFilter = function () { this._filters.hide(); };\r\n    // Refresh the table\r\n    Dashboard.prototype.refresh = function (rows) {\r\n        // Refresh the table\r\n        this._dt.refresh(rows);\r\n    };\r\n    // Search the table\r\n    Dashboard.prototype.search = function (value) {\r\n        // Search the table\r\n        this._dt.search(value);\r\n    };\r\n    // Sets a filter checkbox group value\r\n    Dashboard.prototype.setFilterValue = function (key, value) { return this._filters.setFilterValue(key, value); };\r\n    // Shows the filter\r\n    Dashboard.prototype.showFilter = function () { this._filters.show(); };\r\n    return Dashboard;\r\n}());\r\nexports.Dashboard = Dashboard;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/index.js?");
+eval("\r\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    var desc = Object.getOwnPropertyDescriptor(m, k);\r\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n      desc = { enumerable: true, get: function() { return m[k]; } };\r\n    }\r\n    Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n}));\r\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\r\n};\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.Dashboard = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.8.5/node_modules/gd-sprest-bs/build/index.js\");\r\nvar itemForm_1 = __webpack_require__(/*! ../itemForm */ \"./build/itemForm.js\");\r\nvar filter_1 = __webpack_require__(/*! ./filter */ \"./build/dashboard/filter.js\");\r\nvar footer_1 = __webpack_require__(/*! ./footer */ \"./build/dashboard/footer.js\");\r\nvar header_1 = __webpack_require__(/*! ./header */ \"./build/dashboard/header.js\");\r\nvar navigation_1 = __webpack_require__(/*! ./navigation */ \"./build/dashboard/navigation.js\");\r\nvar table_1 = __webpack_require__(/*! ./table */ \"./build/dashboard/table.js\");\r\n// Export the components\r\n__exportStar(__webpack_require__(/*! ./filter */ \"./build/dashboard/filter.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./footer */ \"./build/dashboard/footer.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./header */ \"./build/dashboard/header.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./navigation */ \"./build/dashboard/navigation.js\"), exports);\r\n__exportStar(__webpack_require__(/*! ./table */ \"./build/dashboard/table.js\"), exports);\r\n/**\r\n * Dashboard\r\n */\r\nvar Dashboard = /** @class */ (function () {\r\n    // Constructor\r\n    function Dashboard(props) {\r\n        var _this = this;\r\n        this._dt = null;\r\n        this._filters = null;\r\n        this._props = null;\r\n        // Set the properties\r\n        this._props = props;\r\n        // Set the flag\r\n        typeof (props.useModal) === \"boolean\" ? itemForm_1.ItemForm.UseModal = props.useModal : null;\r\n        // Render the dashboard\r\n        this.render();\r\n        // Let the object get instaniated before calling the event\r\n        setTimeout(function () {\r\n            // Call the render event\r\n            props.onRendered ? props.onRendered(_this._props.el) : null;\r\n        }, 10);\r\n    }\r\n    // Renders the component\r\n    Dashboard.prototype.render = function () {\r\n        var _this = this;\r\n        // Create the filters\r\n        this._filters = new filter_1.FilterSlideout({\r\n            filters: this._props.filters ? this._props.filters.items : [],\r\n            onRendered: this._props.filters ? this._props.filters.onRendered : null,\r\n            onClear: function () {\r\n                // Clear the filters\r\n                _this._dt.datatable.columns().search('').draw();\r\n                // Call the event\r\n                _this._props.filters ? _this._props.filters.onClear : null;\r\n            }\r\n        });\r\n        // Render the template\r\n        var elTemplate = document.createElement(\"div\");\r\n        elTemplate.classList.add(\"dashboard\");\r\n        elTemplate.innerHTML = \"\\n        <div class=\\\"row\\\">\\n            <div id=\\\"navigation\\\" class=\\\"col\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"header\\\" class=\\\"col mx-75\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"sub-navigation\\\" class=\\\"col\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"datatable\\\" class=\\\"col\\\"></div>\\n        </div>\\n        <div class=\\\"row\\\">\\n            <div id=\\\"footer\\\" class=\\\"col\\\"></div>\\n        </div>\".trim();\r\n        this._props.el.appendChild(elTemplate);\r\n        // Set/Default the visibility flags\r\n        var headerIsVisible = (this._props.hideHeader == null || this._props.hideHeader == true) && this._props.header == null ? false : true;\r\n        var navIsVisible = this._props.hideNavigation ? false : true;\r\n        var subNavIsVisible = (this._props.hideSubNavigation == null || this._props.hideSubNavigation == true) && this._props.subNavigation == null ? false : true;\r\n        // See if we are hiding the navigation\r\n        if (!navIsVisible) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#navigation\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            // Render the navigation\r\n            var navProps_1 = this._props.navigation || {};\r\n            new navigation_1.Navigation({\r\n                el: this._props.el.querySelector(\"#navigation\"),\r\n                hideFilter: navProps_1.showFilter != null ? !navProps_1.showFilter : false,\r\n                hideSearch: navProps_1.showSearch != null ? !navProps_1.showSearch : false,\r\n                items: navProps_1.items,\r\n                itemsEnd: navProps_1.itemsEnd,\r\n                title: navProps_1.title,\r\n                onFilterRendered: navProps_1.onFilterRendered,\r\n                onRendering: function (props) {\r\n                    // Set the default classname\r\n                    props.className = props.className || (\"bg-sharepoint rounded\" + (headerIsVisible || subNavIsVisible ? \"-top\" : \"\"));\r\n                    // Set the default type\r\n                    props.type = typeof (props.type) === \"number\" ? props.type : gd_sprest_bs_1.Components.NavbarTypes.Dark;\r\n                    // Call the rendering event if it exists\r\n                    navProps_1.onRendering ? navProps_1.onRendering(props) : null;\r\n                },\r\n                onRendered: navProps_1.onRendered,\r\n                onSearch: function (value) {\r\n                    // Search the data table\r\n                    _this._dt.search(value);\r\n                },\r\n                onSearchRendered: navProps_1.onSearchRendered,\r\n                onShowFilter: function () {\r\n                    // Show the filter\r\n                    _this._filters.show();\r\n                    // Call the event\r\n                    navProps_1.onShowFilter ? navProps_1.onShowFilter() : null;\r\n                },\r\n            });\r\n        }\r\n        // See if we are hiding the header\r\n        if (!headerIsVisible) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#header\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            var elHeader = this._props.el.querySelector(\"#header\");\r\n            // Render the header\r\n            var header = this._props.header || {};\r\n            new header_1.Header({\r\n                el: elHeader,\r\n                onRendering: this._props.header ? this._props.header.onRendering : null,\r\n                onRendered: this._props.header ? this._props.header.onRendered : null,\r\n                title: header.title\r\n            });\r\n            // See if the sub-nav is not visible\r\n            if (!navIsVisible && !subNavIsVisible) {\r\n                // Set the class name\r\n                elHeader.classList.add(\"rounded\");\r\n            }\r\n            else if (navIsVisible && !subNavIsVisible) {\r\n                // Set the class name\r\n                elHeader.classList.add(\"rounded-bottom\");\r\n            }\r\n            else if (!navIsVisible && subNavIsVisible) {\r\n                // Set the class name\r\n                elHeader.classList.add(\"rounded-top\");\r\n            }\r\n        }\r\n        // See if we are hiding the sub-navigation\r\n        if (!subNavIsVisible) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#sub-navigation\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            // Render the navigation\r\n            var navProps_2 = this._props.subNavigation || {};\r\n            new navigation_1.Navigation({\r\n                el: this._props.el.querySelector(\"#sub-navigation\"),\r\n                hideFilter: navProps_2.showFilter != null ? !navProps_2.showFilter : true,\r\n                hideSearch: navProps_2.showSearch != null ? !navProps_2.showSearch : true,\r\n                items: navProps_2.items,\r\n                itemsEnd: navProps_2.itemsEnd,\r\n                title: navProps_2.title,\r\n                onFilterRendered: navProps_2.onFilterRendered,\r\n                onRendering: function (props) {\r\n                    // Set the default classname\r\n                    props.className = props.className || (\"rounded\" + (!headerIsVisible && !navIsVisible ? \"\" : \"-bottom\"));\r\n                    props.className = \"sub-nav \" + props.className;\r\n                    // Set the default type\r\n                    props.type = typeof (props.type) === \"number\" ? props.type : gd_sprest_bs_1.Components.NavbarTypes.Light;\r\n                    // Call the rendering event if it exists\r\n                    navProps_2.onRendering ? navProps_2.onRendering(props) : null;\r\n                },\r\n                onRendered: navProps_2.onRendered,\r\n                onSearch: function (value) {\r\n                    // Search the data table\r\n                    _this._dt.search(value);\r\n                },\r\n                onShowFilter: function () {\r\n                    // Show the filter\r\n                    _this._filters.show();\r\n                },\r\n            });\r\n        }\r\n        // Render the data table\r\n        this._dt = new table_1.DataTable({\r\n            columns: this._props.table ? this._props.table.columns : null,\r\n            dtProps: this._props.table ? this._props.table.dtProps : null,\r\n            el: this._props.el.querySelector(\"#datatable\"),\r\n            onRendered: this._props.table ? this._props.table.onRendered : null,\r\n            rows: this._props.table ? this._props.table.rows : null\r\n        });\r\n        // See if we are hiding the footer\r\n        if (this._props.hideFooter) {\r\n            // Hide the element\r\n            this._props.el.querySelector(\"#footer\").classList.add(\"d-none\");\r\n        }\r\n        else {\r\n            // Render the footer\r\n            var footer = this._props.footer || {};\r\n            new footer_1.Footer({\r\n                el: this._props.el.querySelector(\"#footer\"),\r\n                items: footer.items,\r\n                itemsEnd: footer.itemsEnd,\r\n                onRendering: footer.onRendering,\r\n                onRendered: footer.onRendered\r\n            });\r\n        }\r\n    };\r\n    /**\r\n     * Public Interface\r\n     */\r\n    // Filter the table\r\n    Dashboard.prototype.filter = function (idx, value) {\r\n        // Filter the table\r\n        this._dt.filter(idx, value);\r\n    };\r\n    // Filter the table by multiple values\r\n    Dashboard.prototype.filterMulti = function (idx, values) {\r\n        // Filter the table\r\n        this._dt.filterMulti(idx, values);\r\n    };\r\n    // Returns a filter checkbox group by its key\r\n    Dashboard.prototype.getFilter = function (key) { return this._filters.getFilter(key); };\r\n    // Hides the filter\r\n    Dashboard.prototype.hideFilter = function () { this._filters.hide(); };\r\n    // Refresh the table\r\n    Dashboard.prototype.refresh = function (rows) {\r\n        // Refresh the table\r\n        this._dt.refresh(rows);\r\n    };\r\n    // Search the table\r\n    Dashboard.prototype.search = function (value) {\r\n        // Search the table\r\n        this._dt.search(value);\r\n    };\r\n    // Sets a filter checkbox group value\r\n    Dashboard.prototype.setFilterValue = function (key, value) { return this._filters.setFilterValue(key, value); };\r\n    // Shows the filter\r\n    Dashboard.prototype.showFilter = function () { this._filters.show(); };\r\n    return Dashboard;\r\n}());\r\nexports.Dashboard = Dashboard;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/index.js?");
 
 /***/ }),
 
@@ -181,7 +181,7 @@ eval("\r\nvar __createBinding = (this && this.__createBinding) || (Object.create
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\r\nvar __assign = (this && this.__assign) || function () {\r\n    __assign = Object.assign || function(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\r\n                t[p] = s[p];\r\n        }\r\n        return t;\r\n    };\r\n    return __assign.apply(this, arguments);\r\n};\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.ItemForm = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.8.5/node_modules/gd-sprest-bs/build/index.js\");\r\nvar common_1 = __webpack_require__(/*! ./common */ \"./build/common/index.js\");\r\n/**\r\n * Item Form\r\n */\r\nvar ItemForm = /** @class */ (function () {\r\n    function ItemForm() {\r\n    }\r\n    Object.defineProperty(ItemForm, \"AutoClose\", {\r\n        // Auto Close Flag\r\n        set: function (value) {\r\n            // Update the flag\r\n            this.UseModal ? common_1.Modal.setAutoClose(value) : common_1.CanvasForm.setAutoClose(value);\r\n        },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"DisplayForm\", {\r\n        get: function () { return this._displayForms[0]; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"DisplayForms\", {\r\n        get: function () { return this._displayForms; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"EditForm\", {\r\n        get: function () { return this._editForms[0]; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"EditForms\", {\r\n        get: function () { return this._editForms; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"FormInfo\", {\r\n        get: function () { return this._info; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"IsDisplay\", {\r\n        get: function () { return this._controlMode == gd_sprest_bs_1.SPTypes.ControlMode.Display; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"IsEdit\", {\r\n        get: function () { return this._controlMode == gd_sprest_bs_1.SPTypes.ControlMode.Edit; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"IsNew\", {\r\n        get: function () { return this._controlMode == gd_sprest_bs_1.SPTypes.ControlMode.New; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"ListName\", {\r\n        get: function () { return this._listName; },\r\n        set: function (value) { this._listName = value; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"Tabs\", {\r\n        get: function () { return this._tabs; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"UseModal\", {\r\n        get: function () { return this._useModal; },\r\n        set: function (value) { this._useModal = value; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    // Sets the size of the modal or canvas\r\n    ItemForm.setSize = function (value) {\r\n        // Set the modal type or offcanvas size\r\n        this._useModal ? common_1.Modal.setType(value) : common_1.CanvasForm.setSize(value);\r\n    };\r\n    /** Public Methods */\r\n    // Closes the item form\r\n    ItemForm.close = function () {\r\n        this._useModal ? common_1.Modal.hide() : common_1.CanvasForm.hide();\r\n    };\r\n    // Creates a new task\r\n    ItemForm.create = function (props) {\r\n        if (props === void 0) { props = {}; }\r\n        // Set the properties\r\n        this._controlMode = gd_sprest_bs_1.SPTypes.ControlMode.New;\r\n        this._info = props.info;\r\n        this._onCreateEditForm = props.onCreateEditForm;\r\n        this._onFormButtonsRendering = props.onFormButtonsRendering;\r\n        this._onGetListInfo = props.onGetListInfo;\r\n        this._onSave = props.onSave;\r\n        this._onSetFooter = props.onSetFooter;\r\n        this._onSetHeader = props.onSetHeader;\r\n        this._onShowForm = props.onShowForm;\r\n        this._onValidation = props.onValidation;\r\n        this._tabInfo = props.tabInfo;\r\n        this._updateEvent = props.onUpdate;\r\n        typeof (props.useModal) === \"boolean\" ? this._useModal = props.useModal : false;\r\n        // Load the item\r\n        this.load(props.webUrl);\r\n    };\r\n    // Edits a task\r\n    ItemForm.edit = function (props) {\r\n        // Set the properties\r\n        this._controlMode = gd_sprest_bs_1.SPTypes.ControlMode.Edit;\r\n        this._info = props.info;\r\n        this._onCreateEditForm = props.onCreateEditForm;\r\n        this._onFormButtonsRendering = props.onFormButtonsRendering;\r\n        this._onGetListInfo = props.onGetListInfo;\r\n        this._onSave = props.onSave;\r\n        this._onSetFooter = props.onSetFooter;\r\n        this._onSetHeader = props.onSetHeader;\r\n        this._onShowForm = props.onShowForm;\r\n        this._onValidation = props.onValidation;\r\n        this._tabInfo = props.tabInfo;\r\n        this._updateEvent = props.onUpdate;\r\n        typeof (props.useModal) === \"boolean\" ? this._useModal = props.useModal : false;\r\n        // Load the form\r\n        this.load(props.webUrl, props.itemId);\r\n    };\r\n    // Loads the form information\r\n    ItemForm.loadFormInfo = function (props) {\r\n        var _this = this;\r\n        // Return a promise\r\n        return new Promise(function (resolve) {\r\n            // Load the form info\r\n            gd_sprest_bs_1.Helper.ListForm.create(props).then(function (info) {\r\n                // Save the information\r\n                _this._info = info;\r\n                // Resolve the request\r\n                resolve();\r\n            });\r\n        });\r\n    };\r\n    // Views the task\r\n    ItemForm.view = function (props) {\r\n        // Set the properties\r\n        this._controlMode = gd_sprest_bs_1.SPTypes.ControlMode.Display;\r\n        this._info = props.info;\r\n        this._onCreateViewForm = props.onCreateViewForm;\r\n        this._onFormButtonsRendering = props.onFormButtonsRendering;\r\n        this._onGetListInfo = props.onGetListInfo;\r\n        this._onSetFooter = props.onSetFooter;\r\n        this._onSetHeader = props.onSetHeader;\r\n        this._onShowForm = props.onShowForm;\r\n        this._tabInfo = props.tabInfo;\r\n        typeof (props.useModal) === \"boolean\" ? this._useModal = props.useModal : false;\r\n        // Load the form\r\n        this.load(props.webUrl, props.itemId);\r\n    };\r\n    /** Private Methods */\r\n    // Load the form information\r\n    ItemForm.load = function (webUrl, itemId) {\r\n        var _this = this;\r\n        // Clear the forms\r\n        this._displayForms = [];\r\n        this._editForms = [];\r\n        // Show a loading dialog\r\n        common_1.LoadingDialog.setHeader(\"Loading the Item\");\r\n        common_1.LoadingDialog.setBody(\"This will close after the form is loaded...\");\r\n        common_1.LoadingDialog.show();\r\n        // Load the form information\r\n        (function () {\r\n            // Return a promise\r\n            return new Promise(function (resolve) {\r\n                // See if the info already exists\r\n                if (_this._info) {\r\n                    // Resolve the request\r\n                    resolve();\r\n                }\r\n                else {\r\n                    // Set the list form properties\r\n                    var listProps = {\r\n                        listName: _this.ListName,\r\n                        itemId: itemId,\r\n                        webUrl: webUrl\r\n                    };\r\n                    // Call the event\r\n                    listProps = _this._onGetListInfo ? _this._onGetListInfo(listProps) : listProps;\r\n                    // Load the form info\r\n                    gd_sprest_bs_1.Helper.ListForm.create(listProps).then(function (info) {\r\n                        // Save the information\r\n                        _this._info = info;\r\n                        // Resolve the request\r\n                        resolve();\r\n                    });\r\n                }\r\n            });\r\n        })().then(function () {\r\n            // Render the form\r\n            _this.renderForm();\r\n        });\r\n    };\r\n    // Renders the display form\r\n    ItemForm.renderDisplayForm = function (el, tab) {\r\n        // Ensure the element exists\r\n        el = el || document.createElement(\"div\");\r\n        // Set the form properties\r\n        var displayAttachments = tab ? tab.fields && tab.fields.indexOf(\"Attachments\") >= 0 : true;\r\n        var props = {\r\n            el: el,\r\n            displayAttachments: displayAttachments,\r\n            info: this._info,\r\n            rowClassName: \"mb-3\",\r\n            includeFields: tab ? tab.fields : null\r\n        };\r\n        // Call the event if it exists\r\n        props = this._onCreateViewForm ? this._onCreateViewForm(props) : props;\r\n        // Override the form rendered event\r\n        var customEvent = props.onFormRendered;\r\n        props.onFormRendered = function (form) {\r\n            /* Remove the bottom margin from the last row of the form */\r\n            form.el.lastChild.classList.remove(\"mb-3\");\r\n            // Call the event if it exists\r\n            tab && tab.onFormRendered ? tab.onFormRendered(form) : null;\r\n            // Call the custom event if it exists\r\n            customEvent ? customEvent(form) : null;\r\n        };\r\n        // Render the display form\r\n        var form = gd_sprest_bs_1.Components.ListForm.renderDisplayForm(props);\r\n        this._displayForms.push(form);\r\n        // Return the form element\r\n        return el;\r\n    };\r\n    // Renders the edit form\r\n    ItemForm.renderEditForm = function (el, tab) {\r\n        // Ensure the element exists\r\n        el = el || document.createElement(\"div\");\r\n        // Set the form properties\r\n        var displayAttachments = tab ? tab.fields && tab.fields.indexOf(\"Attachments\") >= 0 : true;\r\n        var props = {\r\n            el: el,\r\n            displayAttachments: displayAttachments,\r\n            info: this._info,\r\n            rowClassName: \"mb-3\",\r\n            controlMode: this.IsNew ? gd_sprest_bs_1.SPTypes.ControlMode.New : gd_sprest_bs_1.SPTypes.ControlMode.Edit,\r\n            includeFields: tab ? tab.fields : null\r\n        };\r\n        // Call the event if it exists\r\n        props = this._onCreateEditForm ? this._onCreateEditForm(props) : props;\r\n        // Override the form rendered event\r\n        var customEvent = props.onFormRendered;\r\n        props.onFormRendered = function (form) {\r\n            /* Remove the bottom margin from the last row of the form */\r\n            form.el.lastChild.classList.remove(\"mb-3\");\r\n            // Call the custom event if it exists\r\n            customEvent ? customEvent(form) : null;\r\n        };\r\n        // Render the edit form\r\n        var form = gd_sprest_bs_1.Components.ListForm.renderEditForm(props);\r\n        this._editForms.push(form);\r\n        // Return the form element\r\n        return el;\r\n    };\r\n    // Renders the footer\r\n    ItemForm.renderFooter = function () {\r\n        var _this = this;\r\n        // Render the form buttons\r\n        var elButtons = document.createElement(\"div\");\r\n        // Add styling if not using a modal\r\n        if (!this._useModal) {\r\n            elButtons.classList.add(\"float-end\");\r\n            elButtons.style.padding = \"1rem 0\";\r\n        }\r\n        // Append the create/update button\r\n        this._useModal ? common_1.Modal.setFooter(elButtons) : common_1.CanvasForm.BodyElement.appendChild(elButtons);\r\n        // See if we are rendering a display form\r\n        if (this.IsDisplay) {\r\n            // Call the item form button rendering event\r\n            var formButtons = [];\r\n            formButtons = this._onFormButtonsRendering ? this._onFormButtonsRendering(formButtons) : formButtons;\r\n            // Render the form buttons\r\n            formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({\r\n                el: elButtons,\r\n                buttons: formButtons\r\n            }) : null;\r\n        }\r\n        else {\r\n            // Call the item form button rendering event\r\n            var formButtons = [{\r\n                    text: this.IsNew ? \"Create\" : \"Update\",\r\n                    type: gd_sprest_bs_1.Components.ButtonTypes.OutlinePrimary,\r\n                    onClick: function () { _this.save(); }\r\n                }];\r\n            formButtons = this._onFormButtonsRendering ? this._onFormButtonsRendering(formButtons) : formButtons;\r\n            // Render the form buttons\r\n            formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({\r\n                el: elButtons,\r\n                buttons: formButtons\r\n            }) : null;\r\n        }\r\n        // Call the footer event\r\n        this._onSetFooter ? this._onSetFooter(this._useModal ? common_1.Modal.FooterElement : elButtons) : null;\r\n    };\r\n    // Renders the form\r\n    ItemForm.renderForm = function () {\r\n        // Clear the form\r\n        (this._useModal ? common_1.Modal : common_1.CanvasForm).clear();\r\n        // Set the header\r\n        (this._useModal ? common_1.Modal : common_1.CanvasForm).setHeader('<h5 class=\"m-0\">' + (this._info.item ? this._info.item.Title : \"Create Item\") + '</h5>');\r\n        // Call the header event\r\n        this._onSetHeader ? this._onSetHeader(this._useModal ? common_1.Modal.HeaderElement : common_1.CanvasForm.HeaderElement) : null;\r\n        // See if we are rendering tabs\r\n        if (this._tabInfo) {\r\n            // Render the tabs\r\n            this.renderTabs();\r\n        }\r\n        else {\r\n            // Render the form based on the type\r\n            var elForm = this.IsDisplay ? this.renderDisplayForm() : this.renderEditForm();\r\n            // Update the body\r\n            (this._useModal ? common_1.Modal : common_1.CanvasForm).setBody(elForm);\r\n        }\r\n        // Render the footer\r\n        this.renderFooter();\r\n        // Call the event\r\n        this._onShowForm ? this._onShowForm(this._useModal ? common_1.Modal : common_1.CanvasForm) : null;\r\n        // Close the dialog\r\n        common_1.LoadingDialog.hide();\r\n        // Show the form\r\n        (this._useModal ? common_1.Modal : common_1.CanvasForm).show();\r\n    };\r\n    // Generates a tab\r\n    ItemForm.renderTabs = function () {\r\n        var _this = this;\r\n        var tabs = [];\r\n        // Parse the tabs to render\r\n        for (var i = 0; i < this._tabInfo.tabs.length; i++) {\r\n            var tabInfo = this._tabInfo.tabs[i];\r\n            // Generate the tab\r\n            var tab = {\r\n                data: tabInfo,\r\n                isActive: i == 0,\r\n                tabName: tabInfo.title,\r\n                onRender: function (el, item) {\r\n                    var tab = item.data;\r\n                    // Render the form\r\n                    _this.IsDisplay ? _this.renderDisplayForm(el, tab) : _this.renderEditForm(el, tab);\r\n                    // Call the event\r\n                    tab.onRendered ? tab.onRendered(el, item) : null;\r\n                }\r\n            };\r\n            // Call the rendering event\r\n            tab = tabInfo.onRendering ? tabInfo.onRendering(tab) : tab;\r\n            if (tab) {\r\n                // Append the tab\r\n                tabs.push(tab);\r\n            }\r\n        }\r\n        // Render the tabs\r\n        this._tabs = gd_sprest_bs_1.Components.ListGroup({\r\n            el: this.UseModal ? common_1.Modal.BodyElement : common_1.CanvasForm.BodyElement,\r\n            colWidth: this._tabInfo.isVertical ? 4 : 12,\r\n            isTabs: true,\r\n            isHorizontal: this._tabInfo.isVertical != true,\r\n            items: tabs\r\n        });\r\n        // Return the tabs element\r\n        return this._tabs.el;\r\n    };\r\n    // Saves the edit form\r\n    ItemForm.save = function (form) {\r\n        var _this = this;\r\n        var values = {};\r\n        // Default the form\r\n        var forms = form ? [form] : this._editForms;\r\n        // Display a loading dialog\r\n        common_1.LoadingDialog.setHeader(\"Validation\");\r\n        common_1.LoadingDialog.setBody(\"Validating the form...\");\r\n        common_1.LoadingDialog.show();\r\n        // Validate the forms\r\n        var isValid = true;\r\n        var counter = 0;\r\n        gd_sprest_bs_1.Helper.Executor(forms, function (form) {\r\n            // Update the values\r\n            values = __assign(__assign({}, values), form.getValues());\r\n            // See if the form is not valid\r\n            if (!form.isValid()) {\r\n                // Set the flag\r\n                isValid = false;\r\n            }\r\n            // See if tabs exist\r\n            if (_this.Tabs) {\r\n                // Get the tab\r\n                var tab = _this.Tabs.el.querySelectorAll(\".list-group-item\")[counter++];\r\n                if (tab) {\r\n                    // Clear the class name\r\n                    tab.classList.remove(\"is-valid\");\r\n                    tab.classList.remove(\"is-invalid\");\r\n                    // Set the class name\r\n                    tab.classList.add(isValid ? \"is-valid\" : \"is-invalid\");\r\n                }\r\n            }\r\n            // Set the tab class\r\n        }).then(\r\n        // Success\r\n        function () {\r\n            // Call the custom validation event\r\n            _this.validate(values).then(\r\n            // Valid\r\n            function () {\r\n                // See if the form(s) are valid\r\n                if (isValid) {\r\n                    // Update the loading dialog\r\n                    common_1.LoadingDialog.setHeader(\"Saving the Item\");\r\n                    common_1.LoadingDialog.setBody((_this.IsNew ? \"Creating\" : \"Updating\") + \" the Item\");\r\n                    // Saves the item\r\n                    var saveItem_1 = function (values) {\r\n                        // Save the item\r\n                        forms[0].save(values).then(function (item) {\r\n                            // Call the update event\r\n                            _this._updateEvent ? _this._updateEvent(item) : null;\r\n                            // Close the dialogs\r\n                            (_this._useModal ? common_1.Modal : common_1.CanvasForm).hide();\r\n                            common_1.LoadingDialog.hide();\r\n                        });\r\n                    };\r\n                    // Call the save event\r\n                    values = _this._onSave ? _this._onSave(values) : values;\r\n                    // See if the onSave event returned a promise\r\n                    if (values && typeof (values[\"then\"]) === \"function\") {\r\n                        // Wait for the promise to complete\r\n                        values[\"then\"](function (values) {\r\n                            // Save the item\r\n                            saveItem_1(values);\r\n                        });\r\n                    }\r\n                    else {\r\n                        // Save the item\r\n                        saveItem_1(values);\r\n                    }\r\n                }\r\n                else {\r\n                    // Close the dialog\r\n                    common_1.LoadingDialog.hide();\r\n                }\r\n            }, \r\n            // Not Valid\r\n            function () {\r\n                // Close the dialog\r\n                common_1.LoadingDialog.hide();\r\n            });\r\n        });\r\n    };\r\n    // Validates the form\r\n    ItemForm.validate = function (values) {\r\n        var _this = this;\r\n        // Return a promise\r\n        return new Promise(function (resolve, reject) {\r\n            var isValid = true;\r\n            // Call the validation event\r\n            var returnVal = _this._onValidation ? _this._onValidation(values) : null;\r\n            if (returnVal && typeof (returnVal.then) === \"function\") {\r\n                // Wait for the promise to complete\r\n                returnVal.then(function (isValid) {\r\n                    // Resolve the request\r\n                    isValid ? resolve() : reject();\r\n                });\r\n            }\r\n            else {\r\n                if (typeof (returnVal) === \"boolean\") {\r\n                    // Update the flag\r\n                    isValid = returnVal;\r\n                }\r\n                // Resolve the request\r\n                isValid ? resolve() : reject();\r\n            }\r\n        });\r\n    };\r\n    ItemForm._onCreateEditForm = null;\r\n    ItemForm._onCreateViewForm = null;\r\n    ItemForm._onFormButtonsRendering = null;\r\n    ItemForm._onGetListInfo = null;\r\n    ItemForm._onSetFooter = null;\r\n    ItemForm._onSetHeader = null;\r\n    ItemForm._onShowForm = null;\r\n    ItemForm._onSave = null;\r\n    ItemForm._onValidation = null;\r\n    ItemForm._tabInfo = null;\r\n    ItemForm._updateEvent = null;\r\n    // Display Form\r\n    ItemForm._displayForms = null;\r\n    // Edit Form\r\n    ItemForm._editForms = null;\r\n    // Form Information\r\n    ItemForm._info = null;\r\n    // Form Modes\r\n    ItemForm._controlMode = null;\r\n    // List name\r\n    ItemForm._listName = null;\r\n    // List Form Tabs\r\n    ItemForm._tabs = null;\r\n    // Flag to use a modal or canvas (default)\r\n    ItemForm._useModal = false;\r\n    return ItemForm;\r\n}());\r\nexports.ItemForm = ItemForm;\r\n\n\n//# sourceURL=webpack://dattatable/./build/itemForm.js?");
+eval("\r\nvar __assign = (this && this.__assign) || function () {\r\n    __assign = Object.assign || function(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\r\n                t[p] = s[p];\r\n        }\r\n        return t;\r\n    };\r\n    return __assign.apply(this, arguments);\r\n};\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.ItemForm = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.8.5/node_modules/gd-sprest-bs/build/index.js\");\r\nvar common_1 = __webpack_require__(/*! ./common */ \"./build/common/index.js\");\r\n/**\r\n * Item Form\r\n */\r\nvar ItemForm = /** @class */ (function () {\r\n    function ItemForm() {\r\n    }\r\n    Object.defineProperty(ItemForm, \"AutoClose\", {\r\n        // Auto Close Flag\r\n        set: function (value) {\r\n            // Update the flag\r\n            this.UseModal ? common_1.Modal.setAutoClose(value) : common_1.CanvasForm.setAutoClose(value);\r\n        },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"DisplayForm\", {\r\n        get: function () { return this._displayForms[0]; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"DisplayForms\", {\r\n        get: function () { return this._displayForms; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"EditForm\", {\r\n        get: function () { return this._editForms[0]; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"EditForms\", {\r\n        get: function () { return this._editForms; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"FormInfo\", {\r\n        get: function () { return this._info; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"IsDisplay\", {\r\n        get: function () { return this._controlMode == gd_sprest_bs_1.SPTypes.ControlMode.Display; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"IsEdit\", {\r\n        get: function () { return this._controlMode == gd_sprest_bs_1.SPTypes.ControlMode.Edit; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"IsNew\", {\r\n        get: function () { return this._controlMode == gd_sprest_bs_1.SPTypes.ControlMode.New; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"ListName\", {\r\n        get: function () { return this._listName; },\r\n        set: function (value) { this._listName = value; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"Tabs\", {\r\n        get: function () { return this._tabs; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    Object.defineProperty(ItemForm, \"UseModal\", {\r\n        get: function () { return this._useModal; },\r\n        set: function (value) { this._useModal = value; },\r\n        enumerable: false,\r\n        configurable: true\r\n    });\r\n    // Sets the size of the modal or canvas\r\n    ItemForm.setSize = function (value) {\r\n        // Set the modal type or offcanvas size\r\n        this._useModal ? common_1.Modal.setType(value) : common_1.CanvasForm.setSize(value);\r\n    };\r\n    /** Public Methods */\r\n    // Closes the item form\r\n    ItemForm.close = function () {\r\n        this._useModal ? common_1.Modal.hide() : common_1.CanvasForm.hide();\r\n    };\r\n    // Creates a new task\r\n    ItemForm.create = function (props) {\r\n        if (props === void 0) { props = {}; }\r\n        // Set the properties\r\n        this._controlMode = gd_sprest_bs_1.SPTypes.ControlMode.New;\r\n        this._info = props.info;\r\n        this._onCreateEditForm = props.onCreateEditForm;\r\n        this._onFormButtonsRendering = props.onFormButtonsRendering;\r\n        this._onGetListInfo = props.onGetListInfo;\r\n        this._onSave = props.onSave;\r\n        this._onSetFooter = props.onSetFooter;\r\n        this._onSetHeader = props.onSetHeader;\r\n        this._onShowForm = props.onShowForm;\r\n        this._onValidation = props.onValidation;\r\n        this._tabInfo = props.tabInfo;\r\n        this._updateEvent = props.onUpdate;\r\n        typeof (props.useModal) === \"boolean\" ? this._useModal = props.useModal : false;\r\n        // Load the item\r\n        this.load(props.webUrl);\r\n    };\r\n    // Edits a task\r\n    ItemForm.edit = function (props) {\r\n        // Set the properties\r\n        this._controlMode = gd_sprest_bs_1.SPTypes.ControlMode.Edit;\r\n        this._info = props.info;\r\n        this._onCreateEditForm = props.onCreateEditForm;\r\n        this._onFormButtonsRendering = props.onFormButtonsRendering;\r\n        this._onGetListInfo = props.onGetListInfo;\r\n        this._onSave = props.onSave;\r\n        this._onSetFooter = props.onSetFooter;\r\n        this._onSetHeader = props.onSetHeader;\r\n        this._onShowForm = props.onShowForm;\r\n        this._onValidation = props.onValidation;\r\n        this._tabInfo = props.tabInfo;\r\n        this._updateEvent = props.onUpdate;\r\n        typeof (props.useModal) === \"boolean\" ? this._useModal = props.useModal : false;\r\n        // Load the form\r\n        this.load(props.webUrl, props.itemId);\r\n    };\r\n    // Loads the form information\r\n    ItemForm.loadFormInfo = function (props) {\r\n        var _this = this;\r\n        // Return a promise\r\n        return new Promise(function (resolve) {\r\n            // Load the form info\r\n            gd_sprest_bs_1.Helper.ListForm.create(props).then(function (info) {\r\n                // Save the information\r\n                _this._info = info;\r\n                // Resolve the request\r\n                resolve();\r\n            });\r\n        });\r\n    };\r\n    // Views the task\r\n    ItemForm.view = function (props) {\r\n        // Set the properties\r\n        this._controlMode = gd_sprest_bs_1.SPTypes.ControlMode.Display;\r\n        this._info = props.info;\r\n        this._onCreateViewForm = props.onCreateViewForm;\r\n        this._onFormButtonsRendering = props.onFormButtonsRendering;\r\n        this._onGetListInfo = props.onGetListInfo;\r\n        this._onSetFooter = props.onSetFooter;\r\n        this._onSetHeader = props.onSetHeader;\r\n        this._onShowForm = props.onShowForm;\r\n        this._tabInfo = props.tabInfo;\r\n        typeof (props.useModal) === \"boolean\" ? this._useModal = props.useModal : false;\r\n        // Load the form\r\n        this.load(props.webUrl, props.itemId);\r\n    };\r\n    /** Private Methods */\r\n    // Load the form information\r\n    ItemForm.load = function (webUrl, itemId) {\r\n        var _this = this;\r\n        // Clear the forms\r\n        this._displayForms = [];\r\n        this._editForms = [];\r\n        // Show a loading dialog\r\n        common_1.LoadingDialog.setHeader(\"Loading the Item\");\r\n        common_1.LoadingDialog.setBody(\"This will close after the form is loaded...\");\r\n        common_1.LoadingDialog.show();\r\n        // Load the form information\r\n        (function () {\r\n            // Return a promise\r\n            return new Promise(function (resolve) {\r\n                // See if the info already exists\r\n                if (_this._info) {\r\n                    // Resolve the request\r\n                    resolve();\r\n                }\r\n                else {\r\n                    // Set the list form properties\r\n                    var listProps = {\r\n                        listName: _this.ListName,\r\n                        itemId: itemId,\r\n                        webUrl: webUrl\r\n                    };\r\n                    // Call the event\r\n                    listProps = _this._onGetListInfo ? _this._onGetListInfo(listProps) : listProps;\r\n                    // Load the form info\r\n                    gd_sprest_bs_1.Helper.ListForm.create(listProps).then(function (info) {\r\n                        // Save the information\r\n                        _this._info = info;\r\n                        // Resolve the request\r\n                        resolve();\r\n                    });\r\n                }\r\n            });\r\n        })().then(function () {\r\n            // Render the form\r\n            _this.renderForm();\r\n        });\r\n    };\r\n    // Renders the display form\r\n    ItemForm.renderDisplayForm = function (el, tab) {\r\n        // Ensure the element exists\r\n        el = el || document.createElement(\"div\");\r\n        // Set the form properties\r\n        var displayAttachments = tab ? tab.fields && tab.fields.indexOf(\"Attachments\") >= 0 : true;\r\n        var props = {\r\n            el: el,\r\n            displayAttachments: displayAttachments,\r\n            info: this._info,\r\n            rowClassName: \"mb-3\",\r\n            includeFields: tab ? tab.fields : null\r\n        };\r\n        // Call the event if it exists\r\n        props = this._onCreateViewForm ? this._onCreateViewForm(props) : props;\r\n        // Override the form rendered event\r\n        var customEvent = props.onFormRendered;\r\n        props.onFormRendered = function (listForm) {\r\n            /* Remove the bottom margin from the last row of the form */\r\n            listForm.el.lastChild.classList.remove(\"mb-3\");\r\n            // Call the event if it exists\r\n            tab && tab.onFormRendered ? tab.onFormRendered(form) : null;\r\n            // Call the custom event if it exists\r\n            customEvent ? customEvent(listForm) : null;\r\n        };\r\n        // Render the display form\r\n        var form = gd_sprest_bs_1.Components.ListForm.renderDisplayForm(props);\r\n        this._displayForms.push(form);\r\n        // Return the form element\r\n        return el;\r\n    };\r\n    // Renders the edit form\r\n    ItemForm.renderEditForm = function (el, tab) {\r\n        // Ensure the element exists\r\n        el = el || document.createElement(\"div\");\r\n        // Set the form properties\r\n        var displayAttachments = tab ? tab.fields && tab.fields.indexOf(\"Attachments\") >= 0 : true;\r\n        var props = {\r\n            el: el,\r\n            displayAttachments: displayAttachments,\r\n            info: this._info,\r\n            rowClassName: \"mb-3\",\r\n            controlMode: this.IsNew ? gd_sprest_bs_1.SPTypes.ControlMode.New : gd_sprest_bs_1.SPTypes.ControlMode.Edit,\r\n            includeFields: tab ? tab.fields : null\r\n        };\r\n        // Call the event if it exists\r\n        props = this._onCreateEditForm ? this._onCreateEditForm(props) : props;\r\n        // Override the form rendered event\r\n        var customEvent = props.onFormRendered;\r\n        props.onFormRendered = function (listForm) {\r\n            /* Remove the bottom margin from the last row of the form */\r\n            listForm.el.lastChild.classList.remove(\"mb-3\");\r\n            // Call the event if it exists\r\n            tab && tab.onFormRendered ? tab.onFormRendered(form) : null;\r\n            // Call the custom event if it exists\r\n            customEvent ? customEvent(listForm) : null;\r\n        };\r\n        // Render the edit form\r\n        var form = gd_sprest_bs_1.Components.ListForm.renderEditForm(props);\r\n        this._editForms.push(form);\r\n        // Return the form element\r\n        return el;\r\n    };\r\n    // Renders the footer\r\n    ItemForm.renderFooter = function () {\r\n        var _this = this;\r\n        // Render the form buttons\r\n        var elButtons = document.createElement(\"div\");\r\n        // Add styling if not using a modal\r\n        if (!this._useModal) {\r\n            elButtons.classList.add(\"float-end\");\r\n            elButtons.style.padding = \"1rem 0\";\r\n        }\r\n        // Append the create/update button\r\n        this._useModal ? common_1.Modal.setFooter(elButtons) : common_1.CanvasForm.BodyElement.appendChild(elButtons);\r\n        // See if we are rendering a display form\r\n        if (this.IsDisplay) {\r\n            // Call the item form button rendering event\r\n            var formButtons = [];\r\n            formButtons = this._onFormButtonsRendering ? this._onFormButtonsRendering(formButtons) : formButtons;\r\n            // Render the form buttons\r\n            formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({\r\n                el: elButtons,\r\n                buttons: formButtons\r\n            }) : null;\r\n        }\r\n        else {\r\n            // Call the item form button rendering event\r\n            var formButtons = [{\r\n                    text: this.IsNew ? \"Create\" : \"Update\",\r\n                    type: gd_sprest_bs_1.Components.ButtonTypes.OutlinePrimary,\r\n                    onClick: function () { _this.save(); }\r\n                }];\r\n            formButtons = this._onFormButtonsRendering ? this._onFormButtonsRendering(formButtons) : formButtons;\r\n            // Render the form buttons\r\n            formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({\r\n                el: elButtons,\r\n                buttons: formButtons\r\n            }) : null;\r\n        }\r\n        // Call the footer event\r\n        this._onSetFooter ? this._onSetFooter(this._useModal ? common_1.Modal.FooterElement : elButtons) : null;\r\n    };\r\n    // Renders the form\r\n    ItemForm.renderForm = function () {\r\n        // Clear the form\r\n        (this._useModal ? common_1.Modal : common_1.CanvasForm).clear();\r\n        // Set the header\r\n        (this._useModal ? common_1.Modal : common_1.CanvasForm).setHeader('<h5 class=\"m-0\">' + (this._info.item ? this._info.item.Title : \"Create Item\") + '</h5>');\r\n        // Call the header event\r\n        this._onSetHeader ? this._onSetHeader(this._useModal ? common_1.Modal.HeaderElement : common_1.CanvasForm.HeaderElement) : null;\r\n        // See if we are rendering tabs\r\n        if (this._tabInfo) {\r\n            // Render the tabs\r\n            this.renderTabs();\r\n        }\r\n        else {\r\n            // Render the form based on the type\r\n            var elForm = this.IsDisplay ? this.renderDisplayForm() : this.renderEditForm();\r\n            // Update the body\r\n            (this._useModal ? common_1.Modal : common_1.CanvasForm).setBody(elForm);\r\n        }\r\n        // Render the footer\r\n        this.renderFooter();\r\n        // Call the event\r\n        this._onShowForm ? this._onShowForm(this._useModal ? common_1.Modal : common_1.CanvasForm) : null;\r\n        // Close the dialog\r\n        common_1.LoadingDialog.hide();\r\n        // Show the form\r\n        (this._useModal ? common_1.Modal : common_1.CanvasForm).show();\r\n    };\r\n    // Generates a tab\r\n    ItemForm.renderTabs = function () {\r\n        var _this = this;\r\n        var tabs = [];\r\n        // Parse the tabs to render\r\n        for (var i = 0; i < this._tabInfo.tabs.length; i++) {\r\n            var tabInfo = this._tabInfo.tabs[i];\r\n            // Generate the tab\r\n            var tab = {\r\n                data: tabInfo,\r\n                isActive: i == 0,\r\n                tabName: tabInfo.title,\r\n                onRender: function (el, item) {\r\n                    var tab = item.data;\r\n                    // Render the form\r\n                    _this.IsDisplay ? _this.renderDisplayForm(el, tab) : _this.renderEditForm(el, tab);\r\n                    // Call the event\r\n                    tab.onRendered ? tab.onRendered(el, item) : null;\r\n                }\r\n            };\r\n            // Call the rendering event\r\n            tab = tabInfo.onRendering ? tabInfo.onRendering(tab) : tab;\r\n            if (tab) {\r\n                // Append the tab\r\n                tabs.push(tab);\r\n            }\r\n        }\r\n        // Render the tabs\r\n        this._tabs = gd_sprest_bs_1.Components.ListGroup({\r\n            el: this.UseModal ? common_1.Modal.BodyElement : common_1.CanvasForm.BodyElement,\r\n            colWidth: this._tabInfo.isVertical ? 4 : 12,\r\n            isTabs: true,\r\n            isHorizontal: this._tabInfo.isVertical != true,\r\n            items: tabs\r\n        });\r\n        // Return the tabs element\r\n        return this._tabs.el;\r\n    };\r\n    // Saves the edit form\r\n    ItemForm.save = function (form) {\r\n        var _this = this;\r\n        var values = {};\r\n        // Default the form\r\n        var forms = form ? [form] : this._editForms;\r\n        // Display a loading dialog\r\n        common_1.LoadingDialog.setHeader(\"Validation\");\r\n        common_1.LoadingDialog.setBody(\"Validating the form...\");\r\n        common_1.LoadingDialog.show();\r\n        // Validate the forms\r\n        var isValid = true;\r\n        var counter = 0;\r\n        gd_sprest_bs_1.Helper.Executor(forms, function (form) {\r\n            // Update the values\r\n            values = __assign(__assign({}, values), form.getValues());\r\n            // See if the form is not valid\r\n            if (!form.isValid()) {\r\n                // Set the flag\r\n                isValid = false;\r\n            }\r\n            // See if tabs exist\r\n            if (_this.Tabs) {\r\n                // Get the tab\r\n                var tab = _this.Tabs.el.querySelectorAll(\".list-group-item\")[counter++];\r\n                if (tab) {\r\n                    // Clear the class name\r\n                    tab.classList.remove(\"is-valid\");\r\n                    tab.classList.remove(\"is-invalid\");\r\n                    // Set the class name\r\n                    tab.classList.add(isValid ? \"is-valid\" : \"is-invalid\");\r\n                }\r\n            }\r\n            // Set the tab class\r\n        }).then(\r\n        // Success\r\n        function () {\r\n            // Call the custom validation event\r\n            _this.validate(values).then(\r\n            // Valid\r\n            function () {\r\n                // See if the form(s) are valid\r\n                if (isValid) {\r\n                    // Update the loading dialog\r\n                    common_1.LoadingDialog.setHeader(\"Saving the Item\");\r\n                    common_1.LoadingDialog.setBody((_this.IsNew ? \"Creating\" : \"Updating\") + \" the Item\");\r\n                    // Saves the item\r\n                    var saveItem_1 = function (values) {\r\n                        // Save the item\r\n                        forms[0].save(values).then(function (item) {\r\n                            // Call the update event\r\n                            _this._updateEvent ? _this._updateEvent(item) : null;\r\n                            // Close the dialogs\r\n                            (_this._useModal ? common_1.Modal : common_1.CanvasForm).hide();\r\n                            common_1.LoadingDialog.hide();\r\n                        });\r\n                    };\r\n                    // Call the save event\r\n                    values = _this._onSave ? _this._onSave(values) : values;\r\n                    // See if the onSave event returned a promise\r\n                    if (values && typeof (values[\"then\"]) === \"function\") {\r\n                        // Wait for the promise to complete\r\n                        values[\"then\"](function (values) {\r\n                            // Save the item\r\n                            saveItem_1(values);\r\n                        });\r\n                    }\r\n                    else {\r\n                        // Save the item\r\n                        saveItem_1(values);\r\n                    }\r\n                }\r\n                else {\r\n                    // Close the dialog\r\n                    common_1.LoadingDialog.hide();\r\n                }\r\n            }, \r\n            // Not Valid\r\n            function () {\r\n                // Close the dialog\r\n                common_1.LoadingDialog.hide();\r\n            });\r\n        });\r\n    };\r\n    // Validates the form\r\n    ItemForm.validate = function (values) {\r\n        var _this = this;\r\n        // Return a promise\r\n        return new Promise(function (resolve, reject) {\r\n            var isValid = true;\r\n            // Call the validation event\r\n            var returnVal = _this._onValidation ? _this._onValidation(values) : null;\r\n            if (returnVal && typeof (returnVal.then) === \"function\") {\r\n                // Wait for the promise to complete\r\n                returnVal.then(function (isValid) {\r\n                    // Resolve the request\r\n                    isValid ? resolve() : reject();\r\n                });\r\n            }\r\n            else {\r\n                if (typeof (returnVal) === \"boolean\") {\r\n                    // Update the flag\r\n                    isValid = returnVal;\r\n                }\r\n                // Resolve the request\r\n                isValid ? resolve() : reject();\r\n            }\r\n        });\r\n    };\r\n    ItemForm._onCreateEditForm = null;\r\n    ItemForm._onCreateViewForm = null;\r\n    ItemForm._onFormButtonsRendering = null;\r\n    ItemForm._onGetListInfo = null;\r\n    ItemForm._onSetFooter = null;\r\n    ItemForm._onSetHeader = null;\r\n    ItemForm._onShowForm = null;\r\n    ItemForm._onSave = null;\r\n    ItemForm._onValidation = null;\r\n    ItemForm._tabInfo = null;\r\n    ItemForm._updateEvent = null;\r\n    // Display Form\r\n    ItemForm._displayForms = null;\r\n    // Edit Form\r\n    ItemForm._editForms = null;\r\n    // Form Information\r\n    ItemForm._info = null;\r\n    // Form Modes\r\n    ItemForm._controlMode = null;\r\n    // List name\r\n    ItemForm._listName = null;\r\n    // List Form Tabs\r\n    ItemForm._tabs = null;\r\n    // Flag to use a modal or canvas (default)\r\n    ItemForm._useModal = false;\r\n    return ItemForm;\r\n}());\r\nexports.ItemForm = ItemForm;\r\n\n\n//# sourceURL=webpack://dattatable/./build/itemForm.js?");
 
 /***/ }),