brainloper-ui 1.0.3 → 1.0.4

package/fesm2020/brainloper-ui.mjs

@@ -535,6 +535,7 @@ class CombosComponent {
         this.tooltipDescription = null;
         this.tooltipActive = false;
         this.changeOption = new EventEmitter();
+        this.changeOptionDataComplete = new EventEmitter();
         this.returnDataCombo = new EventEmitter();
         this.selected = new FormControl;
     }
@@ -592,8 +593,13 @@ class CombosComponent {
         });
     }
     selectedData($event) {
+        this.findData($event);
+        this.changeOption.emit($event.value);
+    }
+    findData($event) {
+        let d = this.dataCombos.find(x => x[this.configuration.selectionField] == $event.value);
+        this.changeOptionDataComplete.emit(d);
         if (this.configuration.fileTooltip) {
-            let d = this.filteredList.find(x => x[this.configuration.selectionField] == $event.value);
             if (d) {
                 this.tooltipDescription = d[this.configuration.fileTooltip];
                 this.tooltipActive = true;
@@ -609,7 +615,6 @@ class CombosComponent {
         }
         else
             this.tooltipDescription = null;
-        this.changeOption.emit($event.value);
     }
     toggleTooltip() {
         this.tooltipActive = !this.tooltipActive;
@@ -622,7 +627,7 @@ class CombosComponent {
     }
 }
 CombosComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CombosComponent, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Component });
-CombosComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: CombosComponent, selector: "combos", inputs: { dataCombos: "dataCombos", additionalData: "additionalData", configuration: "configuration", filter: "filter", checkbox: "checkbox", required: "required", disabled: "disabled", addFinal: "addFinal", appearance: "appearance", reloadCombo: "reloadCombo" }, outputs: { changeOption: "changeOption", returnDataCombo: "returnDataCombo" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: row; justify-content: space-between\">\r\n  <div class=\"combo-container\">\r\n\r\n    <mat-icon\r\n      class=\"m-1 icon-information\"\r\n      *ngIf=\"tooltipDescription\"\r\n      matTooltip=\"{{tooltipDescription}}\"\r\n      matTooltipPosition=\"above\"\r\n      #tooltip=\"matTooltip\"\r\n      (click)=\"toggleTooltip()\"\r\n      matTooltipClass=\"custom-tooltip\"\r\n     >info</mat-icon>\r\n\r\n    <mat-form-field style=\"width: 100%\" [appearance]=\"appearance\">\r\n      <mat-label style=\"text-transform: capitalize\">{{\r\n        configuration.label\r\n        }}</mat-label>\r\n      <mat-select [multiple]=\"checkbox\" (selectionChange)=\"selectedData(selected)\" [required]=\"required\"\r\n        [formControl]=\"selected\" [disabled]=\"disabled\">\r\n        <mat-select-filter *ngIf=\"filter\" [placeholder]=\"'Filter'\" [displayMember]=\"configuration.visibleField\"\r\n          [array]=\"dataCombos\" (filteredReturn)=\"filteredList = $event\">\r\n        </mat-select-filter>\r\n        <mat-option [value]=\"data[configuration.selectionField]\" *ngFor=\"let data of filteredList\">\r\n          {{ data[configuration.visibleField] }}\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"required\">Campo requerido</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".mat-form-field{width:100%}.combo-container{width:100%;display:flex;align-items:center}.icon-information{cursor:pointer;color:gray}.mat-icon{font-size:1.1rem}::ng-deep .custom-tooltip{background-color:#fbe870!important;color:#000!important;line-height:17px!important;font-size:.8rem}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatSelectFilterComponent, selector: "mat-select-filter", inputs: ["showSpinner", "noResultsMessage", "placeholder", "array", "color", "displayMember", "hasGroup", "groupArrayName"], outputs: ["filteredReturn"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i10.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
+CombosComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: CombosComponent, selector: "combos", inputs: { dataCombos: "dataCombos", additionalData: "additionalData", configuration: "configuration", filter: "filter", checkbox: "checkbox", required: "required", disabled: "disabled", addFinal: "addFinal", appearance: "appearance", reloadCombo: "reloadCombo" }, outputs: { changeOption: "changeOption", changeOptionDataComplete: "changeOptionDataComplete", returnDataCombo: "returnDataCombo" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: row; justify-content: space-between\">\r\n  <div class=\"combo-container\">\r\n\r\n    <mat-icon\r\n      class=\"m-1 icon-information\"\r\n      *ngIf=\"tooltipDescription\"\r\n      matTooltip=\"{{tooltipDescription}}\"\r\n      matTooltipPosition=\"above\"\r\n      #tooltip=\"matTooltip\"\r\n      (click)=\"toggleTooltip()\"\r\n      matTooltipClass=\"custom-tooltip\"\r\n     >info</mat-icon>\r\n\r\n    <mat-form-field style=\"width: 100%\" [appearance]=\"appearance\">\r\n      <mat-label style=\"text-transform: capitalize\">{{\r\n        configuration.label\r\n        }}</mat-label>\r\n      <mat-select [multiple]=\"checkbox\" (selectionChange)=\"selectedData(selected)\" [required]=\"required\"\r\n        [formControl]=\"selected\" [disabled]=\"disabled\">\r\n        <mat-select-filter *ngIf=\"filter\" [placeholder]=\"'Filter'\" [displayMember]=\"configuration.visibleField\"\r\n          [array]=\"dataCombos\" (filteredReturn)=\"filteredList = $event\">\r\n        </mat-select-filter>\r\n        <mat-option [value]=\"data[configuration.selectionField]\" *ngFor=\"let data of filteredList\">\r\n          {{ data[configuration.visibleField] }}\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"required\">Campo requerido</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".mat-form-field{width:100%}.combo-container{width:100%;display:flex;align-items:center}.icon-information{cursor:pointer;color:gray}.mat-icon{font-size:1.1rem}::ng-deep .custom-tooltip{background-color:#fbe870!important;color:#000!important;line-height:17px!important;font-size:.8rem}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatSelectFilterComponent, selector: "mat-select-filter", inputs: ["showSpinner", "noResultsMessage", "placeholder", "array", "color", "displayMember", "hasGroup", "groupArrayName"], outputs: ["filteredReturn"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i10.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CombosComponent, decorators: [{
             type: Component,
             args: [{ selector: 'combos', template: "<div style=\"display: flex; flex-direction: row; justify-content: space-between\">\r\n  <div class=\"combo-container\">\r\n\r\n    <mat-icon\r\n      class=\"m-1 icon-information\"\r\n      *ngIf=\"tooltipDescription\"\r\n      matTooltip=\"{{tooltipDescription}}\"\r\n      matTooltipPosition=\"above\"\r\n      #tooltip=\"matTooltip\"\r\n      (click)=\"toggleTooltip()\"\r\n      matTooltipClass=\"custom-tooltip\"\r\n     >info</mat-icon>\r\n\r\n    <mat-form-field style=\"width: 100%\" [appearance]=\"appearance\">\r\n      <mat-label style=\"text-transform: capitalize\">{{\r\n        configuration.label\r\n        }}</mat-label>\r\n      <mat-select [multiple]=\"checkbox\" (selectionChange)=\"selectedData(selected)\" [required]=\"required\"\r\n        [formControl]=\"selected\" [disabled]=\"disabled\">\r\n        <mat-select-filter *ngIf=\"filter\" [placeholder]=\"'Filter'\" [displayMember]=\"configuration.visibleField\"\r\n          [array]=\"dataCombos\" (filteredReturn)=\"filteredList = $event\">\r\n        </mat-select-filter>\r\n        <mat-option [value]=\"data[configuration.selectionField]\" *ngFor=\"let data of filteredList\">\r\n          {{ data[configuration.visibleField] }}\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"required\">Campo requerido</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".mat-form-field{width:100%}.combo-container{width:100%;display:flex;align-items:center}.icon-information{cursor:pointer;color:gray}.mat-icon{font-size:1.1rem}::ng-deep .custom-tooltip{background-color:#fbe870!important;color:#000!important;line-height:17px!important;font-size:.8rem}\n"] }]
@@ -651,6 +656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['tooltip']
             }], changeOption: [{
                 type: Output
+            }], changeOptionDataComplete: [{
+                type: Output
             }], returnDataCombo: [{
                 type: Output
             }] } });