@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,66 @@ 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
|
+
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
|
+
|
|
1184
1248
|
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5 = {
|
|
1185
1249
|
provide: NG_VALUE_ACCESSOR,
|
|
1186
1250
|
useExisting: forwardRef(() => TCloudUiDataListComponent),
|
|
@@ -1201,6 +1265,13 @@ class TCloudUiDataListComponent {
|
|
|
1201
1265
|
this._disabled = false;
|
|
1202
1266
|
this._loading = false;
|
|
1203
1267
|
this.search = true;
|
|
1268
|
+
/*
|
|
1269
|
+
this.listItens = [
|
|
1270
|
+
{description: 'Teste1', value: 'teste1'},
|
|
1271
|
+
{description: 'Teste2', value: 'teste2'}
|
|
1272
|
+
]
|
|
1273
|
+
*/
|
|
1274
|
+
this.border = true;
|
|
1204
1275
|
this.onInputChange = new EventEmitter();
|
|
1205
1276
|
this.onChange = new EventEmitter();
|
|
1206
1277
|
this.ngModelChange = new EventEmitter();
|
|
@@ -1430,16 +1501,16 @@ class TCloudUiDataListComponent {
|
|
|
1430
1501
|
}
|
|
1431
1502
|
}
|
|
1432
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 });
|
|
1433
|
-
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: [
|
|
1434
1505
|
DataListService,
|
|
1435
1506
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5
|
|
1436
|
-
], 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"] }] });
|
|
1437
1508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
|
|
1438
1509
|
type: Component,
|
|
1439
1510
|
args: [{ selector: 'tcloud-ui-data-list', providers: [
|
|
1440
1511
|
DataListService,
|
|
1441
1512
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5
|
|
1442
|
-
], 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"] }]
|
|
1443
1514
|
}], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
|
|
1444
1515
|
type: Input
|
|
1445
1516
|
}], disabled: [{
|
|
@@ -1448,6 +1519,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1448
1519
|
type: Input
|
|
1449
1520
|
}], search: [{
|
|
1450
1521
|
type: Input
|
|
1522
|
+
}], listItens: [{
|
|
1523
|
+
type: Input
|
|
1524
|
+
}], border: [{
|
|
1525
|
+
type: Input
|
|
1451
1526
|
}], onInputChange: [{
|
|
1452
1527
|
type: Output
|
|
1453
1528
|
}], onChange: [{
|
|
@@ -1458,66 +1533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1458
1533
|
type: Output
|
|
1459
1534
|
}] } });
|
|
1460
1535
|
|
|
1461
|
-
class ISelectOptions {
|
|
1462
|
-
}
|
|
1463
|
-
|
|
1464
|
-
class TCloudUiDataListOptionComponent {
|
|
1465
|
-
constructor(dataListService) {
|
|
1466
|
-
this.dataListService = dataListService;
|
|
1467
|
-
this.id = '';
|
|
1468
|
-
this.select_options = new ISelectOptions();
|
|
1469
|
-
this.selected = new EventEmitter();
|
|
1470
|
-
}
|
|
1471
|
-
ngOnInit() {
|
|
1472
|
-
this.actived_value = this.dataListService.getActiveItem();
|
|
1473
|
-
this.subscription_active = this.dataListService.stateActive$.subscribe(v => {
|
|
1474
|
-
this.actived_value = v;
|
|
1475
|
-
});
|
|
1476
|
-
this.id = this.generateID();
|
|
1477
|
-
this.setSelectOptions();
|
|
1478
|
-
}
|
|
1479
|
-
generateID() {
|
|
1480
|
-
return `data-list-option-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
|
|
1481
|
-
}
|
|
1482
|
-
setSelectedItem(value) {
|
|
1483
|
-
var _a;
|
|
1484
|
-
if (value === '') {
|
|
1485
|
-
this.value = '';
|
|
1486
|
-
}
|
|
1487
|
-
this.dataListService.setItemValue(this.value);
|
|
1488
|
-
const description = ((_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.innerText) || '';
|
|
1489
|
-
this.dataListService.setItemDescription(description);
|
|
1490
|
-
this.setSelectOptions();
|
|
1491
|
-
}
|
|
1492
|
-
setSelectOptions() {
|
|
1493
|
-
setTimeout(() => {
|
|
1494
|
-
var _a;
|
|
1495
|
-
try {
|
|
1496
|
-
const description = (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.innerText;
|
|
1497
|
-
this.select_options.value = this.value;
|
|
1498
|
-
this.select_options.description = description;
|
|
1499
|
-
this.dataListService.registerSelectionOptionsDescription(this.select_options);
|
|
1500
|
-
}
|
|
1501
|
-
catch (error) { }
|
|
1502
|
-
});
|
|
1503
|
-
}
|
|
1504
|
-
ngOnDestroy() {
|
|
1505
|
-
if (this.subscription_active) {
|
|
1506
|
-
this.subscription_active.unsubscribe();
|
|
1507
|
-
}
|
|
1508
|
-
}
|
|
1509
|
-
}
|
|
1510
|
-
TCloudUiDataListOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1511
|
-
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"] });
|
|
1512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
|
|
1513
|
-
type: Component,
|
|
1514
|
-
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"] }]
|
|
1515
|
-
}], ctorParameters: function () { return [{ type: DataListService }]; }, propDecorators: { value: [{
|
|
1516
|
-
type: Input
|
|
1517
|
-
}], selected: [{
|
|
1518
|
-
type: Output
|
|
1519
|
-
}] } });
|
|
1520
|
-
|
|
1521
1536
|
class TCloudUiDataListModule {
|
|
1522
1537
|
}
|
|
1523
1538
|
TCloudUiDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -4325,6 +4340,10 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4325
4340
|
this.toResize();
|
|
4326
4341
|
this.toClick();
|
|
4327
4342
|
this.set_placeholder_list();
|
|
4343
|
+
this.listItens = [
|
|
4344
|
+
{ description: 'Teste1', value: 'teste1' },
|
|
4345
|
+
{ description: 'Teste2', value: 'teste2' }
|
|
4346
|
+
];
|
|
4328
4347
|
}
|
|
4329
4348
|
check_is_valid() {
|
|
4330
4349
|
if (this.items) {
|
|
@@ -4356,6 +4375,11 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4356
4375
|
}
|
|
4357
4376
|
return { 'max-width': max_width + 'px' };
|
|
4358
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
|
+
}
|
|
4359
4383
|
add_items() {
|
|
4360
4384
|
if (this.disabled) {
|
|
4361
4385
|
return;
|
|
@@ -4553,11 +4577,13 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4553
4577
|
}
|
|
4554
4578
|
}
|
|
4555
4579
|
TCloudUiMultiplesValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4556
|
-
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"] }] });
|
|
4557
4581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
4558
4582
|
type: Component,
|
|
4559
|
-
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
|
|
4560
|
-
}], 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: [{
|
|
4561
4587
|
type: Input
|
|
4562
4588
|
}], placeholder: [{
|
|
4563
4589
|
type: Input
|
|
@@ -4580,10 +4606,12 @@ class TCloudUiMultiplesValuesModule {
|
|
|
4580
4606
|
TCloudUiMultiplesValuesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4581
4607
|
TCloudUiMultiplesValuesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, declarations: [TCloudUiMultiplesValuesComponent], imports: [CommonModule,
|
|
4582
4608
|
FormsModule,
|
|
4583
|
-
ReactiveFormsModule
|
|
4609
|
+
ReactiveFormsModule,
|
|
4610
|
+
TCloudUiDataListModule], exports: [TCloudUiMultiplesValuesComponent] });
|
|
4584
4611
|
TCloudUiMultiplesValuesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, imports: [CommonModule,
|
|
4585
4612
|
FormsModule,
|
|
4586
|
-
ReactiveFormsModule
|
|
4613
|
+
ReactiveFormsModule,
|
|
4614
|
+
TCloudUiDataListModule] });
|
|
4587
4615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesModule, decorators: [{
|
|
4588
4616
|
type: NgModule,
|
|
4589
4617
|
args: [{
|
|
@@ -4596,7 +4624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4596
4624
|
imports: [
|
|
4597
4625
|
CommonModule,
|
|
4598
4626
|
FormsModule,
|
|
4599
|
-
ReactiveFormsModule
|
|
4627
|
+
ReactiveFormsModule,
|
|
4628
|
+
TCloudUiDataListModule
|
|
4600
4629
|
]
|
|
4601
4630
|
}]
|
|
4602
4631
|
}] });
|