@wavemaker/app-ng-runtime 11.10.2-rc.203 → 11.10.3-next.25128

package/components/data/table/bundles/index.umd.js

@@ -54,6 +54,7 @@
             ['exportdatasize', { value: 100, ...i4.PROP_NUMBER }],
             ['filtermode', i4.PROP_STRING],
             ['filteronkeypress', { value: false, ...i4.PROP_BOOLEAN }],
+            ['caseinsensitive', { value: false, ...i4.PROP_BOOLEAN }],
             ['filternullrecords', { value: true, ...i4.PROP_BOOLEAN }],
             ['forceellipses', { value: true, ...i4.PROP_BOOLEAN }],
             ['formposition', i4.PROP_STRING],
@@ -113,81 +114,82 @@
     const _c16 = ["wmTable", ""];
     const _c17 = a0 => ({ btn: a0 });
     const _c18 = (a0, a1) => ({ "btn-sm": a0, "disabled-new": a1 });
-    function TableComponent_div_0_i_3_Template(rf, ctx) { if (rf & 1) {
+    function TableComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i");
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext(2);
         i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
     } }
-    function TableComponent_div_0_div_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementContainer(0, 29);
+    function TableComponent_Conditional_0_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementContainer(0, 25);
     } if (rf & 2) {
         const btn_r2 = ctx.$implicit;
-        const index_r3 = ctx.index;
+        const ɵ$index_20_r3 = ctx.$index;
         const ctx_r0 = i0__namespace.ɵɵnextContext(3);
         const buttonRef_r4 = i0__namespace.ɵɵreference(8);
         const anchorRef_r5 = i0__namespace.ɵɵreference(10);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r2.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(3, _c17, btn_r2))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_header_" + index_r3, i0__namespace.ɵɵpureFunction1(5, _c17, btn_r2)));
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r2.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(3, _c17, btn_r2))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_header_" + ɵ$index_20_r3, i0__namespace.ɵɵpureFunction1(5, _c17, btn_r2)));
     } }
-    function TableComponent_div_0_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "div", 30);
+    function TableComponent_Conditional_0_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "div", 26);
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext(3);
         i0__namespace.ɵɵattributeInterpolate1("name", "", ctx_r0.name, "-export");
     } }
-    function TableComponent_div_0_div_7_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 26);
-        i0__namespace.ɵɵtemplate(1, TableComponent_div_0_div_7_ng_container_1_Template, 1, 7, "ng-container", 27)(2, TableComponent_div_0_div_7_div_2_Template, 1, 2, "div", 28);
+    function TableComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 24);
+        i0__namespace.ɵɵrepeaterCreate(1, TableComponent_Conditional_0_Conditional_7_For_2_Template, 1, 7, "ng-container", 25, i0__namespace.ɵɵrepeaterTrackByIdentity);
+        i0__namespace.ɵɵtemplate(3, TableComponent_Conditional_0_Conditional_7_Conditional_3_Template, 1, 2, "div", 26);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext(2);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r0._actions.header);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r0.exportOptions.length);
+        i0__namespace.ɵɵrepeater(ctx_r0._actions.header);
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵconditional(ctx_r0.exportOptions.length ? 3 : -1);
     } }
-    function TableComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 19)(1, "h3", 20)(2, "div", 21);
-        i0__namespace.ɵɵtemplate(3, TableComponent_div_0_i_3_Template, 1, 3, "i", 22);
+    function TableComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 11)(1, "h3", 19)(2, "div", 20);
+        i0__namespace.ɵɵtemplate(3, TableComponent_Conditional_0_Conditional_3_Template, 1, 3, "i", 21);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(4, "div", 21);
-        i0__namespace.ɵɵelement(5, "div", 23)(6, "div", 24);
+        i0__namespace.ɵɵelementStart(4, "div", 20);
+        i0__namespace.ɵɵelement(5, "div", 22)(6, "div", 23);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(7, TableComponent_div_0_div_7_Template, 3, 2, "div", 25);
+        i0__namespace.ɵɵtemplate(7, TableComponent_Conditional_0_Conditional_7_Template, 4, 1, "div", 24);
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r0.iconclass);
+        i0__namespace.ɵɵconditional(ctx_r0.iconclass ? 3 : -1);
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("innerHTML", ctx_r0.title, i0__namespace.ɵɵsanitizeHtml);
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("innerHTML", ctx_r0.subheading, i0__namespace.ɵɵsanitizeHtml);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r0.exportOptions.length || ctx_r0._actions.header.length);
+        i0__namespace.ɵɵconditional(ctx_r0.exportOptions.length || ctx_r0._actions.header.length ? 7 : -1);
     } }
-    function TableComponent_div_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementContainer(0, 29);
+    function TableComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementContainer(0, 25);
     } if (rf & 2) {
         const btn_r6 = ctx.$implicit;
-        const index_r7 = ctx.index;
+        const ɵ$index_37_r7 = ctx.$index;
         const ctx_r0 = i0__namespace.ɵɵnextContext(2);
         const buttonRef_r4 = i0__namespace.ɵɵreference(8);
         const anchorRef_r5 = i0__namespace.ɵɵreference(10);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r6.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(3, _c17, btn_r6))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_footer_" + index_r7, i0__namespace.ɵɵpureFunction1(5, _c17, btn_r6)));
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r6.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(3, _c17, btn_r6))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_footer_" + ɵ$index_37_r7, i0__namespace.ɵɵpureFunction1(5, _c17, btn_r6)));
     } }
-    function TableComponent_div_6_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 31);
-        i0__namespace.ɵɵtemplate(1, TableComponent_div_6_ng_container_1_Template, 1, 7, "ng-container", 27);
+    function TableComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 16);
+        i0__namespace.ɵɵrepeaterCreate(1, TableComponent_Conditional_6_For_2_Template, 1, 7, "ng-container", 25, i0__namespace.ɵɵrepeaterTrackByIdentity);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r0._actions.footer);
+        i0__namespace.ɵɵrepeater(ctx_r0._actions.footer);
     } }
     function TableComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
         const _r8 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "button", 32);
+        i0__namespace.ɵɵelementStart(0, "button", 27);
         i0__namespace.ɵɵlistener("click", function TableComponent_ng_template_7_Template_button_click_0_listener($event) { const btn_r9 = i0__namespace.ɵɵrestoreView(_r8).btn; const ctx_r0 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r9.action)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
@@ -198,7 +200,7 @@
     } }
     function TableComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
         const _r10 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "a", 33);
+        i0__namespace.ɵɵelementStart(0, "a", 28);
         i0__namespace.ɵɵlistener("click", function TableComponent_ng_template_9_Template_a_click_0_listener($event) { const btn_r11 = i0__namespace.ɵɵrestoreView(_r10).btn; const ctx_r0 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r11.action)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
@@ -2200,13 +2202,13 @@
             } }, features: [i0__namespace.ɵɵProvidersFeature([
                     i4.provideAs(TableComponent, i1.NG_VALUE_ACCESSOR, true),
                     i4.provideAsWidgetRef(TableComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c16, decls: 29, vars: 4, consts: [["datagridElement", ""], ["buttonRef", ""], ["anchorRef", ""], ["multiColumnFilterView", ""], ["inlineEditView", ""], ["inlineEditNewView", ""], ["rowActionsView", ""], ["rowExpansionActionView", ""], ["customExprView", ""], ["dynamicTable", ""], ["rowDetailView", ""], ["class", "panel-heading", 4, "ngIf"], [1, "app-datagrid"], [1, "panel-footer", "clearfix", 3, "hidden"], [1, "app-datagrid-paginator", 3, "hidden"], ["wmPagination", "", "show.bind", "shownavigation", "navigationalign.bind", "navigationalign", "navigationsize.bind", "navigationSize", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks"], ["class", "app-datagrid-actions", 4, "ngIf"], ["hidden", ""], [1, "dynamic-table-container"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], [3, "class", 4, "ngIf"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["class", "panel-actions app-datagrid-actions", 4, "ngIf"], [1, "panel-actions", "app-datagrid-actions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector", 4, "ngFor", "ngForOf"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left"], [1, "app-datagrid-actions"], ["wmButton", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "type", "button", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "disabled.bind", "btn.disabled", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"], ["wmAnchor", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵtemplate(0, TableComponent_div_0_Template, 8, 4, "div", 11);
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c16, decls: 29, vars: 4, consts: [["datagridElement", ""], ["buttonRef", ""], ["anchorRef", ""], ["multiColumnFilterView", ""], ["inlineEditView", ""], ["inlineEditNewView", ""], ["rowActionsView", ""], ["rowExpansionActionView", ""], ["customExprView", ""], ["dynamicTable", ""], ["rowDetailView", ""], [1, "panel-heading"], [1, "app-datagrid"], [1, "panel-footer", "clearfix", 3, "hidden"], [1, "app-datagrid-paginator", 3, "hidden"], ["wmPagination", "", "show.bind", "shownavigation", "navigationalign.bind", "navigationalign", "navigationsize.bind", "navigationSize", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks"], [1, "app-datagrid-actions"], ["hidden", ""], [1, "dynamic-table-container"], [1, "panel-title"], [1, "pull-left"], [3, "class"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], [1, "panel-actions", "app-datagrid-actions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left"], ["wmButton", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "type", "button", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "disabled.bind", "btn.disabled", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"], ["wmAnchor", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵtemplate(0, TableComponent_Conditional_0_Template, 8, 4, "div", 11);
                 i0__namespace.ɵɵelement(1, "div", 12, 0);
                 i0__namespace.ɵɵelementStart(3, "div", 13)(4, "div", 14);
                 i0__namespace.ɵɵelement(5, "nav", 15);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(6, TableComponent_div_6_Template, 2, 1, "div", 16);
+                i0__namespace.ɵɵtemplate(6, TableComponent_Conditional_6_Template, 3, 0, "div", 16);
                 i0__namespace.ɵɵelementEnd();
                 i0__namespace.ɵɵtemplate(7, TableComponent_ng_template_7_Template, 1, 5, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor)(9, TableComponent_ng_template_9_Template, 1, 4, "ng-template", null, 2, i0__namespace.ɵɵtemplateRefExtractor);
                 i0__namespace.ɵɵelementStart(11, "div", 17);
@@ -2214,21 +2216,21 @@
                 i0__namespace.ɵɵelement(28, "div", 18);
                 i0__namespace.ɵɵelementEnd();
             } if (rf & 2) {
-                i0__namespace.ɵɵproperty("ngIf", ctx.title || ctx.subheading || ctx.iconclass || ctx.exportOptions.length || ctx._actions.header.length);
+                i0__namespace.ɵɵconditional(ctx.title || ctx.subheading || ctx.iconclass || ctx.exportOptions.length || ctx._actions.header.length ? 0 : -1);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("hidden", !ctx._actions.footer.length && (!ctx.shownavigation || ctx.onDemandLoad && ctx.dataNavigator.isDisableNext || (ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) <= ctx.pagesize));
                 i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("hidden", !(ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) && !(ctx.dataNavigator.datasource == null ? null : ctx.dataNavigator.datasource.pagination == null ? null : ctx.dataNavigator.datasource.pagination.next) || !ctx.shownavigation || ctx.onDemandLoad && ctx.dataNavigator.isDisableNext || (ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) <= ctx.pagesize);
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("ngIf", ctx._actions.footer.length);
-            } }, dependencies: [i5__namespace.AnchorComponent, i6__namespace.BsDropdownDirective, i7__namespace.NgClass, i7__namespace.NgForOf, i7__namespace.NgIf, i7__namespace.NgTemplateOutlet, i8__namespace.ButtonComponent, i9__namespace.MenuComponent, i10__namespace.PaginationComponent], encapsulation: 2 }); }
+                i0__namespace.ɵɵconditional(ctx._actions.footer.length ? 6 : -1);
+            } }, dependencies: [i5__namespace.AnchorComponent, i6__namespace.BsDropdownDirective, i7__namespace.NgClass, i7__namespace.NgTemplateOutlet, i8__namespace.ButtonComponent, i9__namespace.MenuComponent, i10__namespace.PaginationComponent], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmTable]', providers: [
                         i4.provideAs(TableComponent, i1.NG_VALUE_ACCESSOR, true),
                         i4.provideAsWidgetRef(TableComponent)
-                    ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass || exportOptions.length || _actions.header.length\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" *ngIf=\"iconclass\"></i>\n        </div>\n        <div class=\"pull-left\">\n            <div class=\"heading\" [innerHTML]=\"title\"></div>\n            <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n        <div class=\"panel-actions app-datagrid-actions\" *ngIf=\"exportOptions.length || _actions.header.length\">\n            <ng-container *ngFor=\"let btn of _actions.header; let index = index;\"\n                          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                          [ngTemplateOutletContext]=\"{btn:btn}\"\n                          [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\" *ngIf=\"exportOptions.length\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n                dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n        </div>\n    </h3>\n</div>\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize)\">\n    <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize\">\n        <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n             navigationsize.bind=\"navigationSize\"\n             navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n             boundarylinks.bind=\"boundarylinks\"\n             forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n    </div>\n    <div class=\"app-datagrid-actions\" *ngIf=\"_actions.footer.length\">\n        <ng-container *ngFor=\"let btn of _actions.footer; let index = index;\"\n                      [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                      [ngTemplateOutletContext]=\"{btn:btn}\"\n                      [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n    <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n    <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n            hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n    <ng-container #multiColumnFilterView></ng-container>\n\n    <ng-container #inlineEditView></ng-container>\n\n    <ng-container #inlineEditNewView></ng-container>\n\n    <ng-container #rowActionsView></ng-container>\n\n    <ng-container #rowExpansionActionView></ng-container>\n\n    <ng-container #customExprView></ng-container>\n\n    <ng-container #dynamicTable></ng-container>\n\n    <ng-container #rowDetailView></ng-container>\n\n    <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
+                    ], template: "@if (title || subheading || iconclass || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass) {\n          <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize)\">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
         }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.FormBuilder }, { type: i2__namespace.App }, { type: i2__namespace.DynamicComponentRefProvider }, { type: i2__namespace.StatePersistence }, { type: i2__namespace.PaginationService }, { type: i2__namespace.Viewport }, { type: i3__namespace.ListComponent, decorators: [{
                     type: i0.Optional
                 }] }, { type: undefined, decorators: [{
@@ -3064,10 +3066,36 @@
             }
             return data;
         }
+        // Function that checks if a given string is a valid date and returns the timestamp if it is, or NaN if it's not.
+        parseDateString(dateString) {
+            const timestamp = Date.parse(dateString);
+            if (!isNaN(timestamp)) {
+                return timestamp;
+            }
+            else { // Since Date.parse() doesn't support all date formats, manually validating the date.
+                const parts = dateString?.split(/[-/\s]+/)?.map(Number) || [];
+                return new Date(parts[2], parts[1] - 1, parts[0]).getTime();
+            }
+        }
         // Returns data sorted using sortObj
         getSortResult(data, sortObj) {
             if (sortObj && sortObj.direction) {
-                data = lodashEs.orderBy(data, sortObj.field, sortObj.direction);
+                const isValidDateString = this.parseDateString(lodashEs.get(lodashEs.find(data, sortObj.field), sortObj.field));
+                if (!isNaN(isValidDateString)) { // if the field is a date string
+                    data = lodashEs.orderBy(data, [(item) => this.parseDateString(item[sortObj.field])], [sortObj.direction]);
+                }
+                else if (this.table.columns[sortObj.field]?.caseinsensitive) {
+                    //Fix for [WMS-27505]: Added case-insensitive sorting so that uppercase and lowercase letters are treated the same when sorting.
+                    if (sortObj.direction === 'asc') {
+                        data = lodashEs.orderBy(data, [(item) => lodashEs.get(item, sortObj.field)?.toLowerCase(), (item) => item[sortObj.field]]);
+                    }
+                    else {
+                        data = lodashEs.orderBy(data, [(item) => lodashEs.get(item, sortObj.field)?.toLowerCase(), (item) => item[sortObj.field]], ['desc', 'desc']);
+                    }
+                }
+                else {
+                    data = lodashEs.orderBy(data, sortObj.field, sortObj.direction);
+                }
             }
             return data;
         }
@@ -3601,6 +3629,7 @@
             ['showcount', i4.PROP_BOOLEAN],
             ['showdropdownon', { value: 'default', ...i4.PROP_STRING }],
             ['sortable', { value: true, ...i4.PROP_BOOLEAN }],
+            ['caseinsensitive', { value: false, ...i4.PROP_BOOLEAN }],
             ['tabletdisplay', { value: true, ...i4.PROP_BOOLEAN }],
             ['textalignment', { value: 'left', ...i4.PROP_STRING }],
             ['textcolor', i4.PROP_STRING],
@@ -4192,6 +4221,7 @@
             this.filterwidget = this.filterwidget || i4.getDataTableFilterWidget(this.type || 'string');
             this.isFilterDataSetBound = !!this.bindfilterdataset;
             this.defaultvalue = i4.getDefaultValue(this.defaultvalue, this.type, this.editWidgetType);
+            this.caseinsensitive = !!this.getAttr('caseinsensitive');
             // For date time data types, if date pattern is not specified, set the app format or default format
             if (i2.isDateTimeType(this.type) && this.formatpattern === 'toDate' && !this.datepattern) {
                 const defaultFormat = i2.getDisplayDateTimeFormat(this.type);