@dev-tcloud/tcloud-ui 0.0.72 → 0.0.73
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-data-list/tcloud-ui-data-list.component.mjs +16 -4
- package/esm2020/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.mjs +16 -4
- package/esm2020/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.module.mjs +8 -4
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +94 -69
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +92 -67
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list.component.d.ts +3 -1
- package/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.d.ts +3 -1
- package/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.module.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1185,6 +1185,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1185
1185
|
type: Injectable
|
|
1186
1186
|
}] });
|
|
1187
1187
|
|
|
1188
|
+
class ISelectOptions {
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
class TCloudUiDataListOptionComponent {
|
|
1192
|
+
constructor(dataListService) {
|
|
1193
|
+
this.dataListService = dataListService;
|
|
1194
|
+
this.id = '';
|
|
1195
|
+
this.select_options = new ISelectOptions();
|
|
1196
|
+
this.selected = new EventEmitter();
|
|
1197
|
+
}
|
|
1198
|
+
ngOnInit() {
|
|
1199
|
+
this.actived_value = this.dataListService.getActiveItem();
|
|
1200
|
+
this.subscription_active = this.dataListService.stateActive$.subscribe(v => {
|
|
1201
|
+
this.actived_value = v;
|
|
1202
|
+
});
|
|
1203
|
+
this.id = this.generateID();
|
|
1204
|
+
this.setSelectOptions();
|
|
1205
|
+
}
|
|
1206
|
+
generateID() {
|
|
1207
|
+
return `data-list-option-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
|
|
1208
|
+
}
|
|
1209
|
+
setSelectedItem(value) {
|
|
1210
|
+
var _a;
|
|
1211
|
+
if (value === '') {
|
|
1212
|
+
this.value = '';
|
|
1213
|
+
}
|
|
1214
|
+
this.dataListService.setItemValue(this.value);
|
|
1215
|
+
const description = ((_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.innerText) || '';
|
|
1216
|
+
this.dataListService.setItemDescription(description);
|
|
1217
|
+
this.setSelectOptions();
|
|
1218
|
+
}
|
|
1219
|
+
setSelectOptions() {
|
|
1220
|
+
setTimeout(() => {
|
|
1221
|
+
var _a;
|
|
1222
|
+
try {
|
|
1223
|
+
const description = (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.innerText;
|
|
1224
|
+
this.select_options.value = this.value;
|
|
1225
|
+
this.select_options.description = description;
|
|
1226
|
+
this.dataListService.registerSelectionOptionsDescription(this.select_options);
|
|
1227
|
+
}
|
|
1228
|
+
catch (error) { }
|
|
1229
|
+
});
|
|
1230
|
+
}
|
|
1231
|
+
ngOnDestroy() {
|
|
1232
|
+
if (this.subscription_active) {
|
|
1233
|
+
this.subscription_active.unsubscribe();
|
|
1234
|
+
}
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
TCloudUiDataListOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1238
|
+
TCloudUiDataListOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: { value: "value" }, outputs: { selected: "selected" }, ngImport: i0, template: "<button \r\n [title]=\"select_options.description\"\r\n id=\"{{id}}\"\r\n [attr.data-description]=\"select_options.description\"\r\n [attr.data-actived-value]=\"actived_value\"\r\n class=\"dropdown-item\" \r\n [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n [class.active]=\"value === actived_value\" \r\n type=\"button\" \r\n [value]=\"value\"\r\n (click)=\"setSelectedItem(value)\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] });
|
|
1239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
|
|
1240
|
+
type: Component,
|
|
1241
|
+
args: [{ selector: 'tcloud-ui-data-list-option', template: "<button \r\n [title]=\"select_options.description\"\r\n id=\"{{id}}\"\r\n [attr.data-description]=\"select_options.description\"\r\n [attr.data-actived-value]=\"actived_value\"\r\n class=\"dropdown-item\" \r\n [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n [class.active]=\"value === actived_value\" \r\n type=\"button\" \r\n [value]=\"value\"\r\n (click)=\"setSelectedItem(value)\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] }]
|
|
1242
|
+
}], ctorParameters: function () { return [{ type: DataListService }]; }, propDecorators: { value: [{
|
|
1243
|
+
type: Input
|
|
1244
|
+
}], selected: [{
|
|
1245
|
+
type: Output
|
|
1246
|
+
}] } });
|
|
1247
|
+
|
|
1188
1248
|
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5 = {
|
|
1189
1249
|
provide: NG_VALUE_ACCESSOR,
|
|
1190
1250
|
useExisting: forwardRef(() => TCloudUiDataListComponent),
|
|
@@ -1205,6 +1265,13 @@ class TCloudUiDataListComponent {
|
|
|
1205
1265
|
this._disabled = false;
|
|
1206
1266
|
this._loading = false;
|
|
1207
1267
|
this.search = true;
|
|
1268
|
+
/*
|
|
1269
|
+
this.listItens = [
|
|
1270
|
+
{description: 'Teste1', value: 'teste1'},
|
|
1271
|
+
{description: 'Teste2', value: 'teste2'}
|
|
1272
|
+
]
|
|
1273
|
+
*/
|
|
1274
|
+
this.border = true;
|
|
1208
1275
|
this.onInputChange = new EventEmitter();
|
|
1209
1276
|
this.onChange = new EventEmitter();
|
|
1210
1277
|
this.ngModelChange = new EventEmitter();
|
|
@@ -1434,16 +1501,16 @@ class TCloudUiDataListComponent {
|
|
|
1434
1501
|
}
|
|
1435
1502
|
}
|
|
1436
1503
|
TCloudUiDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, deps: [{ token: DataListService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1437
|
-
TCloudUiDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", search: "search", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [
|
|
1504
|
+
TCloudUiDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", search: "search", listItens: "listItens", border: "border", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [
|
|
1438
1505
|
DataListService,
|
|
1439
1506
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5
|
|
1440
|
-
], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n <div *ngIf=\"loading\" class=\"loading-area\">\r\n <i class=\"fas fa-spinner fa-spin\"></i>\r\n </div>\r\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\r\n <button \r\n #_option\r\n [class.loading-box]=\"loading\"\r\n [disabled]=\"disabled || loading\"\r\n class=\"dropdown-toggle button-select no-margin-bottom\" \r\n type=\"button\" \r\n id=\"{{ id }}\" \r\n \r\n [attr.aria-haspopup]=\"'true'\" \r\n [attr.aria-expanded]=\"'false'\" \r\n (click)=\"toOpen();toInput(_option)\" >\r\n\r\n <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n {{ selected_description }}\r\n <span><i class=\"fas fa-angle-down\"></i></span>\r\n </button>\r\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n <div class=\"line-search\" *ngIf=\"search\">\r\n <table class=\"box-search\">\r\n <tr>\r\n\r\n <td class=\"area-input\">\r\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \r\n </td>\r\n\r\n <td class=\"area-icon\">\r\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n </td>\r\n \r\n </tr>\r\n </table>\r\n </div>\r\n \r\n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:
|
|
1507
|
+
], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n <div *ngIf=\"loading\" class=\"loading-area\">\r\n <i class=\"fas fa-spinner fa-spin\"></i>\r\n </div>\r\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\r\n <button \r\n #_option\r\n [class.in-border]=\"border\"\r\n [class.loading-box]=\"loading\"\r\n [disabled]=\"disabled || loading\"\r\n class=\"dropdown-toggle button-select no-margin-bottom\" \r\n type=\"button\" \r\n id=\"{{ id }}\" \r\n \r\n [attr.aria-haspopup]=\"'true'\" \r\n [attr.aria-expanded]=\"'false'\" \r\n (click)=\"toOpen();toInput(_option)\" >\r\n\r\n <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n {{ selected_description }}\r\n <span><i class=\"fas fa-angle-down\"></i></span>\r\n </button>\r\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n <div class=\"line-search\" *ngIf=\"search\">\r\n <table class=\"box-search\">\r\n <tr>\r\n\r\n <td class=\"area-input\">\r\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \r\n </td>\r\n\r\n <td class=\"area-icon\">\r\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n </td>\r\n \r\n </tr>\r\n </table>\r\n </div>\r\n \r\n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n <ng-content></ng-content> \r\n <ng-container *ngIf=\"listItens && (listItens).length > 0\">\r\n <ng-container *ngFor=\"let item of listItens\">\r\n <tcloud-ui-data-list-option [value]=\"item.value\">{{ item?.description }}</tcloud-ui-data-list-option>\r\n </ng-container>\r\n </ng-container> \r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["value"], outputs: ["selected"] }] });
|
|
1441
1508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
|
|
1442
1509
|
type: Component,
|
|
1443
1510
|
args: [{ selector: 'tcloud-ui-data-list', providers: [
|
|
1444
1511
|
DataListService,
|
|
1445
1512
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5
|
|
1446
|
-
], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n <div *ngIf=\"loading\" class=\"loading-area\">\r\n <i class=\"fas fa-spinner fa-spin\"></i>\r\n </div>\r\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\r\n <button \r\n #_option\r\n [class.loading-box]=\"loading\"\r\n [disabled]=\"disabled || loading\"\r\n class=\"dropdown-toggle button-select no-margin-bottom\" \r\n type=\"button\" \r\n id=\"{{ id }}\" \r\n \r\n [attr.aria-haspopup]=\"'true'\" \r\n [attr.aria-expanded]=\"'false'\" \r\n (click)=\"toOpen();toInput(_option)\" >\r\n\r\n <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n {{ selected_description }}\r\n <span><i class=\"fas fa-angle-down\"></i></span>\r\n </button>\r\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n <div class=\"line-search\" *ngIf=\"search\">\r\n <table class=\"box-search\">\r\n <tr>\r\n\r\n <td class=\"area-input\">\r\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \r\n </td>\r\n\r\n <td class=\"area-icon\">\r\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n </td>\r\n \r\n </tr>\r\n </table>\r\n </div>\r\n \r\n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:
|
|
1513
|
+
], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n <div *ngIf=\"loading\" class=\"loading-area\">\r\n <i class=\"fas fa-spinner fa-spin\"></i>\r\n </div>\r\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\r\n <button \r\n #_option\r\n [class.in-border]=\"border\"\r\n [class.loading-box]=\"loading\"\r\n [disabled]=\"disabled || loading\"\r\n class=\"dropdown-toggle button-select no-margin-bottom\" \r\n type=\"button\" \r\n id=\"{{ id }}\" \r\n \r\n [attr.aria-haspopup]=\"'true'\" \r\n [attr.aria-expanded]=\"'false'\" \r\n (click)=\"toOpen();toInput(_option)\" >\r\n\r\n <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n {{ selected_description }}\r\n <span><i class=\"fas fa-angle-down\"></i></span>\r\n </button>\r\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n <div class=\"line-search\" *ngIf=\"search\">\r\n <table class=\"box-search\">\r\n <tr>\r\n\r\n <td class=\"area-input\">\r\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \r\n </td>\r\n\r\n <td class=\"area-icon\">\r\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n </td>\r\n \r\n </tr>\r\n </table>\r\n </div>\r\n \r\n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n <ng-content></ng-content> \r\n <ng-container *ngIf=\"listItens && (listItens).length > 0\">\r\n <ng-container *ngFor=\"let item of listItens\">\r\n <tcloud-ui-data-list-option [value]=\"item.value\">{{ item?.description }}</tcloud-ui-data-list-option>\r\n </ng-container>\r\n </ng-container> \r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}\n"] }]
|
|
1447
1514
|
}], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
|
|
1448
1515
|
type: Input
|
|
1449
1516
|
}], disabled: [{
|
|
@@ -1452,6 +1519,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1452
1519
|
type: Input
|
|
1453
1520
|
}], search: [{
|
|
1454
1521
|
type: Input
|
|
1522
|
+
}], listItens: [{
|
|
1523
|
+
type: Input
|
|
1524
|
+
}], border: [{
|
|
1525
|
+
type: Input
|
|
1455
1526
|
}], onInputChange: [{
|
|
1456
1527
|
type: Output
|
|
1457
1528
|
}], onChange: [{
|
|
@@ -1462,66 +1533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1462
1533
|
type: Output
|
|
1463
1534
|
}] } });
|
|
1464
1535
|
|
|
1465
|
-
class ISelectOptions {
|
|
1466
|
-
}
|
|
1467
|
-
|
|
1468
|
-
class TCloudUiDataListOptionComponent {
|
|
1469
|
-
constructor(dataListService) {
|
|
1470
|
-
this.dataListService = dataListService;
|
|
1471
|
-
this.id = '';
|
|
1472
|
-
this.select_options = new ISelectOptions();
|
|
1473
|
-
this.selected = new EventEmitter();
|
|
1474
|
-
}
|
|
1475
|
-
ngOnInit() {
|
|
1476
|
-
this.actived_value = this.dataListService.getActiveItem();
|
|
1477
|
-
this.subscription_active = this.dataListService.stateActive$.subscribe(v => {
|
|
1478
|
-
this.actived_value = v;
|
|
1479
|
-
});
|
|
1480
|
-
this.id = this.generateID();
|
|
1481
|
-
this.setSelectOptions();
|
|
1482
|
-
}
|
|
1483
|
-
generateID() {
|
|
1484
|
-
return `data-list-option-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
|
|
1485
|
-
}
|
|
1486
|
-
setSelectedItem(value) {
|
|
1487
|
-
var _a;
|
|
1488
|
-
if (value === '') {
|
|
1489
|
-
this.value = '';
|
|
1490
|
-
}
|
|
1491
|
-
this.dataListService.setItemValue(this.value);
|
|
1492
|
-
const description = ((_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.innerText) || '';
|
|
1493
|
-
this.dataListService.setItemDescription(description);
|
|
1494
|
-
this.setSelectOptions();
|
|
1495
|
-
}
|
|
1496
|
-
setSelectOptions() {
|
|
1497
|
-
setTimeout(() => {
|
|
1498
|
-
var _a;
|
|
1499
|
-
try {
|
|
1500
|
-
const description = (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.innerText;
|
|
1501
|
-
this.select_options.value = this.value;
|
|
1502
|
-
this.select_options.description = description;
|
|
1503
|
-
this.dataListService.registerSelectionOptionsDescription(this.select_options);
|
|
1504
|
-
}
|
|
1505
|
-
catch (error) { }
|
|
1506
|
-
});
|
|
1507
|
-
}
|
|
1508
|
-
ngOnDestroy() {
|
|
1509
|
-
if (this.subscription_active) {
|
|
1510
|
-
this.subscription_active.unsubscribe();
|
|
1511
|
-
}
|
|
1512
|
-
}
|
|
1513
|
-
}
|
|
1514
|
-
TCloudUiDataListOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1515
|
-
TCloudUiDataListOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: { value: "value" }, outputs: { selected: "selected" }, ngImport: i0, template: "<button \r\n [title]=\"select_options.description\"\r\n id=\"{{id}}\"\r\n [attr.data-description]=\"select_options.description\"\r\n [attr.data-actived-value]=\"actived_value\"\r\n class=\"dropdown-item\" \r\n [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n [class.active]=\"value === actived_value\" \r\n type=\"button\" \r\n [value]=\"value\"\r\n (click)=\"setSelectedItem(value)\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] });
|
|
1516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
|
|
1517
|
-
type: Component,
|
|
1518
|
-
args: [{ selector: 'tcloud-ui-data-list-option', template: "<button \r\n [title]=\"select_options.description\"\r\n id=\"{{id}}\"\r\n [attr.data-description]=\"select_options.description\"\r\n [attr.data-actived-value]=\"actived_value\"\r\n class=\"dropdown-item\" \r\n [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n [class.active]=\"value === actived_value\" \r\n type=\"button\" \r\n [value]=\"value\"\r\n (click)=\"setSelectedItem(value)\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] }]
|
|
1519
|
-
}], ctorParameters: function () { return [{ type: DataListService }]; }, propDecorators: { value: [{
|
|
1520
|
-
type: Input
|
|
1521
|
-
}], selected: [{
|
|
1522
|
-
type: Output
|
|
1523
|
-
}] } });
|
|
1524
|
-
|
|
1525
1536
|
class TCloudUiDataListModule {
|
|
1526
1537
|
}
|
|
1527
1538
|
TCloudUiDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -4329,6 +4340,10 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4329
4340
|
this.toResize();
|
|
4330
4341
|
this.toClick();
|
|
4331
4342
|
this.set_placeholder_list();
|
|
4343
|
+
this.listItens = [
|
|
4344
|
+
{ description: 'Teste1', value: 'teste1' },
|
|
4345
|
+
{ description: 'Teste2', value: 'teste2' }
|
|
4346
|
+
];
|
|
4332
4347
|
}
|
|
4333
4348
|
check_is_valid() {
|
|
4334
4349
|
if (this.items) {
|
|
@@ -4360,6 +4375,11 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4360
4375
|
}
|
|
4361
4376
|
return { 'max-width': max_width + 'px' };
|
|
4362
4377
|
}
|
|
4378
|
+
add_items_by_data_list(e) {
|
|
4379
|
+
console.log('add_items_by_data_list', e);
|
|
4380
|
+
this.input_items = e;
|
|
4381
|
+
this.add_items();
|
|
4382
|
+
}
|
|
4363
4383
|
add_items() {
|
|
4364
4384
|
if (this.disabled) {
|
|
4365
4385
|
return;
|
|
@@ -4557,11 +4577,13 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4557
4577
|
}
|
|
4558
4578
|
}
|
|
4559
4579
|
TCloudUiMultiplesValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4560
|
-
TCloudUiMultiplesValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input\">\n <div class=\"input\">\n <input \n (keydown.enter)=\"add_items();toOpen()\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\"\n type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n </div>\n </td>\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>\n \n </div>\n </td>\n <td class=\"action-input-arrow\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n </button>\n </td>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n </div>\n \n <!-- <pre>\n {{ items | json }}\n </pre> -->\n\n </form> \n\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n \n\n <div class=\"line-search\" *ngIf=\"search\">\n <table class=\"box-search\">\n <tr>\n \n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n \n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n\n <div class=\"area-options\" id=\"{{ id }}-options\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n \n <label class=\"box-label\" [ngStyle]=\"item_width(item)\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }} \n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n\n </ng-container>\n </div>\n\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.group-input-action{width:100%}.group-input-action input{height:40px;border:none}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:#fff;border-bottom:1px solid #ccc;border-top:1px solid #ccc}.count-list .input input{height:40px;border:none;text-align:center;width:100px}.action-input-arrow{width:30px;background-color:#fff;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;height:42px!important;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:none;width:30px;border-radius:0 3px 3px 0}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:10px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:3px;display:block;margin:0;height:40px}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .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-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
4580
|
+
TCloudUiMultiplesValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItens: "listItens", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItens && (listItens).length > 0) ? '-data-list' : '' }}\">\n <ng-container *ngIf=\"listItens && (listItens).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItens]=\"listItens\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!listItens || !(listItens && (listItens).length > 0)\">\n <div class=\"input\">\n <input \n (keydown.enter)=\"add_items();toOpen()\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\"\n type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n \n </div>\n </ng-container>\n </td>\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>\n \n </div>\n </td>\n <td class=\"action-input-arrow\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n </button>\n </td>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItens || !(listItens && (listItens).length > 0)\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"listItens && (listItens).length > 0\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n </td>\n </tr>\n </table>\n </div>\n \n <!-- <pre>\n {{ items | json }}\n </pre> -->\n\n </form> \n\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n \n\n <div class=\"line-search\" *ngIf=\"search\">\n <table class=\"box-search\">\n <tr>\n \n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n \n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n\n <div class=\"area-options\" id=\"{{ id }}-options\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n \n <label class=\"box-label\" [ngStyle]=\"item_width(item)\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }} \n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n\n </ng-container>\n </div>\n\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.box-input-data-list{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:5px 0 0 5px;height:42px;padding-left:5px}.group-input-action{width:100%}.group-input-action input{height:40px;border:none}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:#fff;border-bottom:1px solid #ccc;border-top:1px solid #ccc}.count-list .input input{height:40px;border:none;text-align:center;width:100px}.action-input-arrow{width:30px;background-color:#fff;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;height:42px!important;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:none;width:30px;border-radius:0 3px 3px 0}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:10px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:3px;display:block;margin:0;height:40px}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .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-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "search", "listItens", "border", "ngModel"], outputs: ["onInputChange", "onChange", "ngModelChange"] }] });
|
|
4561
4581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
4562
4582
|
type: Component,
|
|
4563
|
-
args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input\">\n <div class=\"input\">\n <input \n
|
|
4564
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
4583
|
+
args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItens && (listItens).length > 0) ? '-data-list' : '' }}\">\n <ng-container *ngIf=\"listItens && (listItens).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItens]=\"listItens\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!listItens || !(listItens && (listItens).length > 0)\">\n <div class=\"input\">\n <input \n (keydown.enter)=\"add_items();toOpen()\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\"\n type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n \n </div>\n </ng-container>\n </td>\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>\n \n </div>\n </td>\n <td class=\"action-input-arrow\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n </button>\n </td>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItens || !(listItens && (listItens).length > 0)\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"listItens && (listItens).length > 0\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n </td>\n </tr>\n </table>\n </div>\n \n <!-- <pre>\n {{ items | json }}\n </pre> -->\n\n </form> \n\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n \n\n <div class=\"line-search\" *ngIf=\"search\">\n <table class=\"box-search\">\n <tr>\n \n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n \n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n\n <div class=\"area-options\" id=\"{{ id }}-options\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n \n <label class=\"box-label\" [ngStyle]=\"item_width(item)\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }} \n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n\n </ng-container>\n </div>\n\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.box-input-data-list{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:5px 0 0 5px;height:42px;padding-left:5px}.group-input-action{width:100%}.group-input-action input{height:40px;border:none}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:#fff;border-bottom:1px solid #ccc;border-top:1px solid #ccc}.count-list .input input{height:40px;border:none;text-align:center;width:100px}.action-input-arrow{width:30px;background-color:#fff;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;height:42px!important;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:none;width:30px;border-radius:0 3px 3px 0}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:10px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:3px;display:block;margin:0;height:40px}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .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-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}\n"] }]
|
|
4584
|
+
}], ctorParameters: function () { return []; }, propDecorators: { listItens: [{
|
|
4585
|
+
type: Input
|
|
4586
|
+
}], delimiter: [{
|
|
4565
4587
|
type: Input
|
|
4566
4588
|
}], placeholder: [{
|
|
4567
4589
|
type: Input
|
|
@@ -4584,10 +4606,12 @@ class TCloudUiMultiplesValuesModule {
|
|
|
4584
4606
|
TCloudUiMultiplesValuesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4585
4607
|
TCloudUiMultiplesValuesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, declarations: [TCloudUiMultiplesValuesComponent], imports: [CommonModule,
|
|
4586
4608
|
FormsModule,
|
|
4587
|
-
ReactiveFormsModule
|
|
4609
|
+
ReactiveFormsModule,
|
|
4610
|
+
TCloudUiDataListModule], exports: [TCloudUiMultiplesValuesComponent] });
|
|
4588
4611
|
TCloudUiMultiplesValuesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, imports: [CommonModule,
|
|
4589
4612
|
FormsModule,
|
|
4590
|
-
ReactiveFormsModule
|
|
4613
|
+
ReactiveFormsModule,
|
|
4614
|
+
TCloudUiDataListModule] });
|
|
4591
4615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, decorators: [{
|
|
4592
4616
|
type: NgModule,
|
|
4593
4617
|
args: [{
|
|
@@ -4600,7 +4624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4600
4624
|
imports: [
|
|
4601
4625
|
CommonModule,
|
|
4602
4626
|
FormsModule,
|
|
4603
|
-
ReactiveFormsModule
|
|
4627
|
+
ReactiveFormsModule,
|
|
4628
|
+
TCloudUiDataListModule
|
|
4604
4629
|
]
|
|
4605
4630
|
}]
|
|
4606
4631
|
}] });
|