@dev-tcloud/tcloud-ui 0.0.45 → 0.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.mjs +62 -11
- package/esm2020/lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component.mjs +21 -3
- package/esm2020/lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component.mjs +21 -3
- package/esm2020/lib/_services/search-in-object.service.mjs +14 -10
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +115 -24
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +113 -22
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.d.ts +11 -3
- package/lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component.d.ts +3 -0
- package/lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1052,14 +1052,32 @@ class TCloudUiMultiSelectComponent {
|
|
|
1052
1052
|
}
|
|
1053
1053
|
return null;
|
|
1054
1054
|
}
|
|
1055
|
+
item_width(text) {
|
|
1056
|
+
const value = `${text}`;
|
|
1057
|
+
const value_len = (value).length;
|
|
1058
|
+
let max_width = 155;
|
|
1059
|
+
if (value_len < 15) {
|
|
1060
|
+
max_width = 138;
|
|
1061
|
+
}
|
|
1062
|
+
if (value_len < 10) {
|
|
1063
|
+
max_width = 105;
|
|
1064
|
+
}
|
|
1065
|
+
if (value_len < 8) {
|
|
1066
|
+
max_width = 85;
|
|
1067
|
+
}
|
|
1068
|
+
if (value_len < 5) {
|
|
1069
|
+
max_width = 70;
|
|
1070
|
+
}
|
|
1071
|
+
return { 'max-width': max_width + 'px' };
|
|
1072
|
+
}
|
|
1055
1073
|
ngOnDestroy() {
|
|
1056
1074
|
}
|
|
1057
1075
|
}
|
|
1058
1076
|
TCloudUiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1059
|
-
TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\r\n <div>\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:
|
|
1077
|
+
TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\r\n <div>\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1060
1078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
|
|
1061
1079
|
type: Component,
|
|
1062
|
-
args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], template: "\r\n <div>\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:
|
|
1080
|
+
args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], template: "\r\n <div>\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
|
|
1063
1081
|
}], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
|
|
1064
1082
|
type: Input
|
|
1065
1083
|
}], placeholder: [{
|
|
@@ -1721,14 +1739,32 @@ class TCloudUiMultiInputComponent {
|
|
|
1721
1739
|
}
|
|
1722
1740
|
return null;
|
|
1723
1741
|
}
|
|
1742
|
+
item_width(text) {
|
|
1743
|
+
const value = `${text}`;
|
|
1744
|
+
const value_len = (value).length;
|
|
1745
|
+
let max_width = 155;
|
|
1746
|
+
if (value_len < 15) {
|
|
1747
|
+
max_width = 138;
|
|
1748
|
+
}
|
|
1749
|
+
if (value_len < 10) {
|
|
1750
|
+
max_width = 105;
|
|
1751
|
+
}
|
|
1752
|
+
if (value_len < 8) {
|
|
1753
|
+
max_width = 85;
|
|
1754
|
+
}
|
|
1755
|
+
if (value_len < 5) {
|
|
1756
|
+
max_width = 70;
|
|
1757
|
+
}
|
|
1758
|
+
return { 'max-width': max_width + 'px' };
|
|
1759
|
+
}
|
|
1724
1760
|
ngOnDestroy() {
|
|
1725
1761
|
}
|
|
1726
1762
|
}
|
|
1727
1763
|
TCloudUiMultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1728
|
-
TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n <table>\n <tr>\n <td>\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n </td>\n <td>\n <button\n [disabled]=\"!item_value || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value);onChangeTouched()\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\">\n <div class=\"box-value\" [title]=\"item.value\">\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n \n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:
|
|
1764
|
+
TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n <table>\n <tr>\n <td>\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n </td>\n <td>\n <button\n [disabled]=\"!item_value || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value);onChangeTouched()\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\n <div class=\"box-value\" [title]=\"item.value\" >\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n \n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1729
1765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
|
|
1730
1766
|
type: Component,
|
|
1731
|
-
args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n <table>\n <tr>\n <td>\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n </td>\n <td>\n <button\n [disabled]=\"!item_value || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value);onChangeTouched()\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\">\n <div class=\"box-value\" [title]=\"item.value\">\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n \n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:
|
|
1767
|
+
args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n <table>\n <tr>\n <td>\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n </td>\n <td>\n <button\n [disabled]=\"!item_value || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value);onChangeTouched()\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\n <div class=\"box-value\" [title]=\"item.value\" >\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n \n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
|
|
1732
1768
|
}], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
|
|
1733
1769
|
type: Input
|
|
1734
1770
|
}], placeholder: [{
|
|
@@ -2029,13 +2065,15 @@ class TCloudUiSearchInObjectService {
|
|
|
2029
2065
|
this.statusinfo = statusinfo;
|
|
2030
2066
|
}
|
|
2031
2067
|
isADate(d) {
|
|
2032
|
-
if (
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2068
|
+
if (d && d instanceof Date && !isNaN(d.valueOf())) {
|
|
2069
|
+
if (Object.prototype.toString.call(d) === "[object Date]") {
|
|
2070
|
+
;
|
|
2071
|
+
if (isNaN(d.getTime())) {
|
|
2072
|
+
return false;
|
|
2073
|
+
}
|
|
2074
|
+
else {
|
|
2075
|
+
return true;
|
|
2076
|
+
}
|
|
2039
2077
|
}
|
|
2040
2078
|
}
|
|
2041
2079
|
return false;
|
|
@@ -2064,11 +2102,13 @@ class TCloudUiSearchInObjectService {
|
|
|
2064
2102
|
if (camposDebusca.length < 1) {
|
|
2065
2103
|
return emObject;
|
|
2066
2104
|
}
|
|
2105
|
+
let isObject = false;
|
|
2067
2106
|
valor = this.normalize(valor);
|
|
2068
2107
|
var result = [];
|
|
2069
2108
|
for (const key in emObject) {
|
|
2070
2109
|
var oObject = emObject[key];
|
|
2071
|
-
if (oObject) {
|
|
2110
|
+
if (oObject && (typeof oObject === 'object')) {
|
|
2111
|
+
isObject = true;
|
|
2072
2112
|
for (const objectvalue of camposDebusca) {
|
|
2073
2113
|
const dt = new Date(oObject[objectvalue]);
|
|
2074
2114
|
if (this.isADate(dt) && typeof ((dt).getMonth) === 'function') {
|
|
@@ -2090,7 +2130,7 @@ class TCloudUiSearchInObjectService {
|
|
|
2090
2130
|
}
|
|
2091
2131
|
}
|
|
2092
2132
|
}
|
|
2093
|
-
if (emObject && typeof emObject === 'object' && Array.isArray(emObject)) {
|
|
2133
|
+
if (emObject && typeof emObject === 'object' && Array.isArray(emObject) && !isObject) {
|
|
2094
2134
|
// is array
|
|
2095
2135
|
const v = this.normalize(`${valor}`);
|
|
2096
2136
|
for (let i = 0; i < (emObject).length; i++) {
|
|
@@ -2779,9 +2819,12 @@ class TCloudUiFiltersComponent {
|
|
|
2779
2819
|
this.datepipe = datepipe;
|
|
2780
2820
|
this.inputs = [];
|
|
2781
2821
|
this.show_filters = false;
|
|
2822
|
+
this.useOnChangeSubmit = true; // useOnChangeSubmit - Submit automatico quando for alterado quanquer input
|
|
2823
|
+
this.useButtonSubmit = false; // useButtonSubmit - Exibe um botão de submit e não executa a busca automaticamente
|
|
2782
2824
|
this.result = new EventEmitter();
|
|
2783
2825
|
this.onFilter = new EventEmitter();
|
|
2784
2826
|
this.onChange = new EventEmitter();
|
|
2827
|
+
this.onSubmit = new EventEmitter();
|
|
2785
2828
|
}
|
|
2786
2829
|
set data(data) {
|
|
2787
2830
|
// this._data = JSON.parse(JSON.stringify(data));
|
|
@@ -2793,6 +2836,9 @@ class TCloudUiFiltersComponent {
|
|
|
2793
2836
|
get filters() { return this._filters; }
|
|
2794
2837
|
ngOnInit() {
|
|
2795
2838
|
}
|
|
2839
|
+
ngAfterViewInit() {
|
|
2840
|
+
// child is set
|
|
2841
|
+
}
|
|
2796
2842
|
ngOnChanges(changes) {
|
|
2797
2843
|
if (changes && changes['data']) {
|
|
2798
2844
|
const data = changes['data'].currentValue;
|
|
@@ -2820,12 +2866,43 @@ class TCloudUiFiltersComponent {
|
|
|
2820
2866
|
});
|
|
2821
2867
|
}
|
|
2822
2868
|
// this.toResult();
|
|
2869
|
+
if (!this.useOnChangeSubmit) {
|
|
2870
|
+
this.result.emit(this.data);
|
|
2871
|
+
}
|
|
2872
|
+
this.start_filter();
|
|
2823
2873
|
}
|
|
2824
2874
|
}
|
|
2825
2875
|
normalize(text) {
|
|
2826
2876
|
const v = (((`${text}`).normalize('NFD').replace(/[\u0300-\u036f]/g, "")).trim()).toLowerCase();
|
|
2827
2877
|
return v;
|
|
2828
2878
|
}
|
|
2879
|
+
toSubmit() {
|
|
2880
|
+
if (this.filters && (this.filters).length > 0) {
|
|
2881
|
+
this.init();
|
|
2882
|
+
}
|
|
2883
|
+
this.emitSubmitFilters();
|
|
2884
|
+
}
|
|
2885
|
+
emitSubmitFilters() {
|
|
2886
|
+
let filters = JSON.parse(JSON.stringify(this.filters));
|
|
2887
|
+
if (filters && (filters).length > 0) {
|
|
2888
|
+
(filters).forEach((filter, i) => {
|
|
2889
|
+
if (filter.width) {
|
|
2890
|
+
delete (filters[i].width);
|
|
2891
|
+
}
|
|
2892
|
+
if (filter.placeholder) {
|
|
2893
|
+
delete (filters[i].placeholder);
|
|
2894
|
+
}
|
|
2895
|
+
if (filter.description) {
|
|
2896
|
+
delete (filters[i].description);
|
|
2897
|
+
}
|
|
2898
|
+
if ((!filter.searchText || filter.searchText && filter.searchText === '') && filter.type !== "boolean") {
|
|
2899
|
+
delete (filters[i]);
|
|
2900
|
+
}
|
|
2901
|
+
});
|
|
2902
|
+
}
|
|
2903
|
+
// console.log('toSubmit filters', filters);
|
|
2904
|
+
this.onSubmit.emit(filters);
|
|
2905
|
+
}
|
|
2829
2906
|
collectionFind(obj, path) {
|
|
2830
2907
|
const pathArray = path.split(".");
|
|
2831
2908
|
let current = obj;
|
|
@@ -2868,12 +2945,7 @@ class TCloudUiFiltersComponent {
|
|
|
2868
2945
|
}
|
|
2869
2946
|
return current;
|
|
2870
2947
|
}
|
|
2871
|
-
addHours(date, h) {
|
|
2872
|
-
date.setTime(date.getTime() + (h * 60 * 60 * 1000));
|
|
2873
|
-
return date;
|
|
2874
|
-
}
|
|
2875
2948
|
searchIn(item, event) {
|
|
2876
|
-
console.log('searchIn event', event?.target?.valueAsDate);
|
|
2877
2949
|
if (event !== undefined) {
|
|
2878
2950
|
if (typeof event === 'boolean') {
|
|
2879
2951
|
item.searchText = event;
|
|
@@ -2888,12 +2960,22 @@ class TCloudUiFiltersComponent {
|
|
|
2888
2960
|
item.searchText = event?.target?.valueAsDate;
|
|
2889
2961
|
}
|
|
2890
2962
|
else {
|
|
2891
|
-
|
|
2963
|
+
if (event?.target?.value) {
|
|
2964
|
+
item.searchText = (event.target.value).toUpperCase();
|
|
2965
|
+
}
|
|
2892
2966
|
}
|
|
2893
2967
|
this.onChange.emit(true);
|
|
2894
2968
|
}
|
|
2895
2969
|
}
|
|
2896
2970
|
}
|
|
2971
|
+
if (this.useOnChangeSubmit) {
|
|
2972
|
+
this.start_filter();
|
|
2973
|
+
}
|
|
2974
|
+
if (!this.useButtonSubmit) {
|
|
2975
|
+
this.emitSubmitFilters();
|
|
2976
|
+
}
|
|
2977
|
+
}
|
|
2978
|
+
start_filter() {
|
|
2897
2979
|
for (let i = 0; i < (this.data).length; i++) {
|
|
2898
2980
|
// this.data[i]['tc_filter_accept'] = true;
|
|
2899
2981
|
this.setDataIndex(i, true);
|
|
@@ -3034,20 +3116,29 @@ class TCloudUiFiltersComponent {
|
|
|
3034
3116
|
}
|
|
3035
3117
|
}
|
|
3036
3118
|
TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
3037
|
-
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> {{ 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> {{ 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> {{ 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"] }] });
|
|
3119
|
+
TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], 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> {{ 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> {{ 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> {{ 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\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn btn-new-grey\" (click)=\"toSubmit()\" >Filtrar <i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\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"] }] });
|
|
3038
3120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3039
3121
|
type: Component,
|
|
3040
|
-
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> {{ 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> {{ 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> {{ 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"] }]
|
|
3041
|
-
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: {
|
|
3122
|
+
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> {{ 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> {{ 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> {{ 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\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn btn-new-grey\" (click)=\"toSubmit()\" >Filtrar <i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\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"] }]
|
|
3123
|
+
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
|
|
3124
|
+
type: ViewChild,
|
|
3125
|
+
args: ['_formulario']
|
|
3126
|
+
}], data: [{
|
|
3042
3127
|
type: Input
|
|
3043
3128
|
}], filters: [{
|
|
3044
3129
|
type: Input
|
|
3130
|
+
}], useOnChangeSubmit: [{
|
|
3131
|
+
type: Input
|
|
3132
|
+
}], useButtonSubmit: [{
|
|
3133
|
+
type: Input
|
|
3045
3134
|
}], result: [{
|
|
3046
3135
|
type: Output
|
|
3047
3136
|
}], onFilter: [{
|
|
3048
3137
|
type: Output
|
|
3049
3138
|
}], onChange: [{
|
|
3050
3139
|
type: Output
|
|
3140
|
+
}], onSubmit: [{
|
|
3141
|
+
type: Output
|
|
3051
3142
|
}] } });
|
|
3052
3143
|
|
|
3053
3144
|
class TCloudUiFiltersModule {
|