@dev-tcloud/tcloud-ui 0.0.31 → 0.0.33

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

@@ -1266,6 +1266,7 @@ class TCloudUiDataListComponent {
             }
         }
         if (this.selected_item === undefined || this.selected_item === null || this.selected_item === '') {
+            this.selected_description = '';
             this.toChange();
         }
     }
@@ -2746,6 +2747,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class TCloudUiFiltersComponent {
+    constructor() {
+        this.inputs = [];
+        this.show_filters = false;
+        this.result = new EventEmitter();
+    }
+    set data(data) {
+        //this._data = data;
+    }
+    get data() { return this._data; }
+    set filters(filters) {
+        //this._filters = filters;
+    }
+    get filters() { return this._filters; }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        const data = changes['data'].currentValue;
+        if (this._data !== data) {
+            this._data = JSON.parse(JSON.stringify(data));
+            this.search_data = JSON.parse(JSON.stringify(data));
+            this.init();
+        }
+        const filters = changes['filters'].currentValue;
+        if (this._filters !== filters) {
+            this._filters = JSON.parse(JSON.stringify(filters));
+            this.init();
+        }
+    }
+    init() {
+        if (this.data && this.filters) {
+            this.show_filters = true;
+            this.toResult();
+        }
+    }
+    normalize(text) {
+        const v = (((`${text}`).normalize('NFD').replace(/[\u0300-\u036f]/g, "")).trim()).toLowerCase();
+        return v;
+    }
+    fetchFromObject(obj, prop) {
+        if (typeof obj === 'undefined') {
+            return false;
+        }
+        var _index = `${prop}`.indexOf('.');
+        if (_index > -1) {
+            return this.fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
+        }
+        return obj[prop];
+    }
+    searchIn(item, event) {
+        if (typeof event === 'boolean') {
+            item.searchText = event;
+        }
+        else {
+            if (event === null) {
+                item.searchText = '';
+            }
+            else {
+                item.searchText = (event.target.value).toUpperCase();
+            }
+        }
+        for (let i = 0; i < (this.data).length; i++) {
+            this.data[i]['tc_filter_accept'] = 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 !== '') {
+                    filter_item.searchText = this.normalize(filter_item.searchText);
+                    let item_value = this.fetchFromObject(this.data[i], filter_item.searchIn);
+                    if (item_value) {
+                        item_value = this.normalize(item_value);
+                        if (!(item_value.includes(filter_item.searchText) || item_value === filter_item.searchText)) {
+                            this.data[i]['tc_filter_accept'] = false;
+                        }
+                    }
+                }
+                if (typeof (filter_item.searchText) === 'boolean') {
+                    let item_value = this.fetchFromObject(this.data[i], filter_item.searchIn);
+                    if (filter_item.searchText) {
+                        if (!(item_value === filter_item.searchText)) {
+                            this.data[i]['tc_filter_accept'] = false;
+                        }
+                    }
+                }
+            }
+        }
+        this.toResult();
+    }
+    toResult() {
+        const search_data = [];
+        let is_filter = false;
+        for (let i = 0; i < (this.filters).length; i++) {
+            if (this.filters[i].searchText && this.filters[i].searchText !== '') {
+                is_filter = true;
+            }
+        }
+        if (is_filter) {
+            for (let i = 0; i < (this.data).length; i++) {
+                if (this.data[i]?.['tc_filter_accept']) {
+                    (search_data).push(this.data[i]);
+                }
+            }
+            this.result.emit(search_data);
+            return;
+        }
+        this.result.emit(this.data);
+    }
+}
+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                <div><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=\"text\" \n                        class=\"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            </div>\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><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=\"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;max-width:400px;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}\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"] }] });
+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                <div><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=\"text\" \n                        class=\"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            </div>\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><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=\"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;max-width:400px;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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], result: [{
+                type: Output
+            }] } });
+
+class TCloudUiFiltersModule {
+}
+TCloudUiFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, declarations: [TCloudUiFiltersComponent], imports: [CommonModule,
+        FormsModule], exports: [TCloudUiFiltersComponent] });
+TCloudUiFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, imports: [CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiFiltersComponent
+                    ],
+                    exports: [
+                        TCloudUiFiltersComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule
+                    ]
+                }]
+        }] });
+
 class TCloudUiModule {
 }
 TCloudUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2762,6 +2906,7 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiTableModule,
         TCloudUiNumberStepModule,
         TCloudUiScrollBoxModule,
+        TCloudUiFiltersModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2778,6 +2923,7 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiTableModule,
         TCloudUiNumberStepModule,
         TCloudUiScrollBoxModule,
+        TCloudUiFiltersModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2798,6 +2944,7 @@ TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         TCloudUiTableModule,
         TCloudUiNumberStepModule,
         TCloudUiScrollBoxModule,
+        TCloudUiFiltersModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2814,6 +2961,7 @@ TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         TCloudUiTableModule,
         TCloudUiNumberStepModule,
         TCloudUiScrollBoxModule,
+        TCloudUiFiltersModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2835,6 +2983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiTableModule,
                         TCloudUiNumberStepModule,
                         TCloudUiScrollBoxModule,
+                        TCloudUiFiltersModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
@@ -2854,6 +3003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiTableModule,
                         TCloudUiNumberStepModule,
                         TCloudUiScrollBoxModule,
+                        TCloudUiFiltersModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
@@ -2874,5 +3024,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * 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, TCloudUiAlignDirective, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, 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, 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