@dev-tcloud/tcloud-ui 2.4.9 → 2.4.10
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/esm2022/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list.component.mjs +1 -1
- package/esm2022/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.mjs +26 -7
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +25 -6
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-accordion/tcloud-ui-accordion.component.d.ts +1 -1
- package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +1 -1
- package/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -5188,8 +5188,11 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5188
5188
|
this.search_text = '';
|
|
5189
5189
|
this.id = '';
|
|
5190
5190
|
this.show_itens = false;
|
|
5191
|
+
this.show_component = false;
|
|
5191
5192
|
this.input_items = '';
|
|
5192
5193
|
this.items = [];
|
|
5194
|
+
this.openValuesInChange = true;
|
|
5195
|
+
this.useBtnAdd = true;
|
|
5193
5196
|
this.pattern = null;
|
|
5194
5197
|
this.delimiter = ',';
|
|
5195
5198
|
this.placeholder = '';
|
|
@@ -5208,9 +5211,12 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5208
5211
|
}
|
|
5209
5212
|
ngOnInit() {
|
|
5210
5213
|
this.id = this.generateID();
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
|
|
5214
|
+
setTimeout(() => {
|
|
5215
|
+
this.show_component = true;
|
|
5216
|
+
this.toResize();
|
|
5217
|
+
this.toClick();
|
|
5218
|
+
this.set_placeholder_list();
|
|
5219
|
+
});
|
|
5214
5220
|
}
|
|
5215
5221
|
check_is_valid() {
|
|
5216
5222
|
if (this.items) {
|
|
@@ -5292,6 +5298,9 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5292
5298
|
}
|
|
5293
5299
|
}
|
|
5294
5300
|
}
|
|
5301
|
+
if ((this.items).length === 0) {
|
|
5302
|
+
this.show_itens = false;
|
|
5303
|
+
}
|
|
5295
5304
|
this.set_placeholder_list();
|
|
5296
5305
|
}
|
|
5297
5306
|
remove_all() {
|
|
@@ -5326,6 +5335,10 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5326
5335
|
});
|
|
5327
5336
|
}
|
|
5328
5337
|
toOpen() {
|
|
5338
|
+
if (this.items.length === 0) {
|
|
5339
|
+
this.show_itens = false;
|
|
5340
|
+
return;
|
|
5341
|
+
}
|
|
5329
5342
|
this.show_itens = !this.show_itens;
|
|
5330
5343
|
this.resolve_position_dropdown(this.show_itens);
|
|
5331
5344
|
}
|
|
@@ -5382,7 +5395,9 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5382
5395
|
}
|
|
5383
5396
|
if (valid) {
|
|
5384
5397
|
this.add_items();
|
|
5385
|
-
this.
|
|
5398
|
+
if (this.openValuesInChange) {
|
|
5399
|
+
this.toOpen();
|
|
5400
|
+
}
|
|
5386
5401
|
}
|
|
5387
5402
|
}
|
|
5388
5403
|
onChange() {
|
|
@@ -5437,13 +5452,17 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5437
5452
|
ngOnDestroy() {
|
|
5438
5453
|
}
|
|
5439
5454
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5440
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n <form #_formulario=\"ngForm\">\r\n\r\n <!-- {{ input_items }} -->\r\n\r\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n <table style=\"width: 100%;\">\r\n <tr>\r\n <td>\r\n <table class=\"group-input-action\">\r\n <tr>\r\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <div class=\"input\" (click)=\"show_itens = false\">\r\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n </div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <div class=\"input\">\r\n <input \r\n required\r\n [pattern]=\"pattern\"\r\n (keydown.enter)=\"toEnterKey(input_items)\"\r\n [disabled]=\"disabled\"\r\n [class.text-lowercase]=\"lowercase\"\r\n [class.text-uppercase]=\"uppercase\" \r\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n \r\n </div>\r\n </ng-container>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n <div class=\"input\">\r\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly> \r\n </div>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \r\n </td>\r\n <td class=\"action-input-arrow bc-r\">\r\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n </button>\r\n </td>\r\n \r\n </tr>\r\n </table> \r\n </td>\r\n <td style=\"width: 45px;\">\r\n <table>\r\n <tr>\r\n <td class=\"action-input\" *ngIf=\"!disabled\">\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <!-- <table class=\"group-input-action\">\r\n <tr>\r\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <div class=\"input\" (click)=\"show_itens = false\">\r\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <div class=\"input\">\r\n <input \r\n (keydown.enter)=\"add_items();toOpen()\"\r\n [disabled]=\"disabled\"\r\n [class.text-lowercase]=\"lowercase\"\r\n [class.text-uppercase]=\"uppercase\"\r\n type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n \r\n </div>\r\n </ng-container>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n <div class=\"input\">\r\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly> \r\n </div>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \r\n </td>\r\n <td class=\"action-input-arrow bc-r\">\r\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n </button>\r\n </td>\r\n <td class=\"action-input\" *ngIf=\"!disabled\">\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\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\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </table> -->\r\n </div>\r\n \r\n <!-- <pre>\r\n {{ items | json }}\r\n </pre> -->\r\n\r\n </form> \r\n\r\n <!-- box-itens-selected -->\r\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\">\r\n \r\n\r\n <div class=\"line-search\" *ngIf=\"search\">\r\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\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 class=\"box-action\" 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\">\r\n <ng-container *ngFor=\"let item of items; let i = index\">\r\n \r\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\r\n <div class=\"box-value\" [title]=\"item\" >\r\n {{ item }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n class=\"box-action\"\r\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item, i)\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </label>\r\n\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n <div class=\"btn-remove-all\">\r\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n Limpar toda a lista\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\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-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border-left:1px solid var(--tc-gray-300);border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);border-radius:5px 0 0 5px;height:42px;padding-left:5px}@media (max-width: 900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:4px 16px 16px 3px;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.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;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-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:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);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}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] }); }
|
|
5455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", openValuesInChange: "openValuesInChange", useBtnAdd: "useBtnAdd", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n <form #_formulario=\"ngForm\">\r\n\r\n <!-- {{ input_items }} -->\r\n\r\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n <table style=\"width: 100%;\">\r\n <tr>\r\n <td>\r\n <table class=\"group-input-action\">\r\n <tr>\r\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <div class=\"input\" (click)=\"show_itens = false\">\r\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n </div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <div class=\"input\">\r\n <input \r\n required\r\n [pattern]=\"pattern\"\r\n (keydown.enter)=\"toEnterKey(input_items)\"\r\n [disabled]=\"disabled\"\r\n [class.text-lowercase]=\"lowercase\"\r\n [class.text-uppercase]=\"uppercase\" \r\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n \r\n </div>\r\n </ng-container>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n <div class=\"input\">\r\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly> \r\n </div>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \r\n </td>\r\n <td class=\"action-input-arrow bc-r\">\r\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n </button>\r\n </td>\r\n \r\n </tr>\r\n </table> \r\n </td>\r\n <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\r\n <table>\r\n <tr>\r\n <td class=\"action-input\" *ngIf=\"!disabled\">\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n </div>\r\n \r\n <!-- <pre>\r\n {{ items | json }}\r\n </pre> -->\r\n\r\n </form> \r\n\r\n <!-- box-itens-selected -->\r\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\">\r\n \r\n\r\n <div class=\"line-search\">\r\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\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 class=\"box-action\" 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\">\r\n <ng-container *ngFor=\"let item of items; let i = index\">\r\n \r\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\r\n <div class=\"box-value\" [title]=\"item\" >\r\n {{ item }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n class=\"box-action\"\r\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item, i)\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </label>\r\n\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n <div class=\"btn-remove-all\">\r\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n Limpar toda a lista\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\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:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px}@media (max-width: 900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.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;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-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:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);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}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] }); }
|
|
5441
5456
|
}
|
|
5442
5457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
5443
5458
|
type: Component,
|
|
5444
|
-
args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], template: "<div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n <form #_formulario=\"ngForm\">\r\n\r\n <!-- {{ input_items }} -->\r\n\r\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n <table style=\"width: 100%;\">\r\n <tr>\r\n <td>\r\n <table class=\"group-input-action\">\r\n <tr>\r\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <div class=\"input\" (click)=\"show_itens = false\">\r\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n </div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <div class=\"input\">\r\n <input \r\n required\r\n [pattern]=\"pattern\"\r\n (keydown.enter)=\"toEnterKey(input_items)\"\r\n [disabled]=\"disabled\"\r\n [class.text-lowercase]=\"lowercase\"\r\n [class.text-uppercase]=\"uppercase\" \r\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n \r\n </div>\r\n </ng-container>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n <div class=\"input\">\r\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly> \r\n </div>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \r\n </td>\r\n <td class=\"action-input-arrow bc-r\">\r\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n </button>\r\n </td>\r\n \r\n </tr>\r\n </table> \r\n </td>\r\n <td style=\"width: 45px;\">\r\n <table>\r\n <tr>\r\n <td class=\"action-input\" *ngIf=\"!disabled\">\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <!-- <table class=\"group-input-action\">\r\n <tr>\r\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <div class=\"input\" (click)=\"show_itens = false\">\r\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <div class=\"input\">\r\n <input \r\n (keydown.enter)=\"add_items();toOpen()\"\r\n [disabled]=\"disabled\"\r\n [class.text-lowercase]=\"lowercase\"\r\n [class.text-uppercase]=\"uppercase\"\r\n type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n \r\n </div>\r\n </ng-container>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n <div class=\"input\">\r\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly> \r\n </div>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \r\n </td>\r\n <td class=\"action-input-arrow bc-r\">\r\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n </button>\r\n </td>\r\n <td class=\"action-input\" *ngIf=\"!disabled\">\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\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\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </table> -->\r\n </div>\r\n \r\n <!-- <pre>\r\n {{ items | json }}\r\n </pre> -->\r\n\r\n </form> \r\n\r\n <!-- box-itens-selected -->\r\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\">\r\n \r\n\r\n <div class=\"line-search\" *ngIf=\"search\">\r\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\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 class=\"box-action\" 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\">\r\n <ng-container *ngFor=\"let item of items; let i = index\">\r\n \r\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\r\n <div class=\"box-value\" [title]=\"item\" >\r\n {{ item }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n class=\"box-action\"\r\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item, i)\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </label>\r\n\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n <div class=\"btn-remove-all\">\r\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n Limpar toda a lista\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\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-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border-left:1px solid var(--tc-gray-300);border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);border-radius:5px 0 0 5px;height:42px;padding-left:5px}@media (max-width: 900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:4px 16px 16px 3px;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.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;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-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:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);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}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
|
|
5459
|
+
args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n <form #_formulario=\"ngForm\">\r\n\r\n <!-- {{ input_items }} -->\r\n\r\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n <table style=\"width: 100%;\">\r\n <tr>\r\n <td>\r\n <table class=\"group-input-action\">\r\n <tr>\r\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <div class=\"input\" (click)=\"show_itens = false\">\r\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n </div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <div class=\"input\">\r\n <input \r\n required\r\n [pattern]=\"pattern\"\r\n (keydown.enter)=\"toEnterKey(input_items)\"\r\n [disabled]=\"disabled\"\r\n [class.text-lowercase]=\"lowercase\"\r\n [class.text-uppercase]=\"uppercase\" \r\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n \r\n </div>\r\n </ng-container>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n <div class=\"input\">\r\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly> \r\n </div>\r\n </td>\r\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \r\n </td>\r\n <td class=\"action-input-arrow bc-r\">\r\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n </button>\r\n </td>\r\n \r\n </tr>\r\n </table> \r\n </td>\r\n <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\r\n <table>\r\n <tr>\r\n <td class=\"action-input\" *ngIf=\"!disabled\">\r\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n </div>\r\n \r\n <!-- <pre>\r\n {{ items | json }}\r\n </pre> -->\r\n\r\n </form> \r\n\r\n <!-- box-itens-selected -->\r\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\">\r\n \r\n\r\n <div class=\"line-search\">\r\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\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 class=\"box-action\" 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\">\r\n <ng-container *ngFor=\"let item of items; let i = index\">\r\n \r\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\r\n <div class=\"box-value\" [title]=\"item\" >\r\n {{ item }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n class=\"box-action\"\r\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item, i)\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </label>\r\n\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n <div class=\"btn-remove-all\">\r\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n Limpar toda a lista\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\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:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px}@media (max-width: 900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.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;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-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:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);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}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
|
|
5445
5460
|
}], ctorParameters: function () { return []; }, propDecorators: { listItems: [{
|
|
5446
5461
|
type: Input
|
|
5462
|
+
}], openValuesInChange: [{
|
|
5463
|
+
type: Input
|
|
5464
|
+
}], useBtnAdd: [{
|
|
5465
|
+
type: Input
|
|
5447
5466
|
}], pattern: [{
|
|
5448
5467
|
type: Input
|
|
5449
5468
|
}], delimiter: [{
|