dattatable 2.9.70 → 2.9.72

package/build/dashboard/accordion.d.ts

@@ -4,15 +4,17 @@ export interface IAccordion {
     search?: (value: string) => void;
 }
 export interface IAccordionProps {
-    bodyField?: string;
+    bodyFields?: [string];
+    bodyTemplate?: string;
     el: HTMLElement;
-    filterField?: string;
+    filterFields?: [string];
     items: any[];
     onItemClick?: (el?: HTMLElement, item?: any) => void;
     onItemRender?: (el?: HTMLElement, item?: any) => void;
     onPaginationRender?: (el?: HTMLElement) => void;
     paginationLimit?: number;
-    titleField?: string;
+    titleFields?: [string];
+    titleTemplate?: string;
 }
 /**
  * Accordion

package/build/dashboard/accordion.js

@@ -54,15 +54,59 @@ var Accordion = /** @class */ (function () {
             var item = this_1._props.items[i];
             var filterValues = [];
             // See if the filter field is specified
-            if (this_1._props.filterField) {
-                // Set the filter values
-                var filters = item[this_1._props.filterField] || [];
-                filterValues = filters["results"] || [filters];
+            if (this_1._props.filterFields) {
+                // Parse the fields
+                for (var i_1 = 0; i_1 < this_1._props.filterFields.length; i_1++) {
+                    var filterField = this_1._props.filterFields[i_1];
+                    // Get the filter values
+                    var filters = item[filterField] || [];
+                    filters = filters["results"] || [filters];
+                    // Append the values
+                    filterValues = filterValues.concat(filters);
+                }
+            }
+            // See if the body fields exist
+            var bodyContent = this_1._props.bodyTemplate || "";
+            if (this_1._props.bodyFields) {
+                // Parse the fields
+                for (var i_2 = 0; i_2 < this_1._props.bodyFields.length; i_2++) {
+                    var field = this_1._props.bodyFields[i_2];
+                    var value = item[field] || "";
+                    // See if there is a template
+                    if (this_1._props.bodyTemplate) {
+                        // Replace the values
+                        var pattern = new RegExp("({" + field + "})", "g");
+                        bodyContent = bodyContent.replace(pattern, value);
+                    }
+                    else {
+                        // Append the value
+                        bodyContent += value;
+                    }
+                }
+            }
+            // See if the sub-title fields exist
+            var titleContent = this_1._props.titleTemplate || "";
+            if (this_1._props.titleFields) {
+                // Parse the fields
+                for (var i_3 = 0; i_3 < this_1._props.titleFields.length; i_3++) {
+                    var field = this_1._props.titleFields[i_3];
+                    var value = item[field] || "";
+                    // See if there is a template
+                    if (this_1._props.titleTemplate) {
+                        // Replace the values
+                        var pattern = new RegExp("({" + field + "})", "g");
+                        titleContent = titleContent.replace(pattern, value);
+                    }
+                    else {
+                        // Append the value
+                        titleContent += value;
+                    }
+                }
             }
             // Add an accordion item
             accordionItems.push({
-                content: (this_1._props.bodyField ? item[this_1._props.bodyField || "Description"] : null) || "",
-                header: item[this_1._props.titleField || "Title"] || "",
+                content: bodyContent,
+                header: titleContent,
                 onClick: this_1._props.onItemClick,
                 onRender: function (el, item) {
                     // See if filters exist

package/build/dashboard/filter.d.ts

@@ -7,7 +7,7 @@ export interface IFilterItem {
     items: Components.ICheckboxGroupItem[];
     multi?: boolean;
     onFilter?: (value: string | string[], item?: Components.ICheckboxGroupItem) => void;
-    onSetFilterValue?: (value?: string | string[]) => string | string[];
+    onSetFilterValue?: (value?: string | string[], item?: Components.ICheckboxGroupItem | Components.ICheckboxGroupItem[]) => string | string[];
 }
 /**
  * Properties

package/build/dashboard/filter.js

@@ -93,7 +93,7 @@ var FilterSlideout = /** @class */ (function () {
                                 values.push(items[i].label);
                             }
                             // Execute the events
-                            values = filter.onSetFilterValue ? filter.onSetFilterValue(values) : values;
+                            values = filter.onSetFilterValue ? filter.onSetFilterValue(values, value) : values;
                             filter.onFilter ? filter.onFilter(values, item) : null;
                             _this._onFilter ? _this._onFilter(values, item) : null;
                         }
@@ -101,7 +101,7 @@ var FilterSlideout = /** @class */ (function () {
                             var item_1 = value;
                             var filterValue = item_1 ? item_1.label : "";
                             // Execute the events
-                            filterValue = filter.onSetFilterValue ? filter.onSetFilterValue(filterValue) : filterValue;
+                            filterValue = filter.onSetFilterValue ? filter.onSetFilterValue(filterValue, value) : filterValue;
                             filter.onFilter ? filter.onFilter(filterValue, item_1) : null;
                             _this._onFilter ? _this._onFilter(filterValue, item_1) : null;
                         }

package/build/dashboard/tiles.d.ts

@@ -4,10 +4,11 @@ export interface ITiles {
     search?: (value: string) => void;
 }
 export interface ITilesProps {
-    bodyField?: string;
+    bodyFields?: [string];
+    bodyTemplate?: string;
     colSize?: number;
     el: HTMLElement;
-    filterField?: string;
+    filterFields?: [string];
     items: any[];
     onBodyRendered?: (el?: HTMLElement, item?: any) => void;
     onCardRendered?: (el?: HTMLElement, item?: any) => void;
@@ -20,8 +21,10 @@ export interface ITilesProps {
     paginationLimit?: number;
     showFooter?: boolean;
     showHeader?: boolean;
-    subTitleField?: string;
-    titleField?: string;
+    subTitleFields?: [string];
+    subTitleTemplate?: string;
+    titleFields?: [string];
+    titleTemplate?: string;
 }
 /**
  * Tiles

package/build/dashboard/tiles.js

@@ -41,10 +41,73 @@ var Tiles = /** @class */ (function () {
         var _this = this;
         var filterValues = [];
         // See if the filter field is specified
-        if (this._props.filterField) {
-            // Get the filters
-            var filters = item[this._props.filterField] || [];
-            filterValues = filters["results"] || [filters];
+        if (this._props.filterFields) {
+            // Parse the fields
+            for (var i = 0; i < this._props.filterFields.length; i++) {
+                var filterField = this._props.filterFields[i];
+                // Get the filter values
+                var filters = item[filterField] || [];
+                filters = filters["results"] || [filters];
+                // Append the values
+                filterValues = filterValues.concat(filters);
+            }
+        }
+        // See if the body fields exist
+        var bodyContent = this._props.bodyTemplate || "";
+        if (this._props.bodyFields) {
+            // Parse the fields
+            for (var i = 0; i < this._props.bodyFields.length; i++) {
+                var field = this._props.bodyFields[i];
+                var value = item[field] || "";
+                // See if there is a template
+                if (this._props.bodyTemplate) {
+                    // Replace the values
+                    var pattern = new RegExp("({" + field + "})", "g");
+                    bodyContent = bodyContent.replace(pattern, value);
+                }
+                else {
+                    // Append the value
+                    bodyContent += value;
+                }
+            }
+        }
+        // See if the sub-title fields exist
+        var subTitleContent = this._props.subTitleTemplate || "";
+        if (this._props.subTitleFields) {
+            // Parse the fields
+            for (var i = 0; i < this._props.subTitleFields.length; i++) {
+                var field = this._props.subTitleFields[i];
+                var value = item[field] || "";
+                // See if there is a template
+                if (this._props.subTitleTemplate) {
+                    // Replace the values
+                    var pattern = new RegExp("({" + field + "})", "g");
+                    subTitleContent = subTitleContent.replace(pattern, value);
+                }
+                else {
+                    // Append the value
+                    subTitleContent += value;
+                }
+            }
+        }
+        // See if the sub-title fields exist
+        var titleContent = this._props.titleTemplate || "";
+        if (this._props.titleFields) {
+            // Parse the fields
+            for (var i = 0; i < this._props.titleFields.length; i++) {
+                var field = this._props.titleFields[i];
+                var value = item[field] || "";
+                // See if there is a template
+                if (this._props.titleTemplate) {
+                    // Replace the values
+                    var pattern = new RegExp("({" + field + "})", "g");
+                    titleContent = titleContent.replace(pattern, value);
+                }
+                else {
+                    // Append the value
+                    titleContent += value;
+                }
+            }
         }
         // Set the card props
         var cardProps = {
@@ -58,10 +121,10 @@ var Tiles = /** @class */ (function () {
                 _this._props.onCardRendered ? _this._props.onCardRendered(el, card) : null;
             },
             body: [{
-                    content: (this._props.bodyField ? item[this._props.bodyField || "Description"] : null) || "",
+                    content: bodyContent,
                     data: item,
-                    subTitle: item[this._props.subTitleField] || "",
-                    title: item[this._props.titleField || "Title"] || "",
+                    subTitle: subTitleContent,
+                    title: titleContent,
                     onRender: function (el, card) {
                         var item = card.data;
                         // Call the events

package/dist/dattatable.js

@@ -170,7 +170,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.Accordion = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.11.4/node_modules/gd-sprest-bs/build/index.js\");\r\n/**\r\n * Accordion\r\n */\r\nvar Accordion = /** @class */ (function () {\r\n    // Constructor\r\n    function Accordion(props) {\r\n        this._accordion = null;\r\n        this._activeFilterValue = null;\r\n        this._activeSearchValue = null;\r\n        this._pagination = null;\r\n        // Save the properties\r\n        this._props = props;\r\n        // Render the accordion\r\n        this.render();\r\n    }\r\n    // Clears an item\r\n    Accordion.prototype.clearItem = function (elItem) {\r\n        // Hide the item\r\n        elItem.classList.add(\"d-none\");\r\n        // Remove the first/last item classes\r\n        elItem.classList.remove(\"first-item\");\r\n        elItem.classList.remove(\"last-item\");\r\n    };\r\n    // Filters the accordion\r\n    Accordion.prototype.filter = function (value) {\r\n        this._activeFilterValue = value || \"\";\r\n        // Parse all accordion items\r\n        var items = this._props.el.querySelectorAll(\".accordion-item\");\r\n        for (var i = 0; i < items.length; i++) {\r\n            var elItem = items[i];\r\n            // Clear the item\r\n            this.clearItem(elItem);\r\n        }\r\n        // Render the items\r\n        this.renderItems();\r\n    };\r\n    // Renders the dashboard\r\n    Accordion.prototype.render = function () {\r\n        // Render the accordion\r\n        this.renderAccordion();\r\n        // Render the items\r\n        this.renderItems();\r\n    };\r\n    // Renders the accordion\r\n    Accordion.prototype.renderAccordion = function () {\r\n        var _this = this;\r\n        // Parse the items\r\n        var accordionItems = [];\r\n        var _loop_1 = function (i) {\r\n            var item = this_1._props.items[i];\r\n            var filterValues = [];\r\n            // See if the filter field is specified\r\n            if (this_1._props.filterField) {\r\n                // Set the filter values\r\n                var filters = item[this_1._props.filterField] || [];\r\n                filterValues = filters[\"results\"] || [filters];\r\n            }\r\n            // Add an accordion item\r\n            accordionItems.push({\r\n                content: (this_1._props.bodyField ? item[this_1._props.bodyField || \"Description\"] : null) || \"\",\r\n                header: item[this_1._props.titleField || \"Title\"] || \"\",\r\n                onClick: this_1._props.onItemClick,\r\n                onRender: function (el, item) {\r\n                    // See if filters exist\r\n                    if (filterValues && filterValues.length > 0) {\r\n                        // Set the data filter value\r\n                        el.setAttribute(\"data-filter\", filterValues.join('|'));\r\n                    }\r\n                    // Call the event\r\n                    _this._props.onItemRender ? _this._props.onItemRender(el, item) : null;\r\n                },\r\n                showFl: i == 0,\r\n            });\r\n        };\r\n        var this_1 = this;\r\n        for (var i = 0; i < this._props.items.length; i++) {\r\n            _loop_1(i);\r\n        }\r\n        // Render the accordion\r\n        this._accordion = gd_sprest_bs_1.Components.Accordion({\r\n            el: this._props.el,\r\n            id: \"accordion-list\",\r\n            items: accordionItems\r\n        });\r\n    };\r\n    // Renders the items\r\n    Accordion.prototype.renderItems = function () {\r\n        var _this = this;\r\n        var paginationLimit = this._props.paginationLimit || 10;\r\n        // Get the pagination element\r\n        var elPagination = this._props.el.querySelector(\".accordion-pagination\");\r\n        if (elPagination) {\r\n            // Clear the element\r\n            while (elPagination.firstChild) {\r\n                elPagination.removeChild(elPagination.firstChild);\r\n            }\r\n        }\r\n        else {\r\n            // Create the element\r\n            elPagination = document.createElement(\"div\");\r\n            elPagination.classList.add(\"accordion-pagination\");\r\n            this._props.el.appendChild(elPagination);\r\n        }\r\n        // Get the elements as an array\r\n        var elItems = Array.from(this._accordion.el.querySelectorAll(this._activeFilterValue ? \".\" + this._activeFilterValue : \".accordion-item\"));\r\n        // Parse the items\r\n        for (var i = elItems.length - 1; i >= 0; i--) {\r\n            var elItem = elItems[i];\r\n            var elContent = elItem.querySelector(\".accordion-body\");\r\n            // See if this item is expanded\r\n            if (elItem.querySelector(\".accordion-collapse.show\")) {\r\n                // Collapse the item\r\n                var btn = elItem.querySelector(\".accordion-button\");\r\n                btn === null || btn === void 0 ? void 0 : btn.click();\r\n            }\r\n            // See if there is an active filter\r\n            if (this._activeFilterValue) {\r\n                var filterValues = (elItem.dataset.filter || \"\").split('|');\r\n                // See if the item doesn't contains the filter value\r\n                if (filterValues.indexOf(this._activeFilterValue) < 0) {\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n            // See if a search value exists\r\n            if (this._activeSearchValue) {\r\n                // See if the item doesn't contains the search value\r\n                if (elItem.innerText.toLowerCase().indexOf(this._activeSearchValue) < 0 &&\r\n                    elContent.innerText.toLowerCase().indexOf(this._activeSearchValue) < 0) {\r\n                    // Clear the item\r\n                    this.clearItem(elItem);\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n        }\r\n        // Parse the active items to show\r\n        for (var i = 0; i < paginationLimit; i++) {\r\n            var elItem = elItems[i];\r\n            // Ensure the item exists\r\n            if (elItem) {\r\n                // Clear the item\r\n                this.clearItem(elItem);\r\n                // Show the item\r\n                elItem.classList.remove(\"d-none\");\r\n                // See if this is the first item\r\n                if (i == 0) {\r\n                    elItem.classList.add(\"first-item\");\r\n                }\r\n            }\r\n            else {\r\n                // Set the class for the last item\r\n                if (elItems[i - 1]) {\r\n                    elItems[i - 1].classList.add(\"last-item\");\r\n                }\r\n                // Break from the loop\r\n                break;\r\n            }\r\n        }\r\n        // Parse the active items to hide\r\n        for (var i = paginationLimit; i < elItems.length; i++) {\r\n            // Clear the item\r\n            this.clearItem(elItems[i]);\r\n        }\r\n        // Ensure items exist\r\n        if (elItems.length > 0) {\r\n            // Ensure the first item is expanded\r\n            if (elItems[0].querySelector(\".accordion-collapse.show\") == null) {\r\n                // Hide the button\r\n                var btn = elItems[0].querySelector(\".accordion-button\");\r\n                btn === null || btn === void 0 ? void 0 : btn.click();\r\n            }\r\n            // Set the first item class\r\n            elItems[0].classList.add(\"first-item\");\r\n            // Set the last item class\r\n            var lastIdx = paginationLimit - 1;\r\n            elItems[lastIdx < elItems.length ? lastIdx : elItems.length - 1].classList.add(\"last-item\");\r\n        }\r\n        // Render the pagination\r\n        this._pagination = gd_sprest_bs_1.Components.Pagination({\r\n            el: elPagination,\r\n            className: \"d-flex justify-content-end pt-2\",\r\n            numberOfPages: Math.ceil(elItems.length / paginationLimit),\r\n            onClick: function (pageNumber) {\r\n                // Parse the items\r\n                for (var i = 0; i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // See if this item is expanded\r\n                    if (elItem.querySelector(\".accordion-collapse.show\")) {\r\n                        // Hide the button\r\n                        var btn = elItem.querySelector(\".accordion-button\");\r\n                        btn === null || btn === void 0 ? void 0 : btn.click();\r\n                    }\r\n                    // Clear the item\r\n                    _this.clearItem(elItem);\r\n                }\r\n                // Parse the items to show\r\n                var startIdx = (pageNumber - 1) * paginationLimit;\r\n                for (var i = startIdx; i < startIdx + paginationLimit && i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // Show the item\r\n                    elItem.classList.remove(\"d-none\");\r\n                    // See if this is the first item\r\n                    if (i == startIdx) {\r\n                        // Set the first item class\r\n                        elItem.classList.add(\"first-item\");\r\n                        // Expand the item\r\n                        var btn = elItem.querySelector(\".accordion-button\");\r\n                        btn === null || btn === void 0 ? void 0 : btn.click();\r\n                    }\r\n                }\r\n                // Set the last item class\r\n                var lastIdx = startIdx + paginationLimit - 1;\r\n                elItems[lastIdx < elItems.length ? lastIdx : elItems.length - 1].classList.add(\"last-item\");\r\n            }\r\n        });\r\n        // Call the event\r\n        this._props.onPaginationRender ? this._props.onPaginationRender(elPagination) : null;\r\n    };\r\n    // Searches the accordion\r\n    Accordion.prototype.search = function (value) {\r\n        // Set the search value\r\n        this._activeSearchValue = (value || \"\").toLowerCase();\r\n        // Render the items\r\n        this.renderItems();\r\n    };\r\n    return Accordion;\r\n}());\r\nexports.Accordion = Accordion;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/accordion.js?");
+eval("\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.Accordion = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.11.4/node_modules/gd-sprest-bs/build/index.js\");\r\n/**\r\n * Accordion\r\n */\r\nvar Accordion = /** @class */ (function () {\r\n    // Constructor\r\n    function Accordion(props) {\r\n        this._accordion = null;\r\n        this._activeFilterValue = null;\r\n        this._activeSearchValue = null;\r\n        this._pagination = null;\r\n        // Save the properties\r\n        this._props = props;\r\n        // Render the accordion\r\n        this.render();\r\n    }\r\n    // Clears an item\r\n    Accordion.prototype.clearItem = function (elItem) {\r\n        // Hide the item\r\n        elItem.classList.add(\"d-none\");\r\n        // Remove the first/last item classes\r\n        elItem.classList.remove(\"first-item\");\r\n        elItem.classList.remove(\"last-item\");\r\n    };\r\n    // Filters the accordion\r\n    Accordion.prototype.filter = function (value) {\r\n        this._activeFilterValue = value || \"\";\r\n        // Parse all accordion items\r\n        var items = this._props.el.querySelectorAll(\".accordion-item\");\r\n        for (var i = 0; i < items.length; i++) {\r\n            var elItem = items[i];\r\n            // Clear the item\r\n            this.clearItem(elItem);\r\n        }\r\n        // Render the items\r\n        this.renderItems();\r\n    };\r\n    // Renders the dashboard\r\n    Accordion.prototype.render = function () {\r\n        // Render the accordion\r\n        this.renderAccordion();\r\n        // Render the items\r\n        this.renderItems();\r\n    };\r\n    // Renders the accordion\r\n    Accordion.prototype.renderAccordion = function () {\r\n        var _this = this;\r\n        // Parse the items\r\n        var accordionItems = [];\r\n        var _loop_1 = function (i) {\r\n            var item = this_1._props.items[i];\r\n            var filterValues = [];\r\n            // See if the filter field is specified\r\n            if (this_1._props.filterFields) {\r\n                // Parse the fields\r\n                for (var i_1 = 0; i_1 < this_1._props.filterFields.length; i_1++) {\r\n                    var filterField = this_1._props.filterFields[i_1];\r\n                    // Get the filter values\r\n                    var filters = item[filterField] || [];\r\n                    filters = filters[\"results\"] || [filters];\r\n                    // Append the values\r\n                    filterValues = filterValues.concat(filters);\r\n                }\r\n            }\r\n            // See if the body fields exist\r\n            var bodyContent = this_1._props.bodyTemplate || \"\";\r\n            if (this_1._props.bodyFields) {\r\n                // Parse the fields\r\n                for (var i_2 = 0; i_2 < this_1._props.bodyFields.length; i_2++) {\r\n                    var field = this_1._props.bodyFields[i_2];\r\n                    var value = item[field] || \"\";\r\n                    // See if there is a template\r\n                    if (this_1._props.bodyTemplate) {\r\n                        // Replace the values\r\n                        var pattern = new RegExp(\"({\" + field + \"})\", \"g\");\r\n                        bodyContent = bodyContent.replace(pattern, value);\r\n                    }\r\n                    else {\r\n                        // Append the value\r\n                        bodyContent += value;\r\n                    }\r\n                }\r\n            }\r\n            // See if the sub-title fields exist\r\n            var titleContent = this_1._props.titleTemplate || \"\";\r\n            if (this_1._props.titleFields) {\r\n                // Parse the fields\r\n                for (var i_3 = 0; i_3 < this_1._props.titleFields.length; i_3++) {\r\n                    var field = this_1._props.titleFields[i_3];\r\n                    var value = item[field] || \"\";\r\n                    // See if there is a template\r\n                    if (this_1._props.titleTemplate) {\r\n                        // Replace the values\r\n                        var pattern = new RegExp(\"({\" + field + \"})\", \"g\");\r\n                        titleContent = titleContent.replace(pattern, value);\r\n                    }\r\n                    else {\r\n                        // Append the value\r\n                        titleContent += value;\r\n                    }\r\n                }\r\n            }\r\n            // Add an accordion item\r\n            accordionItems.push({\r\n                content: bodyContent,\r\n                header: titleContent,\r\n                onClick: this_1._props.onItemClick,\r\n                onRender: function (el, item) {\r\n                    // See if filters exist\r\n                    if (filterValues && filterValues.length > 0) {\r\n                        // Set the data filter value\r\n                        el.setAttribute(\"data-filter\", filterValues.join('|'));\r\n                    }\r\n                    // Call the event\r\n                    _this._props.onItemRender ? _this._props.onItemRender(el, item) : null;\r\n                },\r\n                showFl: i == 0,\r\n            });\r\n        };\r\n        var this_1 = this;\r\n        for (var i = 0; i < this._props.items.length; i++) {\r\n            _loop_1(i);\r\n        }\r\n        // Render the accordion\r\n        this._accordion = gd_sprest_bs_1.Components.Accordion({\r\n            el: this._props.el,\r\n            id: \"accordion-list\",\r\n            items: accordionItems\r\n        });\r\n    };\r\n    // Renders the items\r\n    Accordion.prototype.renderItems = function () {\r\n        var _this = this;\r\n        var paginationLimit = this._props.paginationLimit || 10;\r\n        // Get the pagination element\r\n        var elPagination = this._props.el.querySelector(\".accordion-pagination\");\r\n        if (elPagination) {\r\n            // Clear the element\r\n            while (elPagination.firstChild) {\r\n                elPagination.removeChild(elPagination.firstChild);\r\n            }\r\n        }\r\n        else {\r\n            // Create the element\r\n            elPagination = document.createElement(\"div\");\r\n            elPagination.classList.add(\"accordion-pagination\");\r\n            this._props.el.appendChild(elPagination);\r\n        }\r\n        // Get the elements as an array\r\n        var elItems = Array.from(this._accordion.el.querySelectorAll(this._activeFilterValue ? \".\" + this._activeFilterValue : \".accordion-item\"));\r\n        // Parse the items\r\n        for (var i = elItems.length - 1; i >= 0; i--) {\r\n            var elItem = elItems[i];\r\n            var elContent = elItem.querySelector(\".accordion-body\");\r\n            // See if this item is expanded\r\n            if (elItem.querySelector(\".accordion-collapse.show\")) {\r\n                // Collapse the item\r\n                var btn = elItem.querySelector(\".accordion-button\");\r\n                btn === null || btn === void 0 ? void 0 : btn.click();\r\n            }\r\n            // See if there is an active filter\r\n            if (this._activeFilterValue) {\r\n                var filterValues = (elItem.dataset.filter || \"\").split('|');\r\n                // See if the item doesn't contains the filter value\r\n                if (filterValues.indexOf(this._activeFilterValue) < 0) {\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n            // See if a search value exists\r\n            if (this._activeSearchValue) {\r\n                // See if the item doesn't contains the search value\r\n                if (elItem.innerText.toLowerCase().indexOf(this._activeSearchValue) < 0 &&\r\n                    elContent.innerText.toLowerCase().indexOf(this._activeSearchValue) < 0) {\r\n                    // Clear the item\r\n                    this.clearItem(elItem);\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n        }\r\n        // Parse the active items to show\r\n        for (var i = 0; i < paginationLimit; i++) {\r\n            var elItem = elItems[i];\r\n            // Ensure the item exists\r\n            if (elItem) {\r\n                // Clear the item\r\n                this.clearItem(elItem);\r\n                // Show the item\r\n                elItem.classList.remove(\"d-none\");\r\n                // See if this is the first item\r\n                if (i == 0) {\r\n                    elItem.classList.add(\"first-item\");\r\n                }\r\n            }\r\n            else {\r\n                // Set the class for the last item\r\n                if (elItems[i - 1]) {\r\n                    elItems[i - 1].classList.add(\"last-item\");\r\n                }\r\n                // Break from the loop\r\n                break;\r\n            }\r\n        }\r\n        // Parse the active items to hide\r\n        for (var i = paginationLimit; i < elItems.length; i++) {\r\n            // Clear the item\r\n            this.clearItem(elItems[i]);\r\n        }\r\n        // Ensure items exist\r\n        if (elItems.length > 0) {\r\n            // Ensure the first item is expanded\r\n            if (elItems[0].querySelector(\".accordion-collapse.show\") == null) {\r\n                // Hide the button\r\n                var btn = elItems[0].querySelector(\".accordion-button\");\r\n                btn === null || btn === void 0 ? void 0 : btn.click();\r\n            }\r\n            // Set the first item class\r\n            elItems[0].classList.add(\"first-item\");\r\n            // Set the last item class\r\n            var lastIdx = paginationLimit - 1;\r\n            elItems[lastIdx < elItems.length ? lastIdx : elItems.length - 1].classList.add(\"last-item\");\r\n        }\r\n        // Render the pagination\r\n        this._pagination = gd_sprest_bs_1.Components.Pagination({\r\n            el: elPagination,\r\n            className: \"d-flex justify-content-end pt-2\",\r\n            numberOfPages: Math.ceil(elItems.length / paginationLimit),\r\n            onClick: function (pageNumber) {\r\n                // Parse the items\r\n                for (var i = 0; i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // See if this item is expanded\r\n                    if (elItem.querySelector(\".accordion-collapse.show\")) {\r\n                        // Hide the button\r\n                        var btn = elItem.querySelector(\".accordion-button\");\r\n                        btn === null || btn === void 0 ? void 0 : btn.click();\r\n                    }\r\n                    // Clear the item\r\n                    _this.clearItem(elItem);\r\n                }\r\n                // Parse the items to show\r\n                var startIdx = (pageNumber - 1) * paginationLimit;\r\n                for (var i = startIdx; i < startIdx + paginationLimit && i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // Show the item\r\n                    elItem.classList.remove(\"d-none\");\r\n                    // See if this is the first item\r\n                    if (i == startIdx) {\r\n                        // Set the first item class\r\n                        elItem.classList.add(\"first-item\");\r\n                        // Expand the item\r\n                        var btn = elItem.querySelector(\".accordion-button\");\r\n                        btn === null || btn === void 0 ? void 0 : btn.click();\r\n                    }\r\n                }\r\n                // Set the last item class\r\n                var lastIdx = startIdx + paginationLimit - 1;\r\n                elItems[lastIdx < elItems.length ? lastIdx : elItems.length - 1].classList.add(\"last-item\");\r\n            }\r\n        });\r\n        // Call the event\r\n        this._props.onPaginationRender ? this._props.onPaginationRender(elPagination) : null;\r\n    };\r\n    // Searches the accordion\r\n    Accordion.prototype.search = function (value) {\r\n        // Set the search value\r\n        this._activeSearchValue = (value || \"\").toLowerCase();\r\n        // Render the items\r\n        this.renderItems();\r\n    };\r\n    return Accordion;\r\n}());\r\nexports.Accordion = Accordion;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/accordion.js?");
 
 /***/ }),
 
@@ -181,7 +181,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.11.4/node_modules/gd-sprest-bs/build/index.js\");\r\nvar filter_1 = __webpack_require__(/*! gd-sprest-bs/build/icons/svgs/filter */ \"./node_modules/.pnpm/gd-sprest-bs@10.11.4/node_modules/gd-sprest-bs/build/icons/svgs/filter.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        this._onFilter = props.onFilter;\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        // Parse the filters\r\n        for (var i = 0; i < this._filters.length; i++) {\r\n            var fltr = this._filters[i];\r\n            // Add the filter\r\n            this._items.push(this.generateItem(fltr));\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        // Render a clear button\r\n        gd_sprest_bs_1.Components.Tooltip({\r\n            el: this._el,\r\n            content: \"Reset Filters\",\r\n            placement: gd_sprest_bs_1.Components.TooltipPlacements.Left,\r\n            btnProps: {\r\n                className: \"float-end mt-3 p-1 pe-2\",\r\n                iconClassName: \"me-1\",\r\n                iconType: filter_1.filter,\r\n                iconSize: 24,\r\n                isSmall: true,\r\n                text: \"Reset\",\r\n                type: gd_sprest_bs_1.Components.ButtonTypes.OutlinePrimary,\r\n                onClick: function () {\r\n                    // Clear the filters\r\n                    _this.clear();\r\n                }\r\n            }\r\n        });\r\n        // Add the dark class if theme is inverted\r\n        if (gd_sprest_bs_1.ThemeManager.IsInverted) {\r\n            this._el.querySelectorAll(\"div.form-check.form-switch input[type=checkbox].form-check-input\").forEach(function (el) {\r\n                el.classList.add(\"dark\");\r\n            });\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 events\r\n                            values = filter.onSetFilterValue ? filter.onSetFilterValue(values) : values;\r\n                            filter.onFilter ? filter.onFilter(values, item) : null;\r\n                            _this._onFilter ? _this._onFilter(values, item) : null;\r\n                        }\r\n                        else {\r\n                            var item_1 = value;\r\n                            var filterValue = item_1 ? item_1.label : \"\";\r\n                            // Execute the events\r\n                            filterValue = filter.onSetFilterValue ? filter.onSetFilterValue(filterValue) : filterValue;\r\n                            filter.onFilter ? filter.onFilter(filterValue, item_1) : null;\r\n                            _this._onFilter ? _this._onFilter(filterValue, item_1) : null;\r\n                        }\r\n                    }\r\n                }));\r\n            }\r\n        };\r\n        // Return the item\r\n        return item;\r\n    };\r\n    // Clears the filters\r\n    FilterSlideout.prototype.clear = 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    // 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.11.4/node_modules/gd-sprest-bs/build/index.js\");\r\nvar filter_1 = __webpack_require__(/*! gd-sprest-bs/build/icons/svgs/filter */ \"./node_modules/.pnpm/gd-sprest-bs@10.11.4/node_modules/gd-sprest-bs/build/icons/svgs/filter.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        this._onFilter = props.onFilter;\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        // Parse the filters\r\n        for (var i = 0; i < this._filters.length; i++) {\r\n            var fltr = this._filters[i];\r\n            // Add the filter\r\n            this._items.push(this.generateItem(fltr));\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        // Render a clear button\r\n        gd_sprest_bs_1.Components.Tooltip({\r\n            el: this._el,\r\n            content: \"Reset Filters\",\r\n            placement: gd_sprest_bs_1.Components.TooltipPlacements.Left,\r\n            btnProps: {\r\n                className: \"float-end mt-3 p-1 pe-2\",\r\n                iconClassName: \"me-1\",\r\n                iconType: filter_1.filter,\r\n                iconSize: 24,\r\n                isSmall: true,\r\n                text: \"Reset\",\r\n                type: gd_sprest_bs_1.Components.ButtonTypes.OutlinePrimary,\r\n                onClick: function () {\r\n                    // Clear the filters\r\n                    _this.clear();\r\n                }\r\n            }\r\n        });\r\n        // Add the dark class if theme is inverted\r\n        if (gd_sprest_bs_1.ThemeManager.IsInverted) {\r\n            this._el.querySelectorAll(\"div.form-check.form-switch input[type=checkbox].form-check-input\").forEach(function (el) {\r\n                el.classList.add(\"dark\");\r\n            });\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 events\r\n                            values = filter.onSetFilterValue ? filter.onSetFilterValue(values, value) : values;\r\n                            filter.onFilter ? filter.onFilter(values, item) : null;\r\n                            _this._onFilter ? _this._onFilter(values, item) : null;\r\n                        }\r\n                        else {\r\n                            var item_1 = value;\r\n                            var filterValue = item_1 ? item_1.label : \"\";\r\n                            // Execute the events\r\n                            filterValue = filter.onSetFilterValue ? filter.onSetFilterValue(filterValue, value) : filterValue;\r\n                            filter.onFilter ? filter.onFilter(filterValue, item_1) : null;\r\n                            _this._onFilter ? _this._onFilter(filterValue, item_1) : null;\r\n                        }\r\n                    }\r\n                }));\r\n            }\r\n        };\r\n        // Return the item\r\n        return item;\r\n    };\r\n    // Clears the filters\r\n    FilterSlideout.prototype.clear = 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    // 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?");
 
 /***/ }),
 
@@ -247,7 +247,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.Tiles = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.11.4/node_modules/gd-sprest-bs/build/index.js\");\r\n/**\r\n * Tiles\r\n */\r\nvar Tiles = /** @class */ (function () {\r\n    // Constructor\r\n    function Tiles(props) {\r\n        this._tiles = null;\r\n        this._activeFilterValue = null;\r\n        this._activeSearchValue = null;\r\n        this._pagination = null;\r\n        // Save the properties\r\n        this._props = props;\r\n        // Render the tile\r\n        this.render();\r\n    }\r\n    // Filters the tile\r\n    Tiles.prototype.filter = function (value) {\r\n        this._activeFilterValue = value || \"\";\r\n        // Parse all tile\r\n        var tiles = this._props.el.querySelectorAll(\".card\");\r\n        for (var i = 0; i < tiles.length; i++) {\r\n            // Hide the tile\r\n            tiles[i].parentElement.classList.add(\"d-none\");\r\n        }\r\n        // Update the tiles\r\n        this.updateTiles();\r\n    };\r\n    // Renders the dashboard\r\n    Tiles.prototype.render = function () {\r\n        // Render the tile\r\n        this.renderTiles();\r\n        // Update the tiles\r\n        this.updateTiles();\r\n    };\r\n    // Generate the card properties\r\n    Tiles.prototype.generateCard = function (item) {\r\n        var _this = this;\r\n        var filterValues = [];\r\n        // See if the filter field is specified\r\n        if (this._props.filterField) {\r\n            // Get the filters\r\n            var filters = item[this._props.filterField] || [];\r\n            filterValues = filters[\"results\"] || [filters];\r\n        }\r\n        // Set the card props\r\n        var cardProps = {\r\n            onRender: function (el, card) {\r\n                // See if filters exist\r\n                if (filterValues && filterValues.length > 0) {\r\n                    // Set the data filter value\r\n                    el.setAttribute(\"data-filter\", filterValues.join('|'));\r\n                }\r\n                // Call the event\r\n                _this._props.onCardRendered ? _this._props.onCardRendered(el, card) : null;\r\n            },\r\n            body: [{\r\n                    content: (this._props.bodyField ? item[this._props.bodyField || \"Description\"] : null) || \"\",\r\n                    data: item,\r\n                    subTitle: item[this._props.subTitleField] || \"\",\r\n                    title: item[this._props.titleField || \"Title\"] || \"\",\r\n                    onRender: function (el, card) {\r\n                        var item = card.data;\r\n                        // Call the events\r\n                        _this._props.onTitleRendered ? _this._props.onTitleRendered(el.querySelector(\".card-title\"), item) : null;\r\n                        _this._props.onSubTitleRendered ? _this._props.onSubTitleRendered(el.querySelector(\".card-subtitle\"), item) : null;\r\n                        _this._props.onBodyRendered ? _this._props.onBodyRendered(el, item) : null;\r\n                    }\r\n                }]\r\n        };\r\n        // See if we are showing the header\r\n        var showHeader = typeof (this._props.showHeader) === \"boolean\" ? this._props.showHeader : true;\r\n        if (showHeader) {\r\n            cardProps.header = {\r\n                onRender: function (el) {\r\n                    _this._props.onHeaderRendered ? _this._props.onHeaderRendered(el, item) : null;\r\n                }\r\n            };\r\n        }\r\n        // See if we are showing the footer\r\n        var showFooter = typeof (this._props.showFooter) === \"boolean\" ? this._props.showFooter : true;\r\n        if (showFooter) {\r\n            cardProps.footer = {\r\n                onRender: function (el) {\r\n                    _this._props.onFooterRendered ? _this._props.onFooterRendered(el, item) : null;\r\n                }\r\n            };\r\n        }\r\n        // Call the event\r\n        this._props.onCardRendering ? this._props.onCardRendering(cardProps) : null;\r\n        // Return the card properties\r\n        return cardProps;\r\n    };\r\n    // Renders the tiles\r\n    Tiles.prototype.renderTiles = function () {\r\n        // Parse the items\r\n        var cards = [];\r\n        for (var i = 0; i < this._props.items.length; i++) {\r\n            var item = this._props.items[i];\r\n            // Add an tile\r\n            cards.push(this.generateCard(item));\r\n        }\r\n        // Render the tiles\r\n        this._tiles = gd_sprest_bs_1.Components.CardGroup({\r\n            el: this._props.el,\r\n            cards: cards,\r\n            colSize: this._props.colSize\r\n        });\r\n    };\r\n    // Updates the visibility of the tiles\r\n    Tiles.prototype.updateTiles = function () {\r\n        var paginationLimit = this._props.paginationLimit || 10;\r\n        // Get the pagination element\r\n        var elPagination = this._props.el.querySelector(\".tiles-pagination\");\r\n        if (elPagination) {\r\n            // Clear the element\r\n            while (elPagination.firstChild) {\r\n                elPagination.removeChild(elPagination.firstChild);\r\n            }\r\n        }\r\n        else {\r\n            // Create the element\r\n            elPagination = document.createElement(\"div\");\r\n            elPagination.classList.add(\"tiles-pagination\");\r\n            this._props.el.appendChild(elPagination);\r\n        }\r\n        // Get the elements as an array\r\n        var elItems = Array.from(this._tiles.el.querySelectorAll(\".card\"));\r\n        // Parse the items\r\n        for (var i = elItems.length - 1; i >= 0; i--) {\r\n            var elItem = elItems[i];\r\n            // See if a filter value exists\r\n            if (this._activeFilterValue) {\r\n                var filterValues = (elItem.dataset.filter || \"\").split('|');\r\n                // See if the item doesn't contains the filter value\r\n                if (filterValues.indexOf(this._activeFilterValue) < 0) {\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n            // See if a search value exists\r\n            if (this._activeSearchValue) {\r\n                // See if the item doesn't contains the search value\r\n                if (elItem.innerText.toLowerCase().indexOf(this._activeSearchValue.toLowerCase()) < 0) {\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n        }\r\n        // Parse the active items to show\r\n        for (var i = 0; i < paginationLimit; i++) {\r\n            var elItem = elItems[i];\r\n            // Ensure the item exists\r\n            if (elItem) {\r\n                // Show the item\r\n                elItem.parentElement.classList.remove(\"d-none\");\r\n            }\r\n            else {\r\n                // Break from the loop\r\n                break;\r\n            }\r\n        }\r\n        // Parse the active items to hide\r\n        for (var i = paginationLimit; i < elItems.length; i++) {\r\n            var elItem = elItems[i];\r\n            // Hide the item\r\n            elItem.parentElement.classList.add(\"d-none\");\r\n        }\r\n        // Render the pagination\r\n        this._pagination = gd_sprest_bs_1.Components.Pagination({\r\n            el: elPagination,\r\n            className: \"d-flex justify-content-end pt-2\",\r\n            numberOfPages: Math.ceil(elItems.length / paginationLimit),\r\n            onClick: function (pageNumber) {\r\n                // Parse the items\r\n                for (var i = 0; i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                }\r\n                // Parse the items to show\r\n                var startIdx = (pageNumber - 1) * paginationLimit;\r\n                for (var i = startIdx; i < startIdx + paginationLimit && i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // Show the item\r\n                    elItem.parentElement.classList.remove(\"d-none\");\r\n                }\r\n            }\r\n        });\r\n        // Call the event\r\n        this._props.onPaginationRendered ? this._props.onPaginationRendered(elPagination) : null;\r\n    };\r\n    // Searches the tile\r\n    Tiles.prototype.search = function (value) {\r\n        // Set the search value\r\n        this._activeSearchValue = value || \"\";\r\n        // Update the tiles\r\n        this.updateTiles();\r\n    };\r\n    return Tiles;\r\n}());\r\nexports.Tiles = Tiles;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/tiles.js?");
+eval("\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.Tiles = void 0;\r\nvar gd_sprest_bs_1 = __webpack_require__(/*! gd-sprest-bs */ \"./node_modules/.pnpm/gd-sprest-bs@10.11.4/node_modules/gd-sprest-bs/build/index.js\");\r\n/**\r\n * Tiles\r\n */\r\nvar Tiles = /** @class */ (function () {\r\n    // Constructor\r\n    function Tiles(props) {\r\n        this._tiles = null;\r\n        this._activeFilterValue = null;\r\n        this._activeSearchValue = null;\r\n        this._pagination = null;\r\n        // Save the properties\r\n        this._props = props;\r\n        // Render the tile\r\n        this.render();\r\n    }\r\n    // Filters the tile\r\n    Tiles.prototype.filter = function (value) {\r\n        this._activeFilterValue = value || \"\";\r\n        // Parse all tile\r\n        var tiles = this._props.el.querySelectorAll(\".card\");\r\n        for (var i = 0; i < tiles.length; i++) {\r\n            // Hide the tile\r\n            tiles[i].parentElement.classList.add(\"d-none\");\r\n        }\r\n        // Update the tiles\r\n        this.updateTiles();\r\n    };\r\n    // Renders the dashboard\r\n    Tiles.prototype.render = function () {\r\n        // Render the tile\r\n        this.renderTiles();\r\n        // Update the tiles\r\n        this.updateTiles();\r\n    };\r\n    // Generate the card properties\r\n    Tiles.prototype.generateCard = function (item) {\r\n        var _this = this;\r\n        var filterValues = [];\r\n        // See if the filter field is specified\r\n        if (this._props.filterFields) {\r\n            // Parse the fields\r\n            for (var i = 0; i < this._props.filterFields.length; i++) {\r\n                var filterField = this._props.filterFields[i];\r\n                // Get the filter values\r\n                var filters = item[filterField] || [];\r\n                filters = filters[\"results\"] || [filters];\r\n                // Append the values\r\n                filterValues = filterValues.concat(filters);\r\n            }\r\n        }\r\n        // See if the body fields exist\r\n        var bodyContent = this._props.bodyTemplate || \"\";\r\n        if (this._props.bodyFields) {\r\n            // Parse the fields\r\n            for (var i = 0; i < this._props.bodyFields.length; i++) {\r\n                var field = this._props.bodyFields[i];\r\n                var value = item[field] || \"\";\r\n                // See if there is a template\r\n                if (this._props.bodyTemplate) {\r\n                    // Replace the values\r\n                    var pattern = new RegExp(\"({\" + field + \"})\", \"g\");\r\n                    bodyContent = bodyContent.replace(pattern, value);\r\n                }\r\n                else {\r\n                    // Append the value\r\n                    bodyContent += value;\r\n                }\r\n            }\r\n        }\r\n        // See if the sub-title fields exist\r\n        var subTitleContent = this._props.subTitleTemplate || \"\";\r\n        if (this._props.subTitleFields) {\r\n            // Parse the fields\r\n            for (var i = 0; i < this._props.subTitleFields.length; i++) {\r\n                var field = this._props.subTitleFields[i];\r\n                var value = item[field] || \"\";\r\n                // See if there is a template\r\n                if (this._props.subTitleTemplate) {\r\n                    // Replace the values\r\n                    var pattern = new RegExp(\"({\" + field + \"})\", \"g\");\r\n                    subTitleContent = subTitleContent.replace(pattern, value);\r\n                }\r\n                else {\r\n                    // Append the value\r\n                    subTitleContent += value;\r\n                }\r\n            }\r\n        }\r\n        // See if the sub-title fields exist\r\n        var titleContent = this._props.titleTemplate || \"\";\r\n        if (this._props.titleFields) {\r\n            // Parse the fields\r\n            for (var i = 0; i < this._props.titleFields.length; i++) {\r\n                var field = this._props.titleFields[i];\r\n                var value = item[field] || \"\";\r\n                // See if there is a template\r\n                if (this._props.titleTemplate) {\r\n                    // Replace the values\r\n                    var pattern = new RegExp(\"({\" + field + \"})\", \"g\");\r\n                    titleContent = titleContent.replace(pattern, value);\r\n                }\r\n                else {\r\n                    // Append the value\r\n                    titleContent += value;\r\n                }\r\n            }\r\n        }\r\n        // Set the card props\r\n        var cardProps = {\r\n            onRender: function (el, card) {\r\n                // See if filters exist\r\n                if (filterValues && filterValues.length > 0) {\r\n                    // Set the data filter value\r\n                    el.setAttribute(\"data-filter\", filterValues.join('|'));\r\n                }\r\n                // Call the event\r\n                _this._props.onCardRendered ? _this._props.onCardRendered(el, card) : null;\r\n            },\r\n            body: [{\r\n                    content: bodyContent,\r\n                    data: item,\r\n                    subTitle: subTitleContent,\r\n                    title: titleContent,\r\n                    onRender: function (el, card) {\r\n                        var item = card.data;\r\n                        // Call the events\r\n                        _this._props.onTitleRendered ? _this._props.onTitleRendered(el.querySelector(\".card-title\"), item) : null;\r\n                        _this._props.onSubTitleRendered ? _this._props.onSubTitleRendered(el.querySelector(\".card-subtitle\"), item) : null;\r\n                        _this._props.onBodyRendered ? _this._props.onBodyRendered(el, item) : null;\r\n                    }\r\n                }]\r\n        };\r\n        // See if we are showing the header\r\n        var showHeader = typeof (this._props.showHeader) === \"boolean\" ? this._props.showHeader : true;\r\n        if (showHeader) {\r\n            cardProps.header = {\r\n                onRender: function (el) {\r\n                    _this._props.onHeaderRendered ? _this._props.onHeaderRendered(el, item) : null;\r\n                }\r\n            };\r\n        }\r\n        // See if we are showing the footer\r\n        var showFooter = typeof (this._props.showFooter) === \"boolean\" ? this._props.showFooter : true;\r\n        if (showFooter) {\r\n            cardProps.footer = {\r\n                onRender: function (el) {\r\n                    _this._props.onFooterRendered ? _this._props.onFooterRendered(el, item) : null;\r\n                }\r\n            };\r\n        }\r\n        // Call the event\r\n        this._props.onCardRendering ? this._props.onCardRendering(cardProps) : null;\r\n        // Return the card properties\r\n        return cardProps;\r\n    };\r\n    // Renders the tiles\r\n    Tiles.prototype.renderTiles = function () {\r\n        // Parse the items\r\n        var cards = [];\r\n        for (var i = 0; i < this._props.items.length; i++) {\r\n            var item = this._props.items[i];\r\n            // Add an tile\r\n            cards.push(this.generateCard(item));\r\n        }\r\n        // Render the tiles\r\n        this._tiles = gd_sprest_bs_1.Components.CardGroup({\r\n            el: this._props.el,\r\n            cards: cards,\r\n            colSize: this._props.colSize\r\n        });\r\n    };\r\n    // Updates the visibility of the tiles\r\n    Tiles.prototype.updateTiles = function () {\r\n        var paginationLimit = this._props.paginationLimit || 10;\r\n        // Get the pagination element\r\n        var elPagination = this._props.el.querySelector(\".tiles-pagination\");\r\n        if (elPagination) {\r\n            // Clear the element\r\n            while (elPagination.firstChild) {\r\n                elPagination.removeChild(elPagination.firstChild);\r\n            }\r\n        }\r\n        else {\r\n            // Create the element\r\n            elPagination = document.createElement(\"div\");\r\n            elPagination.classList.add(\"tiles-pagination\");\r\n            this._props.el.appendChild(elPagination);\r\n        }\r\n        // Get the elements as an array\r\n        var elItems = Array.from(this._tiles.el.querySelectorAll(\".card\"));\r\n        // Parse the items\r\n        for (var i = elItems.length - 1; i >= 0; i--) {\r\n            var elItem = elItems[i];\r\n            // See if a filter value exists\r\n            if (this._activeFilterValue) {\r\n                var filterValues = (elItem.dataset.filter || \"\").split('|');\r\n                // See if the item doesn't contains the filter value\r\n                if (filterValues.indexOf(this._activeFilterValue) < 0) {\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n            // See if a search value exists\r\n            if (this._activeSearchValue) {\r\n                // See if the item doesn't contains the search value\r\n                if (elItem.innerText.toLowerCase().indexOf(this._activeSearchValue.toLowerCase()) < 0) {\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                    // Exclude the item from the array\r\n                    elItems.splice(i, 1);\r\n                    // Continue the loop\r\n                    continue;\r\n                }\r\n            }\r\n        }\r\n        // Parse the active items to show\r\n        for (var i = 0; i < paginationLimit; i++) {\r\n            var elItem = elItems[i];\r\n            // Ensure the item exists\r\n            if (elItem) {\r\n                // Show the item\r\n                elItem.parentElement.classList.remove(\"d-none\");\r\n            }\r\n            else {\r\n                // Break from the loop\r\n                break;\r\n            }\r\n        }\r\n        // Parse the active items to hide\r\n        for (var i = paginationLimit; i < elItems.length; i++) {\r\n            var elItem = elItems[i];\r\n            // Hide the item\r\n            elItem.parentElement.classList.add(\"d-none\");\r\n        }\r\n        // Render the pagination\r\n        this._pagination = gd_sprest_bs_1.Components.Pagination({\r\n            el: elPagination,\r\n            className: \"d-flex justify-content-end pt-2\",\r\n            numberOfPages: Math.ceil(elItems.length / paginationLimit),\r\n            onClick: function (pageNumber) {\r\n                // Parse the items\r\n                for (var i = 0; i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // Hide the item\r\n                    elItem.parentElement.classList.add(\"d-none\");\r\n                }\r\n                // Parse the items to show\r\n                var startIdx = (pageNumber - 1) * paginationLimit;\r\n                for (var i = startIdx; i < startIdx + paginationLimit && i < elItems.length; i++) {\r\n                    var elItem = elItems[i];\r\n                    // Show the item\r\n                    elItem.parentElement.classList.remove(\"d-none\");\r\n                }\r\n            }\r\n        });\r\n        // Call the event\r\n        this._props.onPaginationRendered ? this._props.onPaginationRendered(elPagination) : null;\r\n    };\r\n    // Searches the tile\r\n    Tiles.prototype.search = function (value) {\r\n        // Set the search value\r\n        this._activeSearchValue = value || \"\";\r\n        // Update the tiles\r\n        this.updateTiles();\r\n    };\r\n    return Tiles;\r\n}());\r\nexports.Tiles = Tiles;\r\n\n\n//# sourceURL=webpack://dattatable/./build/dashboard/tiles.js?");
 
 /***/ }),