@dev-tcloud/tcloud-ui 0.0.42 → 0.0.44

package/fesm2020/dev-tcloud-tcloud-ui.mjs

@@ -407,10 +407,10 @@ class TCloudUiTabHeadComponent {
     }
 }
 TCloudUiTabHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] });
+TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] }]
+            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { background: [{
                 type: Input
             }] } });
@@ -2757,11 +2757,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+var TCFiltersType;
+(function (TCFiltersType) {
+    TCFiltersType["text"] = "text";
+    TCFiltersType["number"] = "number";
+    TCFiltersType["select"] = "select";
+    TCFiltersType["boolean"] = "boolean";
+    TCFiltersType["datetime"] = "datetime-local";
+})(TCFiltersType || (TCFiltersType = {}));
+var TCCondition;
+(function (TCCondition) {
+    TCCondition["equal"] = "equal";
+    TCCondition["gte"] = "gte";
+    TCCondition["lte"] = "lte";
+    TCCondition["lt"] = "lt";
+    TCCondition["gt"] = "gt";
+})(TCCondition || (TCCondition = {}));
+
 class TCloudUiFiltersComponent {
-    constructor() {
+    constructor(datepipe) {
+        this.datepipe = datepipe;
         this.inputs = [];
         this.show_filters = false;
         this.result = new EventEmitter();
+        this.onFilter = new EventEmitter();
+        this.onChange = new EventEmitter();
     }
     set data(data) {
         // this._data = JSON.parse(JSON.stringify(data));
@@ -2848,17 +2868,29 @@ class TCloudUiFiltersComponent {
         }
         return current;
     }
+    addHours(date, h) {
+        date.setTime(date.getTime() + (h * 60 * 60 * 1000));
+        return date;
+    }
     searchIn(item, event) {
+        console.log('searchIn event', event?.target?.valueAsDate);
         if (event !== undefined) {
             if (typeof event === 'boolean') {
                 item.searchText = event;
+                this.onChange.emit(true);
             }
             else {
                 if (event === null) {
                     item.searchText = '';
                 }
                 else {
-                    item.searchText = (event.target.value).toUpperCase();
+                    if (event?.target?.valueAsDate) {
+                        item.searchText = event?.target?.valueAsDate;
+                    }
+                    else {
+                        item.searchText = (event.target.value).toUpperCase();
+                    }
+                    this.onChange.emit(true);
                 }
             }
         }
@@ -2867,7 +2899,7 @@ class TCloudUiFiltersComponent {
             this.setDataIndex(i, true);
             for (let j = 0; j < (this.filters).length; j++) {
                 const filter_item = this.filters[j];
-                if (filter_item.searchText && typeof (filter_item.searchText) === 'string' && filter_item.searchText !== '') {
+                if (filter_item.searchText && typeof (filter_item.searchText) === 'string' && filter_item.searchText !== '' && filter_item.type !== TCFiltersType.number) {
                     filter_item.searchText = this.normalize(filter_item.searchText);
                     let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
                     if (item_value) {
@@ -2880,6 +2912,79 @@ class TCloudUiFiltersComponent {
                         this.setDataIndex(i, false);
                     }
                 }
+                if (filter_item.searchText && filter_item.searchText instanceof Date && !isNaN(filter_item.searchText.valueOf()) && filter_item.type === TCFiltersType.datetime) {
+                    let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
+                    try {
+                        item_value = new Date(item_value);
+                    }
+                    catch (error) { }
+                    if (item_value && item_value instanceof Date && !isNaN(item_value.valueOf())) {
+                        let is_accept = false;
+                        const dt_target = (filter_item.searchText).getTime() + (3 * 60 * 60 * 1000);
+                        const dt_current = (item_value).getTime();
+                        if (filter_item.condition) {
+                            switch (filter_item.condition) {
+                                case TCCondition.gt:
+                                    is_accept = !(+(dt_target) > +(dt_current));
+                                    break;
+                                case TCCondition.lt:
+                                    is_accept = !(+(dt_target) < +(dt_current));
+                                    break;
+                                case TCCondition.gte:
+                                    is_accept = !(+(dt_target) >= +(dt_current));
+                                    break;
+                                case TCCondition.lte:
+                                    is_accept = !(+(dt_target) <= +(dt_current));
+                                    break;
+                                case TCCondition.equal:
+                                    is_accept = !(+(dt_target) === +(dt_current));
+                                    break;
+                                default: is_accept = !(+(dt_target) == +(dt_current));
+                            }
+                        }
+                        else {
+                            is_accept = !(+(filter_item.searchText) === +(item_value));
+                        }
+                        if (!is_accept) {
+                            this.setDataIndex(i, false);
+                        }
+                    }
+                }
+                if (filter_item.searchText && typeof +(filter_item.searchText) === 'number' && filter_item.type === TCFiltersType.number) {
+                    let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
+                    if (typeof +(item_value) === 'number') {
+                        let is_accept = false;
+                        if (filter_item.condition) {
+                            console.log('filter_item.condition', filter_item.condition);
+                            console.log('filter_item.searchText', +(filter_item.searchText));
+                            console.log('item_value', +(item_value));
+                            switch (filter_item.condition) {
+                                case TCCondition.gt:
+                                    is_accept = !(+(filter_item.searchText) > +(item_value));
+                                    break;
+                                case TCCondition.lt:
+                                    is_accept = !(+(filter_item.searchText) < +(item_value));
+                                    break;
+                                case TCCondition.gte:
+                                    is_accept = !(+(filter_item.searchText) - 0.1 >= +(item_value));
+                                    break;
+                                case TCCondition.lte:
+                                    is_accept = !(+(filter_item.searchText) + 0.1 <= +(item_value));
+                                    break;
+                                case TCCondition.equal:
+                                    is_accept = !(+(filter_item.searchText) === +(item_value));
+                                    break;
+                                default: is_accept = !(+(filter_item.searchText) == +(item_value));
+                            }
+                        }
+                        else {
+                            is_accept = !(+(filter_item.searchText) === +(item_value));
+                        }
+                        if (!is_accept) {
+                            this.setDataIndex(i, false);
+                        }
+                    }
+                }
                 if (typeof (filter_item.searchText) === 'boolean' && filter_item.searchText) {
                     let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
                     if (item_value && (item_value).length > 0) {
@@ -2901,7 +3006,7 @@ class TCloudUiFiltersComponent {
                     }
                 }
             }
-        }
+        } // end for
         this.toResult();
     }
     toResult() {
@@ -2919,9 +3024,11 @@ class TCloudUiFiltersComponent {
                 }
             }
             this.result.emit(search_data);
+            this.onFilter.emit({ ...this.filters });
             return;
         }
         this.result.emit(this.data);
+        this.onFilter.emit({ ...this.filters });
     }
     setDataIndex(index, value) {
         if (this.data && this.data[index]) {
@@ -2929,17 +3036,21 @@ class TCloudUiFiltersComponent {
         }
     }
 }
-TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters" }, outputs: { result: "result" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                \n                <ng-container *ngIf=\"item.type !== 'select'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-block;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                \n                <ng-container *ngIf=\"item.type !== 'select'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-block;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                \n                <ng-container *ngIf=\"item.type !== 'select'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-block;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+            args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                \n                <ng-container *ngIf=\"item.type !== 'select'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-block;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { data: [{
                 type: Input
             }], filters: [{
                 type: Input
             }], result: [{
                 type: Output
+            }], onFilter: [{
+                type: Output
+            }], onChange: [{
+                type: Output
             }] } });
 
 class TCloudUiFiltersModule {
@@ -3036,13 +3147,21 @@ class TCloudUiAccordionComponent {
     }
     get loading() { return this._loading; }
     ngOnInit() {
-        this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
+        this.subscription_01 = this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
             this.loading = loading;
         });
-        this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
+        this.subscription_02 = this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
             this.onAction.emit((show === true) ? 'open' : 'close');
         });
     }
+    ngOnDestroy() {
+        if (this.subscription_01) {
+            this.subscription_01.unsubscribe();
+        }
+        if (this.subscription_02) {
+            this.subscription_02.unsubscribe();
+        }
+    }
 }
 TCloudUiAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
 TCloudUiAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionComponent, selector: "tcloud-ui-accordion", inputs: { disabled: "disabled", show: "show", loading: "loading" }, outputs: { onAction: "onAction" }, providers: [
@@ -3072,32 +3191,45 @@ class TCloudUiAccordionTitleComponent {
     }
     ngOnInit() {
         this.loading = this._tCloudUiAccordionService.getLoading() || false;
-        this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
+        this.subscription_01 = this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
             this.loading = loading;
         });
         this.show = this._tCloudUiAccordionService.getShow() || false;
-        this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
+        this.subscription_02 = this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
             this.show = show;
         });
         this.disabled = this._tCloudUiAccordionService.getDisabled() || false;
-        this._tCloudUiAccordionService.stateDisabled$.subscribe((disabled) => {
+        this.subscription_03 = this._tCloudUiAccordionService.stateDisabled$.subscribe((disabled) => {
             this.disabled = disabled;
         });
     }
     toggle() {
-        console.log('this.disabled', this.disabled);
         if (this.disabled) {
             return;
         }
         this.show = !this.show;
         this._tCloudUiAccordionService.toggle(this.show);
     }
+    toggle_title() {
+        this.toggle();
+    }
+    ngOnDestroy() {
+        if (this.subscription_01) {
+            this.subscription_01.unsubscribe();
+        }
+        if (this.subscription_02) {
+            this.subscription_02.unsubscribe();
+        }
+        if (this.subscription_03) {
+            this.subscription_03.unsubscribe();
+        }
+    }
 }
 TCloudUiAccordionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionTitleComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiAccordionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionTitleComponent, selector: "tcloud-ui-accordion-title", ngImport: i0, template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td style=\"width: 100;\">\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TCloudUiAccordionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionTitleComponent, selector: "tcloud-ui-accordion-title", ngImport: i0, template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}.area-title{width:100;cursor:pointer;color:var(--verde)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-accordion-title', template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td style=\"width: 100;\">\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}\n"] }]
+            args: [{ selector: 'tcloud-ui-accordion-title', template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}.area-title{width:100;cursor:pointer;color:var(--verde)}\n"] }]
         }], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; } });
 
 class TCloudUiAccordionBodyComponent {
@@ -3279,14 +3411,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-var TCFiltersType;
-(function (TCFiltersType) {
-    TCFiltersType["text"] = "text";
-    TCFiltersType["number"] = "number";
-    TCFiltersType["select"] = "select";
-    TCFiltersType["boolean"] = "boolean";
-})(TCFiltersType || (TCFiltersType = {}));
-
 /*
  * Public API Surface of tcloud-ui
  */
@@ -3295,5 +3419,5 @@ var TCFiltersType;
  * Generated bundle index. Do not edit.
  */
 
-export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCFiltersType, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective };
+export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map