@dev-tcloud/tcloud-ui 0.1.9 → 0.1.11
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-datepicker-time/tcloud-ui-datepicker-time.component.mjs +2 -2
- package/esm2020/lib/_modules/tcloud-ui-filters/components/range-date/range-date.component.mjs +11 -8
- package/esm2020/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.mjs +10 -2
- package/esm2020/lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component.mjs +3 -21
- package/esm2020/lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component.mjs +3 -21
- package/esm2020/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.mjs +19 -21
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +42 -69
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +42 -69
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-filters/components/range-date/range-date.component.d.ts +1 -1
- package/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.d.ts +1 -0
- package/lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component.d.ts +0 -3
- package/lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component.d.ts +0 -3
- package/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.d.ts +3 -4
- package/package.json +1 -1
- package/scss/tcloud/custom/card.scss +1 -1
- package/scss/tcloud/custom/forms.scss +2 -2
|
@@ -1093,32 +1093,14 @@ class TCloudUiMultiSelectComponent {
|
|
|
1093
1093
|
}
|
|
1094
1094
|
return null;
|
|
1095
1095
|
}
|
|
1096
|
-
item_width(text) {
|
|
1097
|
-
const value = `${text}`;
|
|
1098
|
-
const value_len = (value).length;
|
|
1099
|
-
let max_width = 155;
|
|
1100
|
-
if (value_len < 15) {
|
|
1101
|
-
max_width = 138;
|
|
1102
|
-
}
|
|
1103
|
-
if (value_len < 10) {
|
|
1104
|
-
max_width = 105;
|
|
1105
|
-
}
|
|
1106
|
-
if (value_len < 8) {
|
|
1107
|
-
max_width = 85;
|
|
1108
|
-
}
|
|
1109
|
-
if (value_len < 5) {
|
|
1110
|
-
max_width = 70;
|
|
1111
|
-
}
|
|
1112
|
-
return { 'max-width': max_width + 'px' };
|
|
1113
|
-
}
|
|
1114
1096
|
ngOnDestroy() {
|
|
1115
1097
|
}
|
|
1116
1098
|
}
|
|
1117
1099
|
TCloudUiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1118
|
-
TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8, CUSTOM_INPUT_VALIDATORS$3], ngImport: i0, template: "\r\n <div class=\"tcloud-ui-multi-select\">\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\"
|
|
1100
|
+
TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8, CUSTOM_INPUT_VALIDATORS$3], ngImport: i0, template: "\r\n <div class=\"tcloud-ui-multi-select\">\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.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-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1119
1101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
|
|
1120
1102
|
type: Component,
|
|
1121
|
-
args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8, CUSTOM_INPUT_VALIDATORS$3], template: "\r\n <div class=\"tcloud-ui-multi-select\">\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\"
|
|
1103
|
+
args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8, CUSTOM_INPUT_VALIDATORS$3], template: "\r\n <div class=\"tcloud-ui-multi-select\">\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n class=\"tc-form-control\"\r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \r\n #_select\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n <option></option>\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.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-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
|
|
1122
1104
|
}], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
|
|
1123
1105
|
type: Input
|
|
1124
1106
|
}], placeholder: [{
|
|
@@ -1824,32 +1806,14 @@ class TCloudUiMultiInputComponent {
|
|
|
1824
1806
|
}
|
|
1825
1807
|
return null;
|
|
1826
1808
|
}
|
|
1827
|
-
item_width(text) {
|
|
1828
|
-
const value = `${text}`;
|
|
1829
|
-
const value_len = (value).length;
|
|
1830
|
-
let max_width = 155;
|
|
1831
|
-
if (value_len < 15) {
|
|
1832
|
-
max_width = 138;
|
|
1833
|
-
}
|
|
1834
|
-
if (value_len < 10) {
|
|
1835
|
-
max_width = 105;
|
|
1836
|
-
}
|
|
1837
|
-
if (value_len < 8) {
|
|
1838
|
-
max_width = 85;
|
|
1839
|
-
}
|
|
1840
|
-
if (value_len < 5) {
|
|
1841
|
-
max_width = 70;
|
|
1842
|
-
}
|
|
1843
|
-
return { 'max-width': max_width + 'px' };
|
|
1844
|
-
}
|
|
1845
1809
|
ngOnDestroy() {
|
|
1846
1810
|
}
|
|
1847
1811
|
}
|
|
1848
1812
|
TCloudUiMultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1849
|
-
TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n <table>\r\n <tr>\r\n <td>\r\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(input_value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n \r\n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n \r\n <div class=\"box-label\"
|
|
1813
|
+
TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n <table>\r\n <tr>\r\n <td>\r\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(input_value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n \r\n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n \r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\" >\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n \r\n</div>\r\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1850
1814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
|
|
1851
1815
|
type: Component,
|
|
1852
|
-
args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$2], template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n <table>\r\n <tr>\r\n <td>\r\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(input_value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n \r\n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n \r\n <div class=\"box-label\"
|
|
1816
|
+
args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$2], template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n <table>\r\n <tr>\r\n <td>\r\n <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n </td>\r\n <td>\r\n <button\r\n [disabled]=\"!item_value || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(input_value);onChangeTouched()\"\r\n type=\"button\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n </td>\r\n </tr>\r\n </table>\r\n \r\n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n \r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\" >\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\r\n <button\r\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Remover\"\r\n type=\"button\"\r\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n \r\n</div>\r\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
|
|
1853
1817
|
}], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
|
|
1854
1818
|
type: Input
|
|
1855
1819
|
}], placeholder: [{
|
|
@@ -3142,7 +3106,7 @@ class TCloudUiDatepickerTimeComponent {
|
|
|
3142
3106
|
if (mm === '00') {
|
|
3143
3107
|
this.MM = mm;
|
|
3144
3108
|
}
|
|
3145
|
-
const notation = '
|
|
3109
|
+
const notation = '00';
|
|
3146
3110
|
const str_date = `${ano}-${mes}-${dia}T${hh}:${mm}:${notation}`;
|
|
3147
3111
|
const datetime = new Date(str_date);
|
|
3148
3112
|
if (this.checkIsDate(datetime)) {
|
|
@@ -3418,8 +3382,8 @@ class TCloudUiRangeDateComponent {
|
|
|
3418
3382
|
}
|
|
3419
3383
|
if (filter_date) {
|
|
3420
3384
|
this.result = {
|
|
3421
|
-
start: this.
|
|
3422
|
-
stop: this.
|
|
3385
|
+
start: this.getTransformDate(filter_date),
|
|
3386
|
+
stop: this.getTransformDate(now)
|
|
3423
3387
|
};
|
|
3424
3388
|
this.onChange.emit(this.result);
|
|
3425
3389
|
this.isValid = true;
|
|
@@ -3430,19 +3394,22 @@ class TCloudUiRangeDateComponent {
|
|
|
3430
3394
|
this.isValid = false;
|
|
3431
3395
|
}
|
|
3432
3396
|
}
|
|
3433
|
-
|
|
3397
|
+
getTransformDate(dt) {
|
|
3398
|
+
//return (dt).toLocaleString('pt-BR');
|
|
3399
|
+
return dt;
|
|
3400
|
+
/*
|
|
3434
3401
|
const ano = dt.getFullYear();
|
|
3435
3402
|
const mes = dt.getMonth();
|
|
3436
3403
|
const dia = dt.getDate();
|
|
3437
3404
|
const horas = dt.getHours();
|
|
3438
3405
|
const minutos = dt.getMinutes();
|
|
3439
|
-
|
|
3440
|
-
|
|
3406
|
+
return new Date(Date.UTC(ano, mes, dia, horas, minutos));
|
|
3407
|
+
*/
|
|
3441
3408
|
}
|
|
3442
3409
|
onChangeStartDateTime(event) {
|
|
3443
3410
|
this.isValid = false;
|
|
3444
3411
|
if (this.result && this.result.start) {
|
|
3445
|
-
this.result.start = event.value;
|
|
3412
|
+
this.result.start = event.value = this.getTransformDate(event.value);
|
|
3446
3413
|
this.onChange.emit(this.result);
|
|
3447
3414
|
this.isValid = true;
|
|
3448
3415
|
}
|
|
@@ -3454,7 +3421,7 @@ class TCloudUiRangeDateComponent {
|
|
|
3454
3421
|
onChangeStopDateTime(event) {
|
|
3455
3422
|
this.isValid = false;
|
|
3456
3423
|
if (this.result && this.result.stop) {
|
|
3457
|
-
this.result.
|
|
3424
|
+
this.result.stop = event.value = this.getTransformDate(event.value);
|
|
3458
3425
|
this.onChange.emit(this.result);
|
|
3459
3426
|
this.isValid = true;
|
|
3460
3427
|
}
|
|
@@ -3653,7 +3620,6 @@ class TCloudUiFiltersComponent {
|
|
|
3653
3620
|
this.searchIn(filter, 'sync');
|
|
3654
3621
|
});
|
|
3655
3622
|
}
|
|
3656
|
-
// this.toResult();
|
|
3657
3623
|
if (!this.useOnChangeSubmit) {
|
|
3658
3624
|
this.result_accept(this.data);
|
|
3659
3625
|
}
|
|
@@ -3824,6 +3790,15 @@ class TCloudUiFiltersComponent {
|
|
|
3824
3790
|
this.emitSubmitFilters();
|
|
3825
3791
|
}
|
|
3826
3792
|
}
|
|
3793
|
+
getDateUTC(dt) {
|
|
3794
|
+
const ano = dt.getFullYear();
|
|
3795
|
+
const mes = dt.getMonth();
|
|
3796
|
+
const dia = dt.getDate();
|
|
3797
|
+
const horas = dt.getHours();
|
|
3798
|
+
const minutos = dt.getMinutes();
|
|
3799
|
+
const segundos = dt.getSeconds();
|
|
3800
|
+
return new Date(Date.UTC(ano, mes, dia, horas, minutos, segundos));
|
|
3801
|
+
}
|
|
3827
3802
|
start_filter() {
|
|
3828
3803
|
for (let i = 0; i < (this.data).length; i++) {
|
|
3829
3804
|
this.setDataIndex(i, true);
|
|
@@ -4776,6 +4751,7 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4776
4751
|
this.show_itens = false;
|
|
4777
4752
|
this.input_items = '';
|
|
4778
4753
|
this.items = [];
|
|
4754
|
+
this.pattern = null;
|
|
4779
4755
|
this.delimiter = ',';
|
|
4780
4756
|
this.placeholder = '';
|
|
4781
4757
|
this.disabled = false;
|
|
@@ -4814,24 +4790,6 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4814
4790
|
remove_duplicates(items) {
|
|
4815
4791
|
return [...new Set(items)];
|
|
4816
4792
|
}
|
|
4817
|
-
item_width(text) {
|
|
4818
|
-
const value = `${text}`;
|
|
4819
|
-
const value_len = (value).length;
|
|
4820
|
-
let max_width = 155;
|
|
4821
|
-
if (value_len < 15) {
|
|
4822
|
-
max_width = 138;
|
|
4823
|
-
}
|
|
4824
|
-
if (value_len < 10) {
|
|
4825
|
-
max_width = 105;
|
|
4826
|
-
}
|
|
4827
|
-
if (value_len < 8) {
|
|
4828
|
-
max_width = 85;
|
|
4829
|
-
}
|
|
4830
|
-
if (value_len < 5) {
|
|
4831
|
-
max_width = 70;
|
|
4832
|
-
}
|
|
4833
|
-
return { 'max-width': max_width + 'px' };
|
|
4834
|
-
}
|
|
4835
4793
|
add_items_by_data_list(e) {
|
|
4836
4794
|
this.input_items = e;
|
|
4837
4795
|
this.add_items();
|
|
@@ -4982,6 +4940,19 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
4982
4940
|
}
|
|
4983
4941
|
}
|
|
4984
4942
|
}
|
|
4943
|
+
toEnterKey(input_items) {
|
|
4944
|
+
if (!input_items) {
|
|
4945
|
+
return;
|
|
4946
|
+
}
|
|
4947
|
+
let valid = true;
|
|
4948
|
+
if (this.pattern) {
|
|
4949
|
+
valid = (this.pattern).test(this.input_items);
|
|
4950
|
+
}
|
|
4951
|
+
if (valid) {
|
|
4952
|
+
this.add_items();
|
|
4953
|
+
this.toOpen();
|
|
4954
|
+
}
|
|
4955
|
+
}
|
|
4985
4956
|
onChangeTouched() {
|
|
4986
4957
|
this.onTouchedCallback();
|
|
4987
4958
|
}
|
|
@@ -5032,12 +5003,14 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5032
5003
|
}
|
|
5033
5004
|
}
|
|
5034
5005
|
TCloudUiMultiplesValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5035
|
-
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$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\" (keydown.enter)=\"add_items()\">\r\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>\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=\"form-control 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 \r\n </tr>\r\n </table> \r\n </td>\r\n <td style=\"width: 50px;\">\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=\"form-control 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\">\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]=\"item_width(item)\">\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}.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: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(--white);color:var(--tc-primary);padding:8px 15px 10px;border:1px solid var(--tc-primary);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: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);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 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}\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"] }] });
|
|
5006
|
+
TCloudUiMultiplesValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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" }, 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=\"form-control 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\" 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=\"form-control 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\">\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}.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;background-color:var(--white);color:var(--tc-gray-500);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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"] }] });
|
|
5036
5007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
5037
5008
|
type: Component,
|
|
5038
|
-
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\" (keydown.enter)=\"add_items()\">\r\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>\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=\"form-control 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 \r\n </tr>\r\n </table> \r\n </td>\r\n <td style=\"width: 50px;\">\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=\"form-control 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\">\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]=\"item_width(item)\">\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}.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: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(--white);color:var(--tc-primary);padding:8px 15px 10px;border:1px solid var(--tc-primary);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: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);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 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}\n"] }]
|
|
5009
|
+
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=\"form-control 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\" 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=\"form-control 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\">\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}.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;background-color:var(--white);color:var(--tc-gray-500);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;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}\n"] }]
|
|
5039
5010
|
}], ctorParameters: function () { return []; }, propDecorators: { listItems: [{
|
|
5040
5011
|
type: Input
|
|
5012
|
+
}], pattern: [{
|
|
5013
|
+
type: Input
|
|
5041
5014
|
}], delimiter: [{
|
|
5042
5015
|
type: Input
|
|
5043
5016
|
}], placeholder: [{
|