@dev-tcloud/tcloud-ui 0.0.71 → 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-modal/components/tcloud-ui-modal-footer/tcloud-ui-modal-footer.component.mjs +2 -1
- package/esm2020/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.mjs +15 -1
- package/esm2020/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.mjs +5 -16
- 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 +113 -84
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +111 -82
- 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-modal/services/tcloud-modal.service.d.ts +1 -0
- package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +0 -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
|
@@ -489,6 +489,9 @@ class TcloudModalService {
|
|
|
489
489
|
this.stateLoading$ = this._stateLoading.asObservable();
|
|
490
490
|
}
|
|
491
491
|
toModal(action) {
|
|
492
|
+
if (action === 'close') {
|
|
493
|
+
this.fixed_body('off');
|
|
494
|
+
}
|
|
492
495
|
this._stateClose.next((action === 'open'));
|
|
493
496
|
}
|
|
494
497
|
toRespConfirm(resp) {
|
|
@@ -508,6 +511,17 @@ class TcloudModalService {
|
|
|
508
511
|
this.loading = loading;
|
|
509
512
|
this._stateLoading.next(loading);
|
|
510
513
|
}
|
|
514
|
+
fixed_body(fixed) {
|
|
515
|
+
let body = document.getElementsByTagName("BODY")[0];
|
|
516
|
+
if (body && body.style) {
|
|
517
|
+
if (fixed === 'on') {
|
|
518
|
+
body.style.overflowY = "hidden";
|
|
519
|
+
}
|
|
520
|
+
if (fixed === 'off') {
|
|
521
|
+
body.style.removeProperty('overflow-y');
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
}
|
|
511
525
|
}
|
|
512
526
|
TcloudModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
513
527
|
TcloudModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService });
|
|
@@ -590,7 +604,7 @@ class TCloudUiModalComponent {
|
|
|
590
604
|
this.control_open = open;
|
|
591
605
|
this.checkIsOpen();
|
|
592
606
|
this._open = open;
|
|
593
|
-
this.fixed_body((open) ? 'on' : 'off');
|
|
607
|
+
this.tcloudModalService.fixed_body((open) ? 'on' : 'off');
|
|
594
608
|
}
|
|
595
609
|
get open() { return this._open; }
|
|
596
610
|
/**
|
|
@@ -633,25 +647,14 @@ class TCloudUiModalComponent {
|
|
|
633
647
|
}
|
|
634
648
|
action = (action) ? action : 'close';
|
|
635
649
|
this.toAction.emit(action);
|
|
636
|
-
this.fixed_body('off');
|
|
650
|
+
this.tcloudModalService.fixed_body('off');
|
|
637
651
|
}
|
|
638
652
|
checkIsOpen() {
|
|
639
653
|
if (this.control_open) {
|
|
640
|
-
this.fixed_body('on');
|
|
654
|
+
this.tcloudModalService.fixed_body('on');
|
|
641
655
|
}
|
|
642
656
|
else {
|
|
643
|
-
this.fixed_body('off');
|
|
644
|
-
}
|
|
645
|
-
}
|
|
646
|
-
fixed_body(fixed) {
|
|
647
|
-
let body = document.getElementsByTagName("BODY")[0];
|
|
648
|
-
if (body && body.style) {
|
|
649
|
-
if (fixed === 'on') {
|
|
650
|
-
body.style.overflowY = "hidden";
|
|
651
|
-
}
|
|
652
|
-
if (fixed === 'off') {
|
|
653
|
-
body.style.removeProperty('overflow-y');
|
|
654
|
-
}
|
|
657
|
+
this.tcloudModalService.fixed_body('off');
|
|
655
658
|
}
|
|
656
659
|
}
|
|
657
660
|
ngOnDestroy() {
|
|
@@ -780,6 +783,7 @@ class TCloudUiModalFooterComponent {
|
|
|
780
783
|
this.subscription = this.tcloudModalService.stateLoading$.subscribe((loading) => { this.loading = loading; });
|
|
781
784
|
}
|
|
782
785
|
ngOnDestroy() {
|
|
786
|
+
this.tcloudModalService.fixed_body('off');
|
|
783
787
|
if (this.subscription) {
|
|
784
788
|
this.subscription.unsubscribe();
|
|
785
789
|
}
|
|
@@ -1181,6 +1185,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1181
1185
|
type: Injectable
|
|
1182
1186
|
}] });
|
|
1183
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
|
+
if (value === '') {
|
|
1211
|
+
this.value = '';
|
|
1212
|
+
}
|
|
1213
|
+
this.dataListService.setItemValue(this.value);
|
|
1214
|
+
const description = document.getElementById(this.id)?.innerText || '';
|
|
1215
|
+
this.dataListService.setItemDescription(description);
|
|
1216
|
+
this.setSelectOptions();
|
|
1217
|
+
}
|
|
1218
|
+
setSelectOptions() {
|
|
1219
|
+
setTimeout(() => {
|
|
1220
|
+
try {
|
|
1221
|
+
const description = document.getElementById(this.id)?.innerText;
|
|
1222
|
+
this.select_options.value = this.value;
|
|
1223
|
+
this.select_options.description = description;
|
|
1224
|
+
this.dataListService.registerSelectionOptionsDescription(this.select_options);
|
|
1225
|
+
}
|
|
1226
|
+
catch (error) { }
|
|
1227
|
+
});
|
|
1228
|
+
}
|
|
1229
|
+
ngOnDestroy() {
|
|
1230
|
+
if (this.subscription_active) {
|
|
1231
|
+
this.subscription_active.unsubscribe();
|
|
1232
|
+
}
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
TCloudUiDataListOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1236
|
+
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"] });
|
|
1237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
|
|
1238
|
+
type: Component,
|
|
1239
|
+
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"] }]
|
|
1240
|
+
}], ctorParameters: function () { return [{ type: DataListService }]; }, propDecorators: { value: [{
|
|
1241
|
+
type: Input
|
|
1242
|
+
}], selected: [{
|
|
1243
|
+
type: Output
|
|
1244
|
+
}] } });
|
|
1245
|
+
|
|
1184
1246
|
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5 = {
|
|
1185
1247
|
provide: NG_VALUE_ACCESSOR,
|
|
1186
1248
|
useExisting: forwardRef(() => TCloudUiDataListComponent),
|
|
@@ -1201,6 +1263,13 @@ class TCloudUiDataListComponent {
|
|
|
1201
1263
|
this._disabled = false;
|
|
1202
1264
|
this._loading = false;
|
|
1203
1265
|
this.search = true;
|
|
1266
|
+
/*
|
|
1267
|
+
this.listItens = [
|
|
1268
|
+
{description: 'Teste1', value: 'teste1'},
|
|
1269
|
+
{description: 'Teste2', value: 'teste2'}
|
|
1270
|
+
]
|
|
1271
|
+
*/
|
|
1272
|
+
this.border = true;
|
|
1204
1273
|
this.onInputChange = new EventEmitter();
|
|
1205
1274
|
this.onChange = new EventEmitter();
|
|
1206
1275
|
this.ngModelChange = new EventEmitter();
|
|
@@ -1426,16 +1495,16 @@ class TCloudUiDataListComponent {
|
|
|
1426
1495
|
}
|
|
1427
1496
|
}
|
|
1428
1497
|
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 });
|
|
1429
|
-
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: [
|
|
1498
|
+
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: [
|
|
1430
1499
|
DataListService,
|
|
1431
1500
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5
|
|
1432
|
-
], 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:
|
|
1501
|
+
], 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"] }] });
|
|
1433
1502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
|
|
1434
1503
|
type: Component,
|
|
1435
1504
|
args: [{ selector: 'tcloud-ui-data-list', providers: [
|
|
1436
1505
|
DataListService,
|
|
1437
1506
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5
|
|
1438
|
-
], 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
|
+
], 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"] }]
|
|
1439
1508
|
}], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
|
|
1440
1509
|
type: Input
|
|
1441
1510
|
}], disabled: [{
|
|
@@ -1444,6 +1513,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1444
1513
|
type: Input
|
|
1445
1514
|
}], search: [{
|
|
1446
1515
|
type: Input
|
|
1516
|
+
}], listItens: [{
|
|
1517
|
+
type: Input
|
|
1518
|
+
}], border: [{
|
|
1519
|
+
type: Input
|
|
1447
1520
|
}], onInputChange: [{
|
|
1448
1521
|
type: Output
|
|
1449
1522
|
}], onChange: [{
|
|
@@ -1454,64 +1527,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1454
1527
|
type: Output
|
|
1455
1528
|
}] } });
|
|
1456
1529
|
|
|
1457
|
-
class ISelectOptions {
|
|
1458
|
-
}
|
|
1459
|
-
|
|
1460
|
-
class TCloudUiDataListOptionComponent {
|
|
1461
|
-
constructor(dataListService) {
|
|
1462
|
-
this.dataListService = dataListService;
|
|
1463
|
-
this.id = '';
|
|
1464
|
-
this.select_options = new ISelectOptions();
|
|
1465
|
-
this.selected = new EventEmitter();
|
|
1466
|
-
}
|
|
1467
|
-
ngOnInit() {
|
|
1468
|
-
this.actived_value = this.dataListService.getActiveItem();
|
|
1469
|
-
this.subscription_active = this.dataListService.stateActive$.subscribe(v => {
|
|
1470
|
-
this.actived_value = v;
|
|
1471
|
-
});
|
|
1472
|
-
this.id = this.generateID();
|
|
1473
|
-
this.setSelectOptions();
|
|
1474
|
-
}
|
|
1475
|
-
generateID() {
|
|
1476
|
-
return `data-list-option-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
|
|
1477
|
-
}
|
|
1478
|
-
setSelectedItem(value) {
|
|
1479
|
-
if (value === '') {
|
|
1480
|
-
this.value = '';
|
|
1481
|
-
}
|
|
1482
|
-
this.dataListService.setItemValue(this.value);
|
|
1483
|
-
const description = document.getElementById(this.id)?.innerText || '';
|
|
1484
|
-
this.dataListService.setItemDescription(description);
|
|
1485
|
-
this.setSelectOptions();
|
|
1486
|
-
}
|
|
1487
|
-
setSelectOptions() {
|
|
1488
|
-
setTimeout(() => {
|
|
1489
|
-
try {
|
|
1490
|
-
const description = document.getElementById(this.id)?.innerText;
|
|
1491
|
-
this.select_options.value = this.value;
|
|
1492
|
-
this.select_options.description = description;
|
|
1493
|
-
this.dataListService.registerSelectionOptionsDescription(this.select_options);
|
|
1494
|
-
}
|
|
1495
|
-
catch (error) { }
|
|
1496
|
-
});
|
|
1497
|
-
}
|
|
1498
|
-
ngOnDestroy() {
|
|
1499
|
-
if (this.subscription_active) {
|
|
1500
|
-
this.subscription_active.unsubscribe();
|
|
1501
|
-
}
|
|
1502
|
-
}
|
|
1503
|
-
}
|
|
1504
|
-
TCloudUiDataListOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1505
|
-
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"] });
|
|
1506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
|
|
1507
|
-
type: Component,
|
|
1508
|
-
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"] }]
|
|
1509
|
-
}], ctorParameters: function () { return [{ type: DataListService }]; }, propDecorators: { value: [{
|
|
1510
|
-
type: Input
|
|
1511
|
-
}], selected: [{
|
|
1512
|
-
type: Output
|
|
1513
|
-
}] } });
|
|
1514
|
-
|
|
1515
1530
|
class TCloudUiDataListModule {
|
|
1516
1531
|
}
|
|
1517
1532
|
TCloudUiDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -4311,6 +4326,10 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4311
4326
|
this.toResize();
|
|
4312
4327
|
this.toClick();
|
|
4313
4328
|
this.set_placeholder_list();
|
|
4329
|
+
this.listItens = [
|
|
4330
|
+
{ description: 'Teste1', value: 'teste1' },
|
|
4331
|
+
{ description: 'Teste2', value: 'teste2' }
|
|
4332
|
+
];
|
|
4314
4333
|
}
|
|
4315
4334
|
check_is_valid() {
|
|
4316
4335
|
if (this.items) {
|
|
@@ -4342,6 +4361,11 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4342
4361
|
}
|
|
4343
4362
|
return { 'max-width': max_width + 'px' };
|
|
4344
4363
|
}
|
|
4364
|
+
add_items_by_data_list(e) {
|
|
4365
|
+
console.log('add_items_by_data_list', e);
|
|
4366
|
+
this.input_items = e;
|
|
4367
|
+
this.add_items();
|
|
4368
|
+
}
|
|
4345
4369
|
add_items() {
|
|
4346
4370
|
if (this.disabled) {
|
|
4347
4371
|
return;
|
|
@@ -4536,11 +4560,13 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4536
4560
|
}
|
|
4537
4561
|
}
|
|
4538
4562
|
TCloudUiMultiplesValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4539
|
-
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"] }] });
|
|
4563
|
+
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"] }] });
|
|
4540
4564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
4541
4565
|
type: Component,
|
|
4542
|
-
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
|
|
4543
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
4566
|
+
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"] }]
|
|
4567
|
+
}], ctorParameters: function () { return []; }, propDecorators: { listItens: [{
|
|
4568
|
+
type: Input
|
|
4569
|
+
}], delimiter: [{
|
|
4544
4570
|
type: Input
|
|
4545
4571
|
}], placeholder: [{
|
|
4546
4572
|
type: Input
|
|
@@ -4563,10 +4589,12 @@ class TCloudUiMultiplesValuesModule {
|
|
|
4563
4589
|
TCloudUiMultiplesValuesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4564
4590
|
TCloudUiMultiplesValuesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, declarations: [TCloudUiMultiplesValuesComponent], imports: [CommonModule,
|
|
4565
4591
|
FormsModule,
|
|
4566
|
-
ReactiveFormsModule
|
|
4592
|
+
ReactiveFormsModule,
|
|
4593
|
+
TCloudUiDataListModule], exports: [TCloudUiMultiplesValuesComponent] });
|
|
4567
4594
|
TCloudUiMultiplesValuesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, imports: [CommonModule,
|
|
4568
4595
|
FormsModule,
|
|
4569
|
-
ReactiveFormsModule
|
|
4596
|
+
ReactiveFormsModule,
|
|
4597
|
+
TCloudUiDataListModule] });
|
|
4570
4598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, decorators: [{
|
|
4571
4599
|
type: NgModule,
|
|
4572
4600
|
args: [{
|
|
@@ -4579,7 +4607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4579
4607
|
imports: [
|
|
4580
4608
|
CommonModule,
|
|
4581
4609
|
FormsModule,
|
|
4582
|
-
ReactiveFormsModule
|
|
4610
|
+
ReactiveFormsModule,
|
|
4611
|
+
TCloudUiDataListModule
|
|
4583
4612
|
]
|
|
4584
4613
|
}]
|
|
4585
4614
|
}] });
|