raise-common-lib 0.0.248 → 0.0.249

package/bundles/raise-common-lib.umd.js

@@ -1,11 +1,11 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@syncfusion/ej2-angular-grids'), require('lodash'), require('rxjs'), require('@angular/material/snack-bar'), require('@angular/material/dialog'), require('@syncfusion/ej2-angular-treegrid'), require('@syncfusion/ej2-angular-navigations'), require('@angular/router'), require('rxjs/operators'), require('@angular/cdk/drag-drop'), require('@angular/common/http'), require('@syncfusion/ej2-base'), require('resize-observer-polyfill'), require('@syncfusion/ej2-data'), require('moment'), require('circular-json'), require('@angular/material/core'), require('@syncfusion/ej2-angular-layouts'), require('@angular/common'), require('@angular/material/icon'), require('@angular/platform-browser'), require('@angular/forms'), require('ng-inline-svg'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-diagrams'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-pivotview'), require('@syncfusion/ej2-angular-charts'), require('@syncfusion/ej2-angular-pdfviewer'), require('@syncfusion/ej2-angular-splitbuttons'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/checkbox'), require('@angular/material/select'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/button'), require('@syncfusion/ej2-inputs/src/maskedtextbox/maskedtextbox'), require('@syncfusion/ej2-data/src/manager'), require('@syncfusion/ej2-data/src/query')) :
-    typeof define === 'function' && define.amd ? define('raise-common-lib', ['exports', '@angular/core', '@syncfusion/ej2-angular-grids', 'lodash', 'rxjs', '@angular/material/snack-bar', '@angular/material/dialog', '@syncfusion/ej2-angular-treegrid', '@syncfusion/ej2-angular-navigations', '@angular/router', 'rxjs/operators', '@angular/cdk/drag-drop', '@angular/common/http', '@syncfusion/ej2-base', 'resize-observer-polyfill', '@syncfusion/ej2-data', 'moment', 'circular-json', '@angular/material/core', '@syncfusion/ej2-angular-layouts', '@angular/common', '@angular/material/icon', '@angular/platform-browser', '@angular/forms', 'ng-inline-svg', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-diagrams', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-pivotview', '@syncfusion/ej2-angular-charts', '@syncfusion/ej2-angular-pdfviewer', '@syncfusion/ej2-angular-splitbuttons', '@syncfusion/ej2-angular-richtexteditor', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/checkbox', '@angular/material/select', '@angular/material/form-field', '@angular/material/input', '@angular/material/button', '@syncfusion/ej2-inputs/src/maskedtextbox/maskedtextbox', '@syncfusion/ej2-data/src/manager', '@syncfusion/ej2-data/src/query'], factory) :
-    (global = global || self, factory(global['raise-common-lib'] = {}, global.ng.core, global.ej2AngularGrids, global.lodash, global.rxjs, global.ng.material['snack-bar'], global.ng.material.dialog, global.ej2AngularTreegrid, global.ej2AngularNavigations, global.ng.router, global.rxjs.operators, global.ng.cdk['drag-drop'], global.ng.common.http, global.ej2Base, global.ResizeObserver, global.ej2Data, global.moment, global.CircularJSON, global.ng.material.core, global.ej2AngularLayouts, global.ng.common, global.ng.material.icon, global.ng.platformBrowser, global.ng.forms, global.ngInlineSvg, global.ej2AngularButtons, global.ej2AngularDiagrams, global.ej2AngularPopups, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularDropdowns, global.ej2AngularPivotview, global.ej2AngularCharts, global.ej2AngularPdfviewer, global.ej2AngularSplitbuttons, global.ej2AngularRichtexteditor, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.checkbox, global.ng.material.select, global.ng.material['form-field'], global.ng.material.input, global.ng.material.button, global.maskedtextbox, global.manager, global.query));
-}(this, (function (exports, core, ej2AngularGrids, lodash, rxjs, snackBar, dialog, ej2AngularTreegrid, ej2AngularNavigations, router, operators, dragDrop, http, ej2Base, ResizeObserver, ej2Data, moment, CircularJSON, core$1, ej2AngularLayouts, common, icon, platformBrowser, forms, ngInlineSvg, ej2AngularButtons, ej2AngularDiagrams, ej2AngularPopups, ej2AngularCalendars, ej2AngularInputs, ej2AngularDropdowns, ej2AngularPivotview, ej2AngularCharts, ej2AngularPdfviewer, ej2AngularSplitbuttons, ej2AngularRichtexteditor, menu, tooltip, checkbox, select, formField, input, button, maskedtextbox, manager, query) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@syncfusion/ej2-angular-grids'), require('lodash'), require('moment'), require('rxjs'), require('@angular/material/snack-bar'), require('@angular/material/dialog'), require('@syncfusion/ej2-angular-treegrid'), require('@syncfusion/ej2-angular-navigations'), require('@angular/router'), require('rxjs/operators'), require('@angular/cdk/drag-drop'), require('@angular/common/http'), require('@syncfusion/ej2-base'), require('resize-observer-polyfill'), require('@syncfusion/ej2-data'), require('circular-json'), require('@angular/material/core'), require('@syncfusion/ej2-angular-layouts'), require('@angular/common'), require('@angular/material/icon'), require('@angular/platform-browser'), require('@angular/forms'), require('ng-inline-svg'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-diagrams'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-pivotview'), require('@syncfusion/ej2-angular-charts'), require('@syncfusion/ej2-angular-pdfviewer'), require('@syncfusion/ej2-angular-splitbuttons'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/checkbox'), require('@angular/material/select'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/button'), require('@syncfusion/ej2-inputs/src/maskedtextbox/maskedtextbox'), require('@syncfusion/ej2-data/src/manager'), require('@syncfusion/ej2-data/src/query')) :
+    typeof define === 'function' && define.amd ? define('raise-common-lib', ['exports', '@angular/core', '@syncfusion/ej2-angular-grids', 'lodash', 'moment', 'rxjs', '@angular/material/snack-bar', '@angular/material/dialog', '@syncfusion/ej2-angular-treegrid', '@syncfusion/ej2-angular-navigations', '@angular/router', 'rxjs/operators', '@angular/cdk/drag-drop', '@angular/common/http', '@syncfusion/ej2-base', 'resize-observer-polyfill', '@syncfusion/ej2-data', 'circular-json', '@angular/material/core', '@syncfusion/ej2-angular-layouts', '@angular/common', '@angular/material/icon', '@angular/platform-browser', '@angular/forms', 'ng-inline-svg', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-diagrams', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-pivotview', '@syncfusion/ej2-angular-charts', '@syncfusion/ej2-angular-pdfviewer', '@syncfusion/ej2-angular-splitbuttons', '@syncfusion/ej2-angular-richtexteditor', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/checkbox', '@angular/material/select', '@angular/material/form-field', '@angular/material/input', '@angular/material/button', '@syncfusion/ej2-inputs/src/maskedtextbox/maskedtextbox', '@syncfusion/ej2-data/src/manager', '@syncfusion/ej2-data/src/query'], factory) :
+    (global = global || self, factory(global['raise-common-lib'] = {}, global.ng.core, global.ej2AngularGrids, global.lodash, global.moment, global.rxjs, global.ng.material['snack-bar'], global.ng.material.dialog, global.ej2AngularTreegrid, global.ej2AngularNavigations, global.ng.router, global.rxjs.operators, global.ng.cdk['drag-drop'], global.ng.common.http, global.ej2Base, global.ResizeObserver, global.ej2Data, global.CircularJSON, global.ng.material.core, global.ej2AngularLayouts, global.ng.common, global.ng.material.icon, global.ng.platformBrowser, global.ng.forms, global.ngInlineSvg, global.ej2AngularButtons, global.ej2AngularDiagrams, global.ej2AngularPopups, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularDropdowns, global.ej2AngularPivotview, global.ej2AngularCharts, global.ej2AngularPdfviewer, global.ej2AngularSplitbuttons, global.ej2AngularRichtexteditor, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.checkbox, global.ng.material.select, global.ng.material['form-field'], global.ng.material.input, global.ng.material.button, global.maskedtextbox, global.manager, global.query));
+}(this, (function (exports, core, ej2AngularGrids, lodash, moment, rxjs, snackBar, dialog, ej2AngularTreegrid, ej2AngularNavigations, router, operators, dragDrop, http, ej2Base, ResizeObserver, ej2Data, CircularJSON, core$1, ej2AngularLayouts, common, icon, platformBrowser, forms, ngInlineSvg, ej2AngularButtons, ej2AngularDiagrams, ej2AngularPopups, ej2AngularCalendars, ej2AngularInputs, ej2AngularDropdowns, ej2AngularPivotview, ej2AngularCharts, ej2AngularPdfviewer, ej2AngularSplitbuttons, ej2AngularRichtexteditor, menu, tooltip, checkbox, select, formField, input, button, maskedtextbox, manager, query) { 'use strict';
 
-    ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
     moment = moment && moment.hasOwnProperty('default') ? moment['default'] : moment;
+    ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
     CircularJSON = CircularJSON && CircularJSON.hasOwnProperty('default') ? CircularJSON['default'] : CircularJSON;
 
     /******************************************************************************
@@ -443,6 +443,791 @@
         return {};
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/date-tree-filter/date-tree-filter.helper.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function DateTreeFilterSetupOptions() { }
+    if (false) {
+        /** @type {?} */
+        DateTreeFilterSetupOptions.prototype.rows;
+        /** @type {?} */
+        DateTreeFilterSetupOptions.prototype.fields;
+        /** @type {?} */
+        DateTreeFilterSetupOptions.prototype.hints;
+    }
+    /**
+     * @record
+     */
+    function DateTreeFilterHelperOptions() { }
+    if (false) {
+        /** @type {?} */
+        DateTreeFilterHelperOptions.prototype.getTranslation;
+        /** @type {?} */
+        DateTreeFilterHelperOptions.prototype.getPopoverElement;
+        /** @type {?} */
+        DateTreeFilterHelperOptions.prototype.getGridElement;
+        /** @type {?} */
+        DateTreeFilterHelperOptions.prototype.applyRows;
+        /** @type {?|undefined} */
+        DateTreeFilterHelperOptions.prototype.parseDateValue;
+        /** @type {?|undefined} */
+        DateTreeFilterHelperOptions.prototype.dateFormats;
+    }
+    /**
+     * @record
+     */
+    function RsCommonGridDateTreeFactoryHost() { }
+    if (false) {
+        /** @type {?} */
+        RsCommonGridDateTreeFactoryHost.prototype.translation;
+        /** @type {?} */
+        RsCommonGridDateTreeFactoryHost.prototype.dateTreePopoverRef;
+        /** @type {?} */
+        RsCommonGridDateTreeFactoryHost.prototype.grid;
+    }
+    /** @type {?} */
+    var DATE_TREE_DEFAULT_DATE_FORMATS = [
+        "YYYY-MM-DD",
+        "MM/DD/YYYY",
+        "DD/MM/YYYY",
+        "YYYY/MM/DD",
+        "DD-MMM-YYYY",
+        "MMM DD, YYYY",
+    ];
+    var DateTreeFilterHelper = /** @class */ (function () {
+        function DateTreeFilterHelper(options) {
+            this.popoverVisible = false;
+            this.popoverField = "";
+            this.popoverStyle = {};
+            this.selectedByField = {};
+            this.fieldLabelMap = {};
+            this.dateFields = [];
+            this.sourceRows = [];
+            this.defaultDateFormats = [
+                "YYYY-MM-DD",
+                "MM/DD/YYYY",
+                "DD/MM/YYYY",
+                "YYYY/MM/DD",
+                "DD-MMM-YYYY",
+                "DD-MMM-YYYY hh:mm A",
+                "MMM DD, YYYY",
+                moment.ISO_8601,
+            ];
+            this.options = options;
+        }
+        /**
+         * @param {?} config
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.setup = /**
+         * @param {?} config
+         * @return {?}
+         */
+        function (config) {
+            var _this = this;
+            /** @type {?} */
+            var rows = config && config.rows ? config.rows : [];
+            /** @type {?} */
+            var fields = config && config.fields ? config.fields : [];
+            /** @type {?} */
+            var hints = config && config.hints ? config.hints : [];
+            this.sourceRows = rows;
+            this.dateFields = this.resolveDateTreeFieldsByHints(fields, hints);
+            this.fieldLabelMap = {};
+            (fields || []).forEach((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) {
+                if (!item || !item.columnName) {
+                    return;
+                }
+                _this.fieldLabelMap[item.columnName] =
+                    item.columnDisplayName || item.columnName;
+            }));
+            this.apply();
+        };
+        /**
+         * @param {?} args
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.handleGridActionBegin = /**
+         * @param {?} args
+         * @return {?}
+         */
+        function (args) {
+            /** @type {?} */
+            var requestType = this.getRequestType(args);
+            if (requestType === "filterchoicerequest" ||
+                requestType === "filtersearchbegin") {
+                args.filterChoiceCount = 15000;
+            }
+            if (requestType !== "filterbeforeopen") {
+                return;
+            }
+            /** @type {?} */
+            var columnName = this.resolveActionColumnName(args);
+            if (!this.isDateTreeField(columnName)) {
+                this.close();
+                return;
+            }
+            args.cancel = true;
+            this.open(columnName);
+        };
+        /**
+         * @param {?} selectionMap
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.updateSelection = /**
+         * @param {?} selectionMap
+         * @return {?}
+         */
+        function (selectionMap) {
+            this.selectedByField = selectionMap || {};
+            this.apply();
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.close = /**
+         * @return {?}
+         */
+        function () {
+            if (!this.popoverVisible) {
+                return;
+            }
+            this.popoverVisible = false;
+            this.popoverField = "";
+            this.popoverStyle = {};
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.handleDocumentMouseDown = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (!this.popoverVisible) {
+                return;
+            }
+            /** @type {?} */
+            var target = (/** @type {?} */ (event.target));
+            if (!target) {
+                return;
+            }
+            if (this.isInsidePopover(target) || this.isDateFilterMenuItem(target)) {
+                return;
+            }
+            this.close();
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.handleDocumentMouseOver = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (!this.popoverVisible) {
+                return;
+            }
+            /** @type {?} */
+            var target = (/** @type {?} */ (event.target));
+            if (!target) {
+                return;
+            }
+            if (this.isInsidePopover(target)) {
+                return;
+            }
+            /** @type {?} */
+            var menuItem = (/** @type {?} */ (target.closest(".e-menu-item")));
+            if (menuItem) {
+                if (!this.isDateFilterMenuItem(menuItem)) {
+                    this.close();
+                }
+                return;
+            }
+            /** @type {?} */
+            var otherFilterTarget = (/** @type {?} */ (target.closest(".e-filtermenudiv, .e-headercell .e-columnmenu, .e-columnmenu, .e-contextmenu")));
+            if (otherFilterTarget && !this.isDateFilterMenuItem(otherFilterTarget)) {
+                this.close();
+            }
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.updatePosition = /**
+         * @return {?}
+         */
+        function () {
+            if (!this.popoverVisible) {
+                return;
+            }
+            /** @type {?} */
+            var anchor = this.findDateFilterAnchorElement();
+            if (anchor) {
+                /** @type {?} */
+                var rect = anchor.getBoundingClientRect();
+                /** @type {?} */
+                var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+                /** @type {?} */
+                var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+                /** @type {?} */
+                var popoverElement = this.options.getPopoverElement
+                    ? this.options.getPopoverElement()
+                    : null;
+                /** @type {?} */
+                var popoverWidth = popoverElement && popoverElement.offsetWidth
+                    ? popoverElement.offsetWidth
+                    : 300;
+                /** @type {?} */
+                var popoverHeight = popoverElement && popoverElement.offsetHeight
+                    ? popoverElement.offsetHeight
+                    : 420;
+                /** @type {?} */
+                var edgeGap = 8;
+                /** @type {?} */
+                var anchorGap = 8;
+                /** @type {?} */
+                var top = rect.top - 6;
+                /** @type {?} */
+                var left = rect.right + anchorGap;
+                if (left + popoverWidth > viewportWidth - edgeGap) {
+                    left = rect.left - popoverWidth - anchorGap;
+                }
+                if (left < edgeGap) {
+                    left = edgeGap;
+                }
+                if (left + popoverWidth > viewportWidth - edgeGap) {
+                    left = Math.max(edgeGap, viewportWidth - popoverWidth - edgeGap);
+                }
+                if (top + popoverHeight > viewportHeight - edgeGap) {
+                    top = Math.max(edgeGap, viewportHeight - popoverHeight - edgeGap);
+                }
+                this.popoverStyle = {
+                    position: "fixed",
+                    left: left + "px",
+                    top: top + "px",
+                };
+                return;
+            }
+            /** @type {?} */
+            var gridElement = this.options.getGridElement
+                ? this.options.getGridElement()
+                : null;
+            if (gridElement && gridElement.getBoundingClientRect) {
+                /** @type {?} */
+                var fallbackRect = gridElement.getBoundingClientRect();
+                this.popoverStyle = {
+                    position: "fixed",
+                    left: Math.max(8, fallbackRect.right - 312) + "px",
+                    top: Math.max(8, fallbackRect.top + 8) + "px",
+                };
+            }
+        };
+        /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.open = /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        function (field) {
+            var _this = this;
+            this.popoverField = field;
+            this.popoverVisible = true;
+            this.updatePosition();
+            setTimeout((/**
+             * @return {?}
+             */
+            function () { return _this.updatePosition(); }), 50);
+            setTimeout((/**
+             * @return {?}
+             */
+            function () { return _this.updatePosition(); }), 150);
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.apply = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var filteredRows = this.filterRowsBySelectedDateTree(this.sourceRows || []);
+            this.options.applyRows(filteredRows);
+        };
+        /**
+         * @private
+         * @param {?} args
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.getRequestType = /**
+         * @private
+         * @param {?} args
+         * @return {?}
+         */
+        function (args) {
+            if (!args || !args.requestType) {
+                return "";
+            }
+            return String(args.requestType).trim().toLowerCase();
+        };
+        /**
+         * @private
+         * @param {?} args
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.resolveActionColumnName = /**
+         * @private
+         * @param {?} args
+         * @return {?}
+         */
+        function (args) {
+            if (!args) {
+                return "";
+            }
+            return (args.columnName ||
+                args.field ||
+                args.currentFilteringColumn ||
+                (args.column && (args.column.field || args.column.columnName)) ||
+                "");
+        };
+        /**
+         * @private
+         * @param {?} fields
+         * @param {?} hints
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.resolveDateTreeFieldsByHints = /**
+         * @private
+         * @param {?} fields
+         * @param {?} hints
+         * @return {?}
+         */
+        function (fields, hints) {
+            /** @type {?} */
+            var normalizedHints = (hints || [])
+                .filter((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) { return !!item; }))
+                .map((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) { return String(item).trim().toLowerCase(); }));
+            if (!fields || !fields.length || !normalizedHints.length) {
+                return [];
+            }
+            return fields
+                .filter((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) {
+                if (!item || !item.columnName) {
+                    return false;
+                }
+                /** @type {?} */
+                var columnName = String(item.columnName || "").toLowerCase();
+                /** @type {?} */
+                var displayName = String(item.columnDisplayName || "").toLowerCase();
+                return normalizedHints.some((/**
+                 * @param {?} hint
+                 * @return {?}
+                 */
+                function (hint) {
+                    return (columnName === hint ||
+                        displayName === hint ||
+                        (hint.length >= 3 &&
+                            (columnName.indexOf(hint) > -1 ||
+                                displayName.indexOf(hint) > -1)));
+                }));
+            }))
+                .map((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) { return item.columnName; }));
+        };
+        /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.isDateTreeField = /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        function (field) {
+            return this.dateFields.indexOf(field) > -1;
+        };
+        /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.getFieldDaySelectionMap = /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        function (field) {
+            if (!this.selectedByField[field]) {
+                this.selectedByField[field] = {};
+            }
+            return this.selectedByField[field];
+        };
+        /**
+         * @private
+         * @param {?} rows
+         * @param {?=} excludeField
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.filterRowsBySelectedDateTree = /**
+         * @private
+         * @param {?} rows
+         * @param {?=} excludeField
+         * @return {?}
+         */
+        function (rows, excludeField) {
+            var _this = this;
+            /** @type {?} */
+            var filteredRows = rows ? rows.slice() : [];
+            this.dateFields.forEach((/**
+             * @param {?} field
+             * @return {?}
+             */
+            function (field) {
+                if (excludeField && field === excludeField) {
+                    return;
+                }
+                /** @type {?} */
+                var selectedMap = _this.getFieldDaySelectionMap(field);
+                /** @type {?} */
+                var selectedKeys = Object.keys(selectedMap);
+                if (!selectedKeys.length) {
+                    return;
+                }
+                filteredRows = filteredRows.filter((/**
+                 * @param {?} row
+                 * @return {?}
+                 */
+                function (row) {
+                    /** @type {?} */
+                    var dayKey = _this.getDayKeyByRowValue(row[field]);
+                    return dayKey ? !!selectedMap[dayKey] : false;
+                }));
+            }));
+            return filteredRows;
+        };
+        /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.getDayKeyByRowValue = /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            /** @type {?} */
+            var date = this.parseDateValue(value);
+            if (!date) {
+                return "";
+            }
+            return this.toDayKey(date.getFullYear(), date.getMonth() + 1, date.getDate());
+        };
+        /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.parseDateValue = /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            if (this.options.parseDateValue) {
+                return this.options.parseDateValue(value);
+            }
+            if (!value) {
+                return null;
+            }
+            if (value instanceof Date) {
+                return value;
+            }
+            /** @type {?} */
+            var formats = this.options && this.options.dateFormats && this.options.dateFormats.length
+                ? this.options.dateFormats
+                : this.defaultDateFormats;
+            /** @type {?} */
+            var parsed = moment(value, formats, true);
+            if (parsed.isValid()) {
+                return parsed.toDate();
+            }
+            /** @type {?} */
+            var fallback = new Date(value);
+            return isNaN(fallback.getTime()) ? null : fallback;
+        };
+        /**
+         * @private
+         * @param {?} year
+         * @param {?} month
+         * @param {?} day
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.toDayKey = /**
+         * @private
+         * @param {?} year
+         * @param {?} month
+         * @param {?} day
+         * @return {?}
+         */
+        function (year, month, day) {
+            return year + "-" + this.pad2(month) + "-" + this.pad2(day);
+        };
+        /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.pad2 = /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            return value < 10 ? "0" + value : String(value);
+        };
+        /**
+         * @private
+         * @param {?} target
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.isInsidePopover = /**
+         * @private
+         * @param {?} target
+         * @return {?}
+         */
+        function (target) {
+            /** @type {?} */
+            var popoverElement = this.options.getPopoverElement
+                ? this.options.getPopoverElement()
+                : null;
+            if (!target || !popoverElement) {
+                return false;
+            }
+            return popoverElement.contains(target);
+        };
+        /**
+         * @private
+         * @param {?} element
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.isDateFilterMenuItem = /**
+         * @private
+         * @param {?} element
+         * @return {?}
+         */
+        function (element) {
+            if (!element) {
+                return false;
+            }
+            /** @type {?} */
+            var menuItem = (/** @type {?} */ (element.closest(".e-menu-item")));
+            if (!menuItem) {
+                return false;
+            }
+            /** @type {?} */
+            var text = (menuItem.textContent || "").trim().toLowerCase();
+            /** @type {?} */
+            var translation = this.options.getTranslation
+                ? this.options.getTranslation()
+                : null;
+            /** @type {?} */
+            var filterText = String((translation && translation.FILTER) || "filter")
+                .trim()
+                .toLowerCase();
+            if (!text) {
+                return false;
+            }
+            if (text.indexOf(filterText) > -1 || text.indexOf("filter") > -1) {
+                return true;
+            }
+            /** @type {?} */
+            var cls = (menuItem.className || "").toLowerCase();
+            return cls.indexOf("filter") > -1;
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        DateTreeFilterHelper.prototype.findDateFilterAnchorElement = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            /** @type {?} */
+            var menuContainers = (/** @type {?} */ (Array.from(document.querySelectorAll(".e-columnmenu, .e-contextmenu"))));
+            /** @type {?} */
+            var visibleContainers = menuContainers.filter((/**
+             * @param {?} container
+             * @return {?}
+             */
+            function (container) {
+                if (!container || !container.getBoundingClientRect) {
+                    return false;
+                }
+                /** @type {?} */
+                var rect = container.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0) {
+                    return false;
+                }
+                /** @type {?} */
+                var style = window.getComputedStyle(container);
+                if (!style || style.display === "none" || style.visibility === "hidden") {
+                    return false;
+                }
+                return true;
+            }));
+            if (!visibleContainers.length) {
+                return null;
+            }
+            /** @type {?} */
+            var currentContainer = visibleContainers[visibleContainers.length - 1];
+            /** @type {?} */
+            var menuItems = (/** @type {?} */ (Array.from(currentContainer.querySelectorAll(".e-menu-item"))));
+            /** @type {?} */
+            var visibleFilterItems = menuItems.filter((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) {
+                if (!_this.isDateFilterMenuItem(item)) {
+                    return false;
+                }
+                if (!item.getBoundingClientRect) {
+                    return false;
+                }
+                /** @type {?} */
+                var rect = item.getBoundingClientRect();
+                return rect.width > 0 && rect.height > 0;
+            }));
+            if (!visibleFilterItems.length) {
+                return null;
+            }
+            /** @type {?} */
+            var focusedItem = visibleFilterItems.find((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) {
+                return (item.classList.contains("e-focused") ||
+                    item.classList.contains("e-selected") ||
+                    item.classList.contains("e-hover"));
+            }));
+            return focusedItem || visibleFilterItems[visibleFilterItems.length - 1];
+        };
+        return DateTreeFilterHelper;
+    }());
+    if (false) {
+        /** @type {?} */
+        DateTreeFilterHelper.prototype.popoverVisible;
+        /** @type {?} */
+        DateTreeFilterHelper.prototype.popoverField;
+        /** @type {?} */
+        DateTreeFilterHelper.prototype.popoverStyle;
+        /** @type {?} */
+        DateTreeFilterHelper.prototype.selectedByField;
+        /** @type {?} */
+        DateTreeFilterHelper.prototype.fieldLabelMap;
+        /** @type {?} */
+        DateTreeFilterHelper.prototype.dateFields;
+        /**
+         * @type {?}
+         * @private
+         */
+        DateTreeFilterHelper.prototype.sourceRows;
+        /**
+         * @type {?}
+         * @private
+         */
+        DateTreeFilterHelper.prototype.options;
+        /**
+         * @type {?}
+         * @private
+         */
+        DateTreeFilterHelper.prototype.defaultDateFormats;
+    }
+    /**
+     * @param {?} host
+     * @return {?}
+     */
+    function resolveGridElement(host) {
+        if (!host || !host.grid) {
+            return null;
+        }
+        /** @type {?} */
+        var gridRef = host.grid;
+        if (gridRef.grid && gridRef.grid.element) {
+            return gridRef.grid.element;
+        }
+        if (gridRef.element) {
+            return gridRef.element;
+        }
+        return null;
+    }
+    /**
+     * @param {?} host
+     * @param {?} applyRows
+     * @param {?=} dateFormats
+     * @return {?}
+     */
+    function createRsCommonGridDateTreeHelper(host, applyRows, dateFormats) {
+        return new DateTreeFilterHelper({
+            getTranslation: (/**
+             * @return {?}
+             */
+            function () { return (host ? host.translation : null); }),
+            getPopoverElement: (/**
+             * @return {?}
+             */
+            function () {
+                return host && host.dateTreePopoverRef
+                    ? host.dateTreePopoverRef.nativeElement
+                    : null;
+            }),
+            getGridElement: (/**
+             * @return {?}
+             */
+            function () { return resolveGridElement(host); }),
+            applyRows: applyRows,
+            dateFormats: dateFormats && dateFormats.length
+                ? dateFormats
+                : DATE_TREE_DEFAULT_DATE_FORMATS,
+        });
+    }
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/common-grid/index.component.ts
@@ -450,6 +1235,7 @@
      */
     var CommonGridComponent = /** @class */ (function () {
         function CommonGridComponent(ref) {
+            var _this = this;
             this.ref = ref;
             this.showCheckBox = true;
             this.loaded = true;
@@ -496,6 +1282,23 @@
             this.alwaysShowCheckbox = false;
             this.disableSystemRow = false; // 禁用IsSytem = true的整行
             // 禁用IsSytem = true的整行
+            /**
+             * 开启日期树筛选（默认关闭，不影响现有页面）
+             */
+            this.enableDateTreeFilter = false;
+            /**
+             * 参与日期树筛选的列名或 hint，如 ['CreatedOn', 'ModifiedOn']
+             */
+            this.dateTreeFilterFields = [];
+            /**
+             * 未筛选原始数据（可选）。
+             * 不传时由组件在 dataSource 变更时自动快照；传则由页面自行维护 raw。
+             */
+            this.dateTreeSourceRows = null;
+            /**
+             * 内聚模式下仍向页面同步筛选结果（默认 false，一般无需绑定）
+             */
+            this.dateTreeEmitFilteredRows = false;
             this.recordDoubleClick = new core.EventEmitter();
             this.actionComplete = new core.EventEmitter();
             this.rowSelected = new core.EventEmitter();
@@ -513,6 +1316,16 @@
             this.rowDrop = new core.EventEmitter();
             this.rowDrag = new core.EventEmitter();
             this.rowDragStart = new core.EventEmitter();
+            /**
+             * 日期树筛选后的行数据（可选，复杂页面与 dateTreeSourceRows 搭配使用）
+             */
+            this.dateTreeFilteredRows = new core.EventEmitter();
+            /**
+             * 内聚模式：表格实际绑定的数据
+             */
+            this.dateTreeDisplayRows = [];
+            this.dateTreeRawRows = [];
+            this.dateTreeApplyingFilter = false;
             this.selectId = [];
             this.startPaging = false;
             this.indexList = [];
@@ -540,6 +1353,11 @@
                 return list;
             });
             this.translation = getTranslation();
+            this.dateTreeHelper = createRsCommonGridDateTreeHelper(this, (/**
+             * @param {?} rows
+             * @return {?}
+             */
+            function (rows) { return _this.onDateTreeRowsApplied(rows); }));
         }
         /**
          * @return {?}
@@ -567,6 +1385,36 @@
         function (index, item) {
             return index; // or a unique identifier in your object
         };
+        Object.defineProperty(CommonGridComponent.prototype, "gridBindDataSource", {
+            /** ejs-grid 绑定数据源：内聚模式用内部展示数据，否则用 dataSource */
+            get: /**
+             * ejs-grid 绑定数据源：内聚模式用内部展示数据，否则用 dataSource
+             * @return {?}
+             */
+            function () {
+                if (this.enableDateTreeFilter && this.dateTreeSourceRows == null) {
+                    return this.dateTreeDisplayRows;
+                }
+                return this.dataSource;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommonGridComponent.prototype, "dateTreePopoverSourceRows", {
+            /** 日期树 popover 用的全量数据 */
+            get: /**
+             * 日期树 popover 用的全量数据
+             * @return {?}
+             */
+            function () {
+                if (this.dateTreeSourceRows != null) {
+                    return this.dateTreeSourceRows;
+                }
+                return this.dateTreeRawRows;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @param {?} changes
          * @return {?}
@@ -576,12 +1424,16 @@
          * @return {?}
          */
         function (changes) {
-            if (changes.dataSource && changes.dataSource.currentValue) {
+            /** @type {?} */
+            var bindRows = changes.dataSource && changes.dataSource.currentValue
+                ? changes.dataSource.currentValue
+                : null;
+            if (bindRows) {
                 if (this.allowPaging &&
-                    changes.dataSource.currentValue.length &&
+                    bindRows.length &&
                     !this.pageSettings) {
                     this.pageSettings =
-                        changes.dataSource.currentValue.length > 9
+                        bindRows.length > 9
                             ? {
                                 pageSizes: ["All", "25", "50", "100"],
                                 pageSize: 50,
@@ -589,11 +1441,123 @@
                             : null;
                 }
             }
+            if (this.enableDateTreeFilter &&
+                this.dateTreeSourceRows == null &&
+                changes.dataSource &&
+                !this.dateTreeApplyingFilter) {
+                this.captureDateTreeRawFromDataSource(changes.dataSource.currentValue);
+            }
+            if (changes.enableDateTreeFilter && changes.enableDateTreeFilter.currentValue) {
+                this.captureDateTreeRawFromDataSource(this.dataSource);
+            }
+            if (changes.enableDateTreeFilter && !changes.enableDateTreeFilter.currentValue) {
+                this.dateTreeHelper && this.dateTreeHelper.close();
+                this.dateTreeDisplayRows = [];
+                this.dateTreeRawRows = [];
+            }
+            if (this.enableDateTreeFilter &&
+                (changes.enableDateTreeFilter ||
+                    changes.dateTreeFilterFields ||
+                    changes.dateTreeSourceRows ||
+                    changes.fields ||
+                    changes.dataSource)) {
+                this.refreshDateTreeFilter();
+            }
         };
         /**
+         * @private
+         * @param {?} rows
          * @return {?}
          */
-        CommonGridComponent.prototype._load = /**
+        CommonGridComponent.prototype.captureDateTreeRawFromDataSource = /**
+         * @private
+         * @param {?} rows
+         * @return {?}
+         */
+        function (rows) {
+            this.dateTreeRawRows = rows ? rows.slice() : [];
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        CommonGridComponent.prototype.onDocumentMouseDown = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (this.enableDateTreeFilter && this.dateTreeHelper) {
+                this.dateTreeHelper.handleDocumentMouseDown(event);
+            }
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        CommonGridComponent.prototype.onDocumentMouseOver = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (this.enableDateTreeFilter && this.dateTreeHelper) {
+                this.dateTreeHelper.handleDocumentMouseOver(event);
+            }
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        CommonGridComponent.prototype.refreshDateTreeFilter = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            if (!this.enableDateTreeFilter || !this.dateTreeHelper) {
+                return;
+            }
+            /** @type {?} */
+            var rows = this.dateTreeSourceRows != null
+                ? this.dateTreeSourceRows
+                : this.dateTreeRawRows || [];
+            this.dateTreeHelper.setup({
+                rows: rows,
+                fields: this.fields || [],
+                hints: this.dateTreeFilterFields || [],
+            });
+        };
+        /**
+         * @private
+         * @param {?} rows
+         * @return {?}
+         */
+        CommonGridComponent.prototype.onDateTreeRowsApplied = /**
+         * @private
+         * @param {?} rows
+         * @return {?}
+         */
+        function (rows) {
+            var _this = this;
+            /** @type {?} */
+            var result = rows || [];
+            this.dateTreeApplyingFilter = true;
+            if (this.enableDateTreeFilter && this.dateTreeSourceRows == null) {
+                this.dateTreeDisplayRows = result;
+            }
+            if (this.dateTreeSourceRows != null || this.dateTreeEmitFilteredRows) {
+                this.dateTreeFilteredRows.emit(result);
+            }
+            this.ref && this.ref.markForCheck();
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.dateTreeApplyingFilter = false;
+            }), 0);
+        };
+        /**
+         * @return {?}
+         */
+        CommonGridComponent.prototype._load = /**
          * @return {?}
          */
         function () {
@@ -847,7 +1811,10 @@
                     args.requestType === "sorting")) {
                 this.startPaging = true;
             }
-            if (args.requestType == "filterchoicerequest" ||
+            if (this.enableDateTreeFilter && this.dateTreeHelper) {
+                this.dateTreeHelper.handleGridActionBegin(args);
+            }
+            else if (args.requestType == "filterchoicerequest" ||
                 args.requestType === "filtersearchbegin") {
                 args.filterChoiceCount = 15000;
             }
@@ -1220,7 +2187,7 @@
         CommonGridComponent.decorators = [
             { type: core.Component, args: [{
                         selector: "rs-common-grid",
-                        template: "<ejs-grid\r\n  #grid\r\n  [id]=\"gridId\"\r\n  [ngClass]=\"{\r\n    'hide-Check-box': !alwaysShowCheckbox,\r\n    'grid-loading': className === 'grid-loading'\r\n  }\"\r\n  [dataSource]=\"dataSource\"\r\n  [allowPaging]=\"allowPaging && pageSettings\"\r\n  [allowResizing]=\"true\"\r\n  [pageSettings]=\"pageSettings\"\r\n  [showColumnMenu]=\"true\"\r\n  [allowSorting]=\"true\"\r\n  [allowFiltering]=\"true\"\r\n  [allowExcelExport]=\"true\"\r\n  [allowRowDragAndDrop]=\"allowRowDragAndDrop\"\r\n  [filterSettings]=\"filterSettings\"\r\n  [resizeSettings]=\"resizeSettings\"\r\n  [allowSelection]=\"true\"\r\n  [editSettings]=\"editSettings\"\r\n  [childGrid]=\"childGrid\"\r\n  [contextMenuItems]=\"dataSource && dataSource.length ? contextMenuItems : null\"\r\n  [selectionSettings]=\"selectionSettings\"\r\n  (recordClick)=\"_recordClick($event)\"\r\n  (recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n  (actionBegin)=\"_actionBegin($event)\"\r\n  (actionComplete)=\"_actionHandler($event)\"\r\n  (rowSelected)=\"_rowSelected($event)\"\r\n  (rowDeselecting)=\"_rowDeselecting($event)\"\r\n  (rowDeselected)=\"_rowDeselected($event)\"\r\n  style=\"border: none\"\r\n  (contextMenuClick)=\"_onContextMenu($event)\"\r\n  (contextMenuOpen)=\"contextMenuOpen($event)\"\r\n  (queryCellInfo)=\"customiseCell($event)\"\r\n  (dataBound)=\"_dataBound($event)\"\r\n  (rowDataBound)=\"_rowDataBound($event)\"\r\n  (rowSelecting)=\"_rowSelecting($event)\"\r\n  (excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n  (rowDrop)=\"onRowDrop($event)\"\r\n  (rowDragStart)=\"_rowDragStart($event)\"\r\n  (rowDrag)=\"_rowDrag($event)\"\r\n  (load)=\"_load()\"\r\n  [frozenColumns]=\"frozenColumns\"\r\n  [columnChooserSettings]=\"columnChooserSettings\"\r\n>\r\n  <e-columns>\r\n    <e-column\r\n      *ngIf=\"showCheckBox\"\r\n      type=\"checkbox\"\r\n      [width]=\"checkBoxWidth\"\r\n      [minWidth]=\"checkBoxWidth\"\r\n      [showColumnMenu]=\"false\"\r\n      [allowResizing]=\"false\"\r\n    ></e-column>\r\n    <e-column\r\n      *ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n      [field]=\"item.columnName\"\r\n      [filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n      [customAttributes]=\"\r\n        item.colName === 'entityUserList' || item.colName === 'kycProgress'\r\n          ? { class: 'hideColumnFilterClass' }\r\n          : {}\r\n      \"\r\n      [headerText]=\"item.columnDisplayName\"\r\n      [textAlign]=\"item.textAlign\"\r\n      [showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n      [allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n      [allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n      [showInColumnChooser]=\"\r\n        item.showInColumnChooser === undefined ? true : item.showInColumnChooser\r\n      \"\r\n      [editType]=\"item.editType\"\r\n      [validationRules]=\"item.validationRules\"\r\n      [type]=\"item.dataType || 'string'\"\r\n      [width]=\"item.width\"\r\n      [minWidth]=\"item.minWidth\"\r\n      [format]=\"item.format\"\r\n      [visible]=\"item.visible\"\r\n      [template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n      [clipMode]=\"\r\n        item.clipMode ? item.clipMode : clipMode || 'EllipsisWithTooltip'\r\n      \"\r\n      [sortComparer]=\"item.dateComparer || null\"\r\n      [allowResizing]=\"!last\"\r\n      [headerTemplate]=\"item.showHeaderTemplate ? headerTemplate : undefined\"\r\n      [isPrimaryKey]=\"item?.isPrimaryKey ? true : false\"\r\n    >\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n",
+                        template: "<rs-date-tree-filter-popover\r\n  *ngIf=\"enableDateTreeFilter && dateTreeHelper && dateTreeHelper.popoverVisible\"\r\n  #dateTreePopoverRef\r\n  [ngStyle]=\"dateTreeHelper.popoverStyle\"\r\n  [field]=\"dateTreeHelper.popoverField\"\r\n  [translation]=\"translation\"\r\n  [sourceRows]=\"dateTreePopoverSourceRows\"\r\n  [dateFields]=\"dateTreeHelper.dateFields\"\r\n  [selectedByField]=\"dateTreeHelper.selectedByField\"\r\n  [fieldLabelMap]=\"dateTreeHelper.fieldLabelMap\"\r\n  (apply)=\"dateTreeHelper.updateSelection($event)\"\r\n  (close)=\"dateTreeHelper.close()\"\r\n></rs-date-tree-filter-popover>\r\n<ejs-grid\r\n  #grid\r\n  [id]=\"gridId\"\r\n  [ngClass]=\"{\r\n    'hide-Check-box': !alwaysShowCheckbox,\r\n    'grid-loading': className === 'grid-loading'\r\n  }\"\r\n  [dataSource]=\"gridBindDataSource\"\r\n  [allowPaging]=\"allowPaging && pageSettings\"\r\n  [allowResizing]=\"true\"\r\n  [pageSettings]=\"pageSettings\"\r\n  [showColumnMenu]=\"true\"\r\n  [allowSorting]=\"true\"\r\n  [allowFiltering]=\"true\"\r\n  [allowExcelExport]=\"true\"\r\n  [allowRowDragAndDrop]=\"allowRowDragAndDrop\"\r\n  [filterSettings]=\"filterSettings\"\r\n  [resizeSettings]=\"resizeSettings\"\r\n  [allowSelection]=\"true\"\r\n  [editSettings]=\"editSettings\"\r\n  [childGrid]=\"childGrid\"\r\n  [contextMenuItems]=\"gridBindDataSource && gridBindDataSource.length ? contextMenuItems : null\"\r\n  [selectionSettings]=\"selectionSettings\"\r\n  (recordClick)=\"_recordClick($event)\"\r\n  (recordDoubleClick)=\"_recordDoubleClick($event)\"\r\n  (actionBegin)=\"_actionBegin($event)\"\r\n  (actionComplete)=\"_actionHandler($event)\"\r\n  (rowSelected)=\"_rowSelected($event)\"\r\n  (rowDeselecting)=\"_rowDeselecting($event)\"\r\n  (rowDeselected)=\"_rowDeselected($event)\"\r\n  style=\"border: none\"\r\n  (contextMenuClick)=\"_onContextMenu($event)\"\r\n  (contextMenuOpen)=\"contextMenuOpen($event)\"\r\n  (queryCellInfo)=\"customiseCell($event)\"\r\n  (dataBound)=\"_dataBound($event)\"\r\n  (rowDataBound)=\"_rowDataBound($event)\"\r\n  (rowSelecting)=\"_rowSelecting($event)\"\r\n  (excelQueryCellInfo)=\"_exportQueryCellInfo($event)\"\r\n  (rowDrop)=\"onRowDrop($event)\"\r\n  (rowDragStart)=\"_rowDragStart($event)\"\r\n  (rowDrag)=\"_rowDrag($event)\"\r\n  (load)=\"_load()\"\r\n  [frozenColumns]=\"frozenColumns\"\r\n  [columnChooserSettings]=\"columnChooserSettings\"\r\n>\r\n  <e-columns>\r\n    <e-column\r\n      *ngIf=\"showCheckBox\"\r\n      type=\"checkbox\"\r\n      [width]=\"checkBoxWidth\"\r\n      [minWidth]=\"checkBoxWidth\"\r\n      [showColumnMenu]=\"false\"\r\n      [allowResizing]=\"false\"\r\n    ></e-column>\r\n    <e-column\r\n      *ngFor=\"let item of fields; trackBy: trackByFn; let last = last\"\r\n      [field]=\"item.columnName\"\r\n      [filter]=\"item.filter ? item.filter : { type: 'CheckBox' }\"\r\n      [customAttributes]=\"\r\n        item.colName === 'entityUserList' || item.colName === 'kycProgress'\r\n          ? { class: 'hideColumnFilterClass' }\r\n          : {}\r\n      \"\r\n      [headerText]=\"item.columnDisplayName\"\r\n      [textAlign]=\"item.textAlign\"\r\n      [showColumnMenu]=\"item.showColumnMenu === undefined ? true : false\"\r\n      [allowFiltering]=\"item.allowFiltering === undefined ? true : false\"\r\n      [allowSorting]=\"item.allowSorting === undefined ? true : false\"\r\n      [showInColumnChooser]=\"\r\n        item.showInColumnChooser === undefined ? true : item.showInColumnChooser\r\n      \"\r\n      [editType]=\"item.editType\"\r\n      [validationRules]=\"item.validationRules\"\r\n      [type]=\"item.dataType || 'string'\"\r\n      [width]=\"item.width\"\r\n      [minWidth]=\"item.minWidth\"\r\n      [format]=\"item.format\"\r\n      [visible]=\"item.visible\"\r\n      [template]=\"item.showTemplate ? columnTemplate : undefined\"\r\n      [clipMode]=\"\r\n        item.clipMode ? item.clipMode : clipMode || 'EllipsisWithTooltip'\r\n      \"\r\n      [sortComparer]=\"item.dateComparer || null\"\r\n      [allowResizing]=\"!last\"\r\n      [headerTemplate]=\"item.showHeaderTemplate ? headerTemplate : undefined\"\r\n      [isPrimaryKey]=\"item?.isPrimaryKey ? true : false\"\r\n    >\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n",
                         styles: [""]
                     }] }
         ];
@@ -1258,6 +2225,10 @@
             alwaysShowCheckbox: [{ type: core.Input }],
             defaultRecord: [{ type: core.Input }],
             disableSystemRow: [{ type: core.Input }],
+            enableDateTreeFilter: [{ type: core.Input }],
+            dateTreeFilterFields: [{ type: core.Input }],
+            dateTreeSourceRows: [{ type: core.Input }],
+            dateTreeEmitFilteredRows: [{ type: core.Input }],
             recordDoubleClick: [{ type: core.Output }],
             actionComplete: [{ type: core.Output }],
             rowSelected: [{ type: core.Output }],
@@ -1274,7 +2245,11 @@
             rowSelecting: [{ type: core.Output }],
             rowDrop: [{ type: core.Output }],
             rowDrag: [{ type: core.Output }],
-            rowDragStart: [{ type: core.Output }]
+            rowDragStart: [{ type: core.Output }],
+            dateTreeFilteredRows: [{ type: core.Output }],
+            dateTreePopoverRef: [{ type: core.ViewChild, args: ["dateTreePopoverRef", { read: core.ElementRef, static: false },] }],
+            onDocumentMouseDown: [{ type: core.HostListener, args: ["document:mousedown", ["$event"],] }],
+            onDocumentMouseOver: [{ type: core.HostListener, args: ["document:mouseover", ["$event"],] }]
         };
         return CommonGridComponent;
     }());
@@ -1354,6 +2329,27 @@
         CommonGridComponent.prototype.defaultRecord;
         /** @type {?} */
         CommonGridComponent.prototype.disableSystemRow;
+        /**
+         * 开启日期树筛选（默认关闭，不影响现有页面）
+         * @type {?}
+         */
+        CommonGridComponent.prototype.enableDateTreeFilter;
+        /**
+         * 参与日期树筛选的列名或 hint，如 ['CreatedOn', 'ModifiedOn']
+         * @type {?}
+         */
+        CommonGridComponent.prototype.dateTreeFilterFields;
+        /**
+         * 未筛选原始数据（可选）。
+         * 不传时由组件在 dataSource 变更时自动快照；传则由页面自行维护 raw。
+         * @type {?}
+         */
+        CommonGridComponent.prototype.dateTreeSourceRows;
+        /**
+         * 内聚模式下仍向页面同步筛选结果（默认 false，一般无需绑定）
+         * @type {?}
+         */
+        CommonGridComponent.prototype.dateTreeEmitFilteredRows;
         /** @type {?} */
         CommonGridComponent.prototype.recordDoubleClick;
         /** @type {?} */
@@ -1388,6 +2384,30 @@
         CommonGridComponent.prototype.rowDrag;
         /** @type {?} */
         CommonGridComponent.prototype.rowDragStart;
+        /**
+         * 日期树筛选后的行数据（可选，复杂页面与 dateTreeSourceRows 搭配使用）
+         * @type {?}
+         */
+        CommonGridComponent.prototype.dateTreeFilteredRows;
+        /** @type {?} */
+        CommonGridComponent.prototype.dateTreePopoverRef;
+        /** @type {?} */
+        CommonGridComponent.prototype.dateTreeHelper;
+        /**
+         * 内聚模式：表格实际绑定的数据
+         * @type {?}
+         */
+        CommonGridComponent.prototype.dateTreeDisplayRows;
+        /**
+         * @type {?}
+         * @private
+         */
+        CommonGridComponent.prototype.dateTreeRawRows;
+        /**
+         * @type {?}
+         * @private
+         */
+        CommonGridComponent.prototype.dateTreeApplyingFilter;
         /** @type {?} */
         CommonGridComponent.prototype.selectId;
         /** @type {?} */
@@ -1527,6 +2547,905 @@
         GridActionItemComponent.prototype.ImageType;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/date-tree-filter/date-tree-filter-popover/index.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var DateTreeFilterPopoverComponent = /** @class */ (function () {
+        function DateTreeFilterPopoverComponent() {
+            this.field = "";
+            this.sourceRows = [];
+            this.dateFields = [];
+            this.selectedByField = {};
+            this.fieldLabelMap = {};
+            this.apply = new core.EventEmitter();
+            this.close = new core.EventEmitter();
+            this.keyword = "";
+            this.years = [];
+            this.expandStateByField = {};
+            this.workingSelectedByField = {};
+        }
+        /**
+         * @param {?} changes
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.ngOnChanges = /**
+         * @param {?} changes
+         * @return {?}
+         */
+        function (changes) {
+            if (changes.field ||
+                changes.sourceRows ||
+                changes.selectedByField ||
+                changes.dateFields) {
+                this.keyword = "";
+                this.workingSelectedByField = this.cloneSelectionMap(this.selectedByField);
+                this.rebuildTree();
+            }
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.closePopover = /**
+         * @return {?}
+         */
+        function () {
+            this.close.emit();
+        };
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.onKeywordChange = /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            this.keyword = value || "";
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.getVisibleYears = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var searchText = (this.keyword || "").trim().toLowerCase();
+            if (!searchText) {
+                return this.years;
+            }
+            return this.years
+                .map((/**
+             * @param {?} yearNode
+             * @return {?}
+             */
+            function (yearNode) {
+                /** @type {?} */
+                var yearMatched = String(yearNode.year).toLowerCase().indexOf(searchText) > -1;
+                /** @type {?} */
+                var months = yearNode.months
+                    .map((/**
+                 * @param {?} monthNode
+                 * @return {?}
+                 */
+                function (monthNode) {
+                    /** @type {?} */
+                    var monthMatched = String(monthNode.label)
+                        .toLowerCase()
+                        .indexOf(searchText) > -1;
+                    /** @type {?} */
+                    var days = monthNode.days.filter((/**
+                     * @param {?} dayNode
+                     * @return {?}
+                     */
+                    function (dayNode) {
+                        return (String(dayNode.label)
+                            .toLowerCase()
+                            .indexOf(searchText) > -1);
+                    }));
+                    if (yearMatched || monthMatched) {
+                        return monthNode;
+                    }
+                    return Object.assign({}, monthNode, { days: days });
+                }))
+                    .filter((/**
+                 * @param {?} monthNode
+                 * @return {?}
+                 */
+                function (monthNode) { return monthNode.days.length > 0; }));
+                if (yearMatched) {
+                    return yearNode;
+                }
+                return Object.assign({}, yearNode, { months: months });
+            }))
+                .filter((/**
+             * @param {?} yearNode
+             * @return {?}
+             */
+            function (yearNode) { return yearNode.months.length > 0; }));
+        };
+        /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.toggleYearExpanded = /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        function (yearNode) {
+            /** @type {?} */
+            var state = this.getOrCreateExpandState(this.field);
+            state.years[yearNode.key] = !state.years[yearNode.key];
+            yearNode.expanded = !!state.years[yearNode.key];
+        };
+        /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.toggleMonthExpanded = /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        function (monthNode) {
+            /** @type {?} */
+            var state = this.getOrCreateExpandState(this.field);
+            state.months[monthNode.key] = !state.months[monthNode.key];
+            monthNode.expanded = !!state.months[monthNode.key];
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isAllChecked = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            /** @type {?} */
+            var enabledDayKeys = this.getEnabledDayKeysInCurrentField();
+            if (!enabledDayKeys.length) {
+                return false;
+            }
+            return enabledDayKeys.every((/**
+             * @param {?} key
+             * @return {?}
+             */
+            function (key) { return !!selectedMap[key]; }));
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isAllIndeterminate = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            /** @type {?} */
+            var enabledDayKeys = this.getEnabledDayKeysInCurrentField();
+            if (!enabledDayKeys.length) {
+                return false;
+            }
+            /** @type {?} */
+            var selectedCount = enabledDayKeys.filter((/**
+             * @param {?} key
+             * @return {?}
+             */
+            function (key) { return !!selectedMap[key]; }))
+                .length;
+            return selectedCount > 0 && selectedCount < enabledDayKeys.length;
+        };
+        /**
+         * @param {?} checked
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.toggleAllDays = /**
+         * @param {?} checked
+         * @return {?}
+         */
+        function (checked) {
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            /** @type {?} */
+            var enabledDayKeys = this.getEnabledDayKeysInCurrentField();
+            enabledDayKeys.forEach((/**
+             * @param {?} key
+             * @return {?}
+             */
+            function (key) {
+                if (checked) {
+                    selectedMap[key] = true;
+                }
+                else {
+                    delete selectedMap[key];
+                }
+            }));
+        };
+        /**
+         * @param {?} dayNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isDayChecked = /**
+         * @param {?} dayNode
+         * @return {?}
+         */
+        function (dayNode) {
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            return !!selectedMap[dayNode.key];
+        };
+        /**
+         * @param {?} dayNode
+         * @param {?} checked
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.toggleDay = /**
+         * @param {?} dayNode
+         * @param {?} checked
+         * @return {?}
+         */
+        function (dayNode, checked) {
+            if (dayNode.disabled) {
+                return;
+            }
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            if (checked) {
+                selectedMap[dayNode.key] = true;
+            }
+            else {
+                delete selectedMap[dayNode.key];
+            }
+        };
+        /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isMonthDisabled = /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        function (monthNode) {
+            return monthNode.days.every((/**
+             * @param {?} dayNode
+             * @return {?}
+             */
+            function (dayNode) { return dayNode.disabled; }));
+        };
+        /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isMonthChecked = /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        function (monthNode) {
+            if (this.isMonthDisabled(monthNode)) {
+                return false;
+            }
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            /** @type {?} */
+            var enabledDays = monthNode.days.filter((/**
+             * @param {?} dayNode
+             * @return {?}
+             */
+            function (dayNode) { return !dayNode.disabled; }));
+            return enabledDays.every((/**
+             * @param {?} dayNode
+             * @return {?}
+             */
+            function (dayNode) { return !!selectedMap[dayNode.key]; }));
+        };
+        /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isMonthIndeterminate = /**
+         * @param {?} monthNode
+         * @return {?}
+         */
+        function (monthNode) {
+            if (this.isMonthDisabled(monthNode)) {
+                return false;
+            }
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            /** @type {?} */
+            var enabledDays = monthNode.days.filter((/**
+             * @param {?} dayNode
+             * @return {?}
+             */
+            function (dayNode) { return !dayNode.disabled; }));
+            /** @type {?} */
+            var selectedCount = enabledDays.filter((/**
+             * @param {?} dayNode
+             * @return {?}
+             */
+            function (dayNode) {
+                return !!selectedMap[dayNode.key];
+            })).length;
+            return selectedCount > 0 && selectedCount < enabledDays.length;
+        };
+        /**
+         * @param {?} monthNode
+         * @param {?} checked
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.toggleMonth = /**
+         * @param {?} monthNode
+         * @param {?} checked
+         * @return {?}
+         */
+        function (monthNode, checked) {
+            if (this.isMonthDisabled(monthNode)) {
+                return;
+            }
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            monthNode.days.forEach((/**
+             * @param {?} dayNode
+             * @return {?}
+             */
+            function (dayNode) {
+                if (dayNode.disabled) {
+                    return;
+                }
+                if (checked) {
+                    selectedMap[dayNode.key] = true;
+                }
+                else {
+                    delete selectedMap[dayNode.key];
+                }
+            }));
+        };
+        /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isYearDisabled = /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        function (yearNode) {
+            var _this = this;
+            return yearNode.months.every((/**
+             * @param {?} monthNode
+             * @return {?}
+             */
+            function (monthNode) {
+                return _this.isMonthDisabled(monthNode);
+            }));
+        };
+        /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isYearChecked = /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        function (yearNode) {
+            var _this = this;
+            if (this.isYearDisabled(yearNode)) {
+                return false;
+            }
+            /** @type {?} */
+            var enabledMonths = yearNode.months.filter((/**
+             * @param {?} monthNode
+             * @return {?}
+             */
+            function (monthNode) { return !_this.isMonthDisabled(monthNode); }));
+            return enabledMonths.every((/**
+             * @param {?} monthNode
+             * @return {?}
+             */
+            function (monthNode) { return _this.isMonthChecked(monthNode); }));
+        };
+        /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.isYearIndeterminate = /**
+         * @param {?} yearNode
+         * @return {?}
+         */
+        function (yearNode) {
+            if (this.isYearDisabled(yearNode)) {
+                return false;
+            }
+            /** @type {?} */
+            var selectedMap = this.getFieldDaySelectionMap(this.field);
+            /** @type {?} */
+            var enabledDays = [];
+            yearNode.months.forEach((/**
+             * @param {?} monthNode
+             * @return {?}
+             */
+            function (monthNode) {
+                monthNode.days.forEach((/**
+                 * @param {?} dayNode
+                 * @return {?}
+                 */
+                function (dayNode) {
+                    if (!dayNode.disabled) {
+                        enabledDays.push(dayNode.key);
+                    }
+                }));
+            }));
+            /** @type {?} */
+            var selectedCount = enabledDays.filter((/**
+             * @param {?} key
+             * @return {?}
+             */
+            function (key) { return !!selectedMap[key]; })).length;
+            return selectedCount > 0 && selectedCount < enabledDays.length;
+        };
+        /**
+         * @param {?} yearNode
+         * @param {?} checked
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.toggleYear = /**
+         * @param {?} yearNode
+         * @param {?} checked
+         * @return {?}
+         */
+        function (yearNode, checked) {
+            var _this = this;
+            if (this.isYearDisabled(yearNode)) {
+                return;
+            }
+            yearNode.months.forEach((/**
+             * @param {?} monthNode
+             * @return {?}
+             */
+            function (monthNode) {
+                _this.toggleMonth(monthNode, checked);
+            }));
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.clearSelection = /**
+         * @return {?}
+         */
+        function () {
+            if (this.field) {
+                this.workingSelectedByField[this.field] = {};
+            }
+            this.apply.emit(this.cloneSelectionMap(this.workingSelectedByField));
+            this.rebuildTree();
+        };
+        /**
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.applySelection = /**
+         * @return {?}
+         */
+        function () {
+            this.apply.emit(this.cloneSelectionMap(this.workingSelectedByField));
+            this.closePopover();
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.rebuildTree = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            if (!this.field) {
+                this.years = [];
+                return;
+            }
+            /** @type {?} */
+            var sourceRows = this.sourceRows || [];
+            /** @type {?} */
+            var rowsByOtherFilters = this.filterRowsBySelectedDateTree(sourceRows, this.field);
+            /** @type {?} */
+            var availableDayKeyMap = {};
+            rowsByOtherFilters.forEach((/**
+             * @param {?} row
+             * @return {?}
+             */
+            function (row) {
+                /** @type {?} */
+                var dayKey = _this.getDayKeyByRowValue(row[_this.field]);
+                if (dayKey) {
+                    availableDayKeyMap[dayKey] = true;
+                }
+            }));
+            /** @type {?} */
+            var groupedMap = {};
+            sourceRows.forEach((/**
+             * @param {?} row
+             * @return {?}
+             */
+            function (row) {
+                /** @type {?} */
+                var date = _this.parseDateValue(row[_this.field]);
+                if (!date) {
+                    return;
+                }
+                /** @type {?} */
+                var year = date.getFullYear();
+                /** @type {?} */
+                var month = date.getMonth() + 1;
+                /** @type {?} */
+                var day = date.getDate();
+                if (!groupedMap[year]) {
+                    groupedMap[year] = {};
+                }
+                if (!groupedMap[year][month]) {
+                    groupedMap[year][month] = {};
+                }
+                if (!groupedMap[year][month][day]) {
+                    groupedMap[year][month][day] = 0;
+                }
+                groupedMap[year][month][day] += 1;
+            }));
+            /** @type {?} */
+            var expandState = this.getOrCreateExpandState(this.field);
+            this.years = Object.keys(groupedMap)
+                .map((/**
+             * @param {?} key
+             * @return {?}
+             */
+            function (key) { return Number(key); }))
+                .sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) { return b - a; }))
+                .map((/**
+             * @param {?} year
+             * @return {?}
+             */
+            function (year) {
+                /** @type {?} */
+                var months = Object.keys(groupedMap[year])
+                    .map((/**
+                 * @param {?} key
+                 * @return {?}
+                 */
+                function (key) { return Number(key); }))
+                    .sort((/**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */
+                function (a, b) { return a - b; }))
+                    .map((/**
+                 * @param {?} month
+                 * @return {?}
+                 */
+                function (month) {
+                    /** @type {?} */
+                    var monthKey = year + "-" + _this.pad2(month);
+                    if (expandState.months[monthKey] === undefined) {
+                        expandState.months[monthKey] = true;
+                    }
+                    /** @type {?} */
+                    var days = Object.keys(groupedMap[year][month])
+                        .map((/**
+                     * @param {?} key
+                     * @return {?}
+                     */
+                    function (key) { return Number(key); }))
+                        .sort((/**
+                     * @param {?} a
+                     * @param {?} b
+                     * @return {?}
+                     */
+                    function (a, b) { return a - b; }))
+                        .map((/**
+                     * @param {?} day
+                     * @return {?}
+                     */
+                    function (day) {
+                        /** @type {?} */
+                        var dayKey = _this.toDayKey(year, month, day);
+                        /** @type {?} */
+                        var dayDate = new Date(year, month - 1, day);
+                        return {
+                            key: dayKey,
+                            day: day,
+                            label: moment(dayDate).format("D MMM YYYY"),
+                            count: groupedMap[year][month][day],
+                            disabled: !availableDayKeyMap[dayKey],
+                        };
+                    }));
+                    return {
+                        key: monthKey,
+                        month: month,
+                        label: moment()
+                            .month(month - 1)
+                            .format("MMM"),
+                        expanded: !!expandState.months[monthKey],
+                        days: days,
+                    };
+                }));
+                /** @type {?} */
+                var yearKey = String(year);
+                if (expandState.years[yearKey] === undefined) {
+                    expandState.years[yearKey] = true;
+                }
+                return {
+                    key: yearKey,
+                    year: year,
+                    expanded: !!expandState.years[yearKey],
+                    months: months,
+                };
+            }));
+        };
+        /**
+         * @private
+         * @param {?} rows
+         * @param {?=} excludeField
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.filterRowsBySelectedDateTree = /**
+         * @private
+         * @param {?} rows
+         * @param {?=} excludeField
+         * @return {?}
+         */
+        function (rows, excludeField) {
+            var _this = this;
+            /** @type {?} */
+            var filteredRows = rows ? rows.slice() : [];
+            (this.dateFields || []).forEach((/**
+             * @param {?} field
+             * @return {?}
+             */
+            function (field) {
+                if (excludeField && field === excludeField) {
+                    return;
+                }
+                /** @type {?} */
+                var selectedMap = _this.getFieldDaySelectionMap(field);
+                /** @type {?} */
+                var selectedKeys = Object.keys(selectedMap);
+                if (!selectedKeys.length) {
+                    return;
+                }
+                filteredRows = filteredRows.filter((/**
+                 * @param {?} row
+                 * @return {?}
+                 */
+                function (row) {
+                    /** @type {?} */
+                    var dayKey = _this.getDayKeyByRowValue(row[field]);
+                    return dayKey ? !!selectedMap[dayKey] : false;
+                }));
+            }));
+            return filteredRows;
+        };
+        /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.parseDateValue = /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            if (!value) {
+                return null;
+            }
+            if (value instanceof Date) {
+                return value;
+            }
+            /** @type {?} */
+            var parsed = moment(value, [
+                "YYYY-MM-DD",
+                "MM/DD/YYYY",
+                "DD/MM/YYYY",
+                "YYYY/MM/DD",
+                "DD-MMM-YYYY",
+                "MMM DD, YYYY",
+                moment.ISO_8601,
+            ], true);
+            if (parsed.isValid()) {
+                return parsed.toDate();
+            }
+            /** @type {?} */
+            var fallback = new Date(value);
+            return isNaN(fallback.getTime()) ? null : fallback;
+        };
+        /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.getOrCreateExpandState = /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        function (field) {
+            if (!this.expandStateByField[field]) {
+                this.expandStateByField[field] = { years: {}, months: {} };
+            }
+            return this.expandStateByField[field];
+        };
+        /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.getFieldDaySelectionMap = /**
+         * @private
+         * @param {?} field
+         * @return {?}
+         */
+        function (field) {
+            if (!this.workingSelectedByField[field]) {
+                this.workingSelectedByField[field] = {};
+            }
+            return this.workingSelectedByField[field];
+        };
+        /**
+         * @private
+         * @param {?} year
+         * @param {?} month
+         * @param {?} day
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.toDayKey = /**
+         * @private
+         * @param {?} year
+         * @param {?} month
+         * @param {?} day
+         * @return {?}
+         */
+        function (year, month, day) {
+            return year + "-" + this.pad2(month) + "-" + this.pad2(day);
+        };
+        /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.pad2 = /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            return value < 10 ? "0" + value : String(value);
+        };
+        /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.getDayKeyByRowValue = /**
+         * @private
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            /** @type {?} */
+            var date = this.parseDateValue(value);
+            if (!date) {
+                return "";
+            }
+            return this.toDayKey(date.getFullYear(), date.getMonth() + 1, date.getDate());
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.getEnabledDayKeysInCurrentField = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var keys = [];
+            this.years.forEach((/**
+             * @param {?} yearNode
+             * @return {?}
+             */
+            function (yearNode) {
+                yearNode.months.forEach((/**
+                 * @param {?} monthNode
+                 * @return {?}
+                 */
+                function (monthNode) {
+                    monthNode.days.forEach((/**
+                     * @param {?} dayNode
+                     * @return {?}
+                     */
+                    function (dayNode) {
+                        if (!dayNode.disabled) {
+                            keys.push(dayNode.key);
+                        }
+                    }));
+                }));
+            }));
+            return keys;
+        };
+        /**
+         * @private
+         * @param {?} source
+         * @return {?}
+         */
+        DateTreeFilterPopoverComponent.prototype.cloneSelectionMap = /**
+         * @private
+         * @param {?} source
+         * @return {?}
+         */
+        function (source) {
+            try {
+                return source ? JSON.parse(JSON.stringify(source)) : {};
+            }
+            catch (e) {
+                return {};
+            }
+        };
+        DateTreeFilterPopoverComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: "rs-date-tree-filter-popover",
+                        template: "<div class=\"date-tree-filter-popover\">\r\n    <div class=\"popover-search\">\r\n        <span class=\"search-icon\"><img src=\"/assets/img/search.svg\" alt=\"\" /></span>\r\n        <input\r\n            type=\"text\"\r\n            [placeholder]=\"translation.SEARCH || '.SEARCH'\"\r\n            [value]=\"keyword\"\r\n            (input)=\"onKeywordChange($event.target.value)\"\r\n        />\r\n    </div>\r\n\r\n    <div class=\"popover-tree\">\r\n        <label class=\"tree-row all-row\">\r\n            <input\r\n                type=\"checkbox\"\r\n                [checked]=\"isAllChecked()\"\r\n                [indeterminate]=\"isAllIndeterminate()\"\r\n                (change)=\"toggleAllDays($event.target.checked)\"\r\n            />\r\n            <span class=\"row-label\">{{ translation.ALL || '.ALL' }}</span>\r\n        </label>\r\n\r\n        <div class=\"year-block\" *ngFor=\"let yearNode of getVisibleYears()\">\r\n            <div class=\"tree-row\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"tree-toggle-btn\"\r\n                    (click)=\"toggleYearExpanded(yearNode); $event.stopPropagation()\"\r\n                >\r\n                    <span class=\"tree-arrow\" [ngClass]=\"{ expanded: yearNode.expanded }\"></span>\r\n                </button>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    [disabled]=\"isYearDisabled(yearNode)\"\r\n                    [checked]=\"isYearChecked(yearNode)\"\r\n                    [indeterminate]=\"isYearIndeterminate(yearNode)\"\r\n                    (change)=\"toggleYear(yearNode, $event.target.checked)\"\r\n                />\r\n                <span class=\"row-label\">{{ yearNode.year }}</span>\r\n            </div>\r\n\r\n            <div class=\"month-block\" *ngIf=\"yearNode.expanded\">\r\n                <div class=\"month-item\" *ngFor=\"let monthNode of yearNode.months\">\r\n                    <div class=\"tree-row\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"tree-toggle-btn\"\r\n                            (click)=\"toggleMonthExpanded(monthNode); $event.stopPropagation()\"\r\n                        >\r\n                            <span class=\"tree-arrow\" [ngClass]=\"{ expanded: monthNode.expanded }\"></span>\r\n                        </button>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            [disabled]=\"isMonthDisabled(monthNode)\"\r\n                            [checked]=\"isMonthChecked(monthNode)\"\r\n                            [indeterminate]=\"isMonthIndeterminate(monthNode)\"\r\n                            (change)=\"toggleMonth(monthNode, $event.target.checked)\"\r\n                        />\r\n                        <span class=\"row-label\">{{ monthNode.label }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"day-block\" *ngIf=\"monthNode.expanded\">\r\n                        <label\r\n                            class=\"tree-row day-row\"\r\n                            *ngFor=\"let dayNode of monthNode.days\"\r\n                            [ngClass]=\"{ disabled: dayNode.disabled }\"\r\n                        >\r\n                            <span class=\"tree-toggle-spacer\"></span>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                [disabled]=\"dayNode.disabled\"\r\n                                [checked]=\"isDayChecked(dayNode)\"\r\n                                (change)=\"toggleDay(dayNode, $event.target.checked)\"\r\n                            />\r\n                            <span class=\"row-label\">{{ dayNode.label }}</span>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"popover-footer\">\r\n        <button type=\"button\" (click)=\"clearSelection()\">\r\n            {{ translation.CLEAR || '.CLEAR' }}\r\n        </button>\r\n        <button type=\"button\" class=\"primary-btn\" (click)=\"applySelection()\">\r\n            {{ translation.APPLY || '.APPLY' }}\r\n        </button>\r\n    </div>\r\n</div>\r\n",
+                        styles: [":host{position:fixed;left:12px;top:12px;z-index:20;width:300px}.date-tree-filter-popover{background:#fff;border:1px solid #eaedf0;border-radius:10px;box-shadow:0 0 4px rgba(0,0,0,.25);padding:4px 8px;display:flex;flex-direction:column;color:#44566c;font-family:Arial}.popover-search{position:relative;padding:4px 0 8px}.popover-search .search-icon{position:absolute;left:10px;top:10px;color:#929dab;font-size:12px;line-height:12px}.popover-search input{width:100%;height:28px;border:1px solid #eaedf0;border-radius:16px;padding:0 10px 0 28px;outline:0;font-size:12px;color:#44566c}.popover-tree{max-height:320px;overflow:auto;padding-right:2px}.tree-row{display:flex;align-items:center;min-height:24px;font-size:11px;line-height:14px;color:#44566c}.tree-row input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;margin:0 6px 0 0;box-sizing:border-box;border:1px solid #d8d8d8;border-radius:3px;background-color:#fff;cursor:pointer;vertical-align:middle;flex-shrink:0}.tree-row input[type=checkbox]:checked{border-color:#1f7bff;background-color:#1f7bff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M0.5 4.31818L3 7.5L5.75 4L8.5 0.5' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:9px 9px}.tree-row input[type=checkbox]:indeterminate{border-color:#1f7bff;background-color:#1f7bff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M1.5 4.5H7.5' stroke='white' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:9px 9px}.tree-row input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.all-row{padding-left:20px;margin-bottom:2px}.year-block{margin-bottom:2px}.month-block{padding-left:20px}.day-block{padding-left:24px}.tree-toggle-btn{width:16px;height:16px;padding:0;margin-right:4px;border:none;background:0 0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.tree-arrow{display:inline-block;width:6px;height:6px;border-right:1px solid #6c7c90;border-bottom:1px solid #6c7c90;transform:rotate(-45deg);transition:transform .15s}.tree-arrow.expanded{transform:rotate(45deg)}.tree-toggle-spacer{width:20px;display:inline-block}.row-label{color:#44566c}.day-row.disabled .row-label{color:#adb5bd}.popover-footer{margin-top:8px;padding:12px 0 8px;border-top:1px solid #eaedf0;display:flex;justify-content:flex-end;gap:12px}.popover-footer button{min-width:56px;height:26px;padding:0 8px;border-radius:4px;border:1px solid #dbe1e7;background:#fff;font-size:11px;color:#44566c;cursor:pointer}.popover-footer .primary-btn{background:#1364b3;border-color:#1364b3;color:#fff}"]
+                    }] }
+        ];
+        DateTreeFilterPopoverComponent.propDecorators = {
+            field: [{ type: core.Input }],
+            translation: [{ type: core.Input }],
+            sourceRows: [{ type: core.Input }],
+            dateFields: [{ type: core.Input }],
+            selectedByField: [{ type: core.Input }],
+            fieldLabelMap: [{ type: core.Input }],
+            apply: [{ type: core.Output }],
+            close: [{ type: core.Output }]
+        };
+        return DateTreeFilterPopoverComponent;
+    }());
+    if (false) {
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.field;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.translation;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.sourceRows;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.dateFields;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.selectedByField;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.fieldLabelMap;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.apply;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.close;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.keyword;
+        /** @type {?} */
+        DateTreeFilterPopoverComponent.prototype.years;
+        /**
+         * @type {?}
+         * @private
+         */
+        DateTreeFilterPopoverComponent.prototype.expandStateByField;
+        /**
+         * @type {?}
+         * @private
+         */
+        DateTreeFilterPopoverComponent.prototype.workingSelectedByField;
+    }
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/float-box/index.component.ts
@@ -54005,6 +55924,7 @@
                             CommonGridComponent,
                             GridActionComponent,
                             GridActionItemComponent,
+                            DateTreeFilterPopoverComponent,
                             FloatBoxComponent,
                             RsPageListComponent,
                             RsPageTabComponent,
@@ -54191,6 +56111,7 @@
                             CommonGridComponent,
                             GridActionComponent,
                             GridActionItemComponent,
+                            DateTreeFilterPopoverComponent,
                             FloatBoxComponent,
                             RsPageListComponent,
                             RsPageTabComponent,
@@ -54250,6 +56171,9 @@
     exports.CommonDialogComponent = CommonDialogComponent;
     exports.CommonFunctionService = CommonFunctionService;
     exports.CommonGridComponent = CommonGridComponent;
+    exports.DATE_TREE_DEFAULT_DATE_FORMATS = DATE_TREE_DEFAULT_DATE_FORMATS;
+    exports.DateTreeFilterHelper = DateTreeFilterHelper;
+    exports.DateTreeFilterPopoverComponent = DateTreeFilterPopoverComponent;
     exports.DefaultDrawerConfig = DefaultDrawerConfig;
     exports.DialogService = DialogService;
     exports.DrawerComponent = DrawerComponent;
@@ -54288,6 +56212,7 @@
     exports.ToolbarItemComponent = ToolbarItemComponent;
     exports.TranslationService = TranslationService;
     exports.TruncatedTextToggleComponent = TruncatedTextToggleComponent;
+    exports.createRsCommonGridDateTreeHelper = createRsCommonGridDateTreeHelper;
     exports.filterShowSection = filterShowSection;
     exports.ɵa = Debounce;
     exports.ɵb = DashboardService;