@dev-tcloud/tcloud-ui 0.1.0 → 0.1.1
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-accordion/components/tcloud-ui-accordion-body/tcloud-ui-accordion-body.component.mjs +16 -3
- package/esm2020/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.mjs +3 -3
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +16 -4
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +16 -4
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -4241,10 +4241,22 @@ class TCloudUiAccordionBodyComponent {
|
|
|
4241
4241
|
}
|
|
4242
4242
|
}
|
|
4243
4243
|
TCloudUiAccordionBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionBodyComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4244
|
-
TCloudUiAccordionBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionBodyComponent, selector: "tcloud-ui-accordion-body", ngImport: i0, template: "<div class=\"tc-accordion-content\"
|
|
4244
|
+
TCloudUiAccordionBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionBodyComponent, selector: "tcloud-ui-accordion-body", ngImport: i0, template: "<div class=\"tc-accordion-content\" [class.show]=\"show\" [@expandAccordion]=\"(show) ? 'open' : 'close' \">\n <ng-content></ng-content>\n</div>", styles: [".show{display:block!important;padding-top:15px;padding-bottom:15px}.tc-accordion-content{overflow:hidden}\n"], animations: [
|
|
4245
|
+
trigger('expandAccordion', [
|
|
4246
|
+
state('close', style({ height: '0' })),
|
|
4247
|
+
state('open', style({ height: '*' })),
|
|
4248
|
+
transition('close <=> open', animate('0.35s ease-in-out')),
|
|
4249
|
+
]),
|
|
4250
|
+
] });
|
|
4245
4251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionBodyComponent, decorators: [{
|
|
4246
4252
|
type: Component,
|
|
4247
|
-
args: [{ selector: 'tcloud-ui-accordion-body',
|
|
4253
|
+
args: [{ selector: 'tcloud-ui-accordion-body', animations: [
|
|
4254
|
+
trigger('expandAccordion', [
|
|
4255
|
+
state('close', style({ height: '0' })),
|
|
4256
|
+
state('open', style({ height: '*' })),
|
|
4257
|
+
transition('close <=> open', animate('0.35s ease-in-out')),
|
|
4258
|
+
]),
|
|
4259
|
+
], template: "<div class=\"tc-accordion-content\" [class.show]=\"show\" [@expandAccordion]=\"(show) ? 'open' : 'close' \">\n <ng-content></ng-content>\n</div>", styles: [".show{display:block!important;padding-top:15px;padding-bottom:15px}.tc-accordion-content{overflow:hidden}\n"] }]
|
|
4248
4260
|
}], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; } });
|
|
4249
4261
|
|
|
4250
4262
|
class TCloudUiAccordionModule {
|
|
@@ -4906,10 +4918,10 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4906
4918
|
}
|
|
4907
4919
|
}
|
|
4908
4920
|
TCloudUiMultiplesValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4909
|
-
TCloudUiMultiplesValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", 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\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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 \n </tr>\n </table> \n </td>\n <td style=\"width: 50px;\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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 </td>\n </tr>\n </table>\n\n <!-- <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.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%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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: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", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] });
|
|
4921
|
+
TCloudUiMultiplesValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", 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\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\" (keydown.enter)=\"add_items()\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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 \n </tr>\n </table> \n </td>\n <td style=\"width: 50px;\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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 </td>\n </tr>\n </table>\n\n <!-- <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.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%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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: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", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] });
|
|
4910
4922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
4911
4923
|
type: Component,
|
|
4912
|
-
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\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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 \n </tr>\n </table> \n </td>\n <td style=\"width: 50px;\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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 </td>\n </tr>\n </table>\n\n <!-- <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.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%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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: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"] }]
|
|
4924
|
+
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\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\" (keydown.enter)=\"add_items()\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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 \n </tr>\n </table> \n </td>\n <td style=\"width: 50px;\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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 </td>\n </tr>\n </table>\n\n <!-- <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).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 </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\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=\"!listItems || !(listItems && (listItems).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=\"listItems && (listItems).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-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.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%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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: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"] }]
|
|
4913
4925
|
}], ctorParameters: function () { return []; }, propDecorators: { listItems: [{
|
|
4914
4926
|
type: Input
|
|
4915
4927
|
}], delimiter: [{
|