ui-core-abv 0.8.2 → 0.8.5
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/fesm2022/ui-core-abv.mjs +93 -20
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/dynamic-form/form-wrapper/form-wrapper.component.d.ts +7 -0
- package/lib/components/user-formbuilder/form-preview/form-preview.component.d.ts +4 -1
- package/lib/components/user-formbuilder/user-formbuilder.component.d.ts +1 -0
- package/package.json +1 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -2704,7 +2704,7 @@ class UicSearcherComponent extends base$7 {
|
|
|
2704
2704
|
useExisting: forwardRef(() => UicSearcherComponent),
|
|
2705
2705
|
multi: true
|
|
2706
2706
|
}
|
|
2707
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder | uicTranslate\"\r\n />\r\n </div> \r\n @if (!disabled) {\r\n @if (manualSearch) {\r\n <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ui-input-wrapper>\r\n \r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }] });
|
|
2707
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} \" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder | uicTranslate\"\r\n />\r\n </div> \r\n @if (!disabled) {\r\n @if (manualSearch) {\r\n <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ui-input-wrapper>\r\n \r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }] });
|
|
2708
2708
|
}
|
|
2709
2709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
|
|
2710
2710
|
type: Component,
|
|
@@ -2714,7 +2714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2714
2714
|
useExisting: forwardRef(() => UicSearcherComponent),
|
|
2715
2715
|
multi: true
|
|
2716
2716
|
}
|
|
2717
|
-
], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n
|
|
2717
|
+
], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\r\n <div class=\"fakeinput-wrapp\" >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} \" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder | uicTranslate\"\r\n />\r\n </div> \r\n @if (!disabled) {\r\n @if (manualSearch) {\r\n <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ui-input-wrapper>\r\n \r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2718
2718
|
}], propDecorators: { icon: [{
|
|
2719
2719
|
type: Input
|
|
2720
2720
|
}], iconColor: [{
|
|
@@ -4834,6 +4834,8 @@ class UicFormWrapperComponent {
|
|
|
4834
4834
|
optionSourceSubs = new Map();
|
|
4835
4835
|
optionSourceDependencyValueByField = new Map();
|
|
4836
4836
|
computedFieldSubs = new Map();
|
|
4837
|
+
computedFieldDependencySignatureByField = new Map();
|
|
4838
|
+
computedExternalValidationLastValue = new Map();
|
|
4837
4839
|
hasFocusedCurrentTrigger = false;
|
|
4838
4840
|
ngOnInit() {
|
|
4839
4841
|
this.syncEffectiveSchema();
|
|
@@ -4871,6 +4873,7 @@ class UicFormWrapperComponent {
|
|
|
4871
4873
|
this.updateOptionsSources(true);
|
|
4872
4874
|
}
|
|
4873
4875
|
if (changes['computedFieldResolver'] && !changes['computedFieldResolver'].firstChange) {
|
|
4876
|
+
this.computedFieldDependencySignatureByField.clear();
|
|
4874
4877
|
this.resolveComputedFields();
|
|
4875
4878
|
}
|
|
4876
4879
|
if (changes['externalValidatorResolver'] && !changes['externalValidatorResolver'].firstChange) {
|
|
@@ -5408,6 +5411,8 @@ class UicFormWrapperComponent {
|
|
|
5408
5411
|
clearComputedFieldSubs() {
|
|
5409
5412
|
this.computedFieldSubs.forEach(sub => sub.unsubscribe());
|
|
5410
5413
|
this.computedFieldSubs.clear();
|
|
5414
|
+
this.computedFieldDependencySignatureByField.clear();
|
|
5415
|
+
this.computedExternalValidationLastValue.clear();
|
|
5411
5416
|
}
|
|
5412
5417
|
clearExternalValidationSubs() {
|
|
5413
5418
|
for (const fieldName of this.externalValidationLastValue.keys()) {
|
|
@@ -5550,32 +5555,36 @@ class UicFormWrapperComponent {
|
|
|
5550
5555
|
if (field.computeFn) {
|
|
5551
5556
|
try {
|
|
5552
5557
|
const result = field.computeFn(values);
|
|
5553
|
-
|
|
5554
|
-
hasSyncChange = true;
|
|
5558
|
+
hasSyncChange = this.applyComputedFieldValue(field, control, result) || hasSyncChange;
|
|
5555
5559
|
}
|
|
5556
5560
|
catch { /* ignorar errores del consumidor */ }
|
|
5557
|
-
|
|
5558
|
-
this.onFieldBlur(field.name);
|
|
5559
|
-
}
|
|
5561
|
+
this.validateComputedFieldIfValueChanged(field, control);
|
|
5560
5562
|
return;
|
|
5561
5563
|
}
|
|
5562
5564
|
// Opción A: computedSource + resolver declarativo
|
|
5563
5565
|
if (field.computedSource && this.computedFieldResolver) {
|
|
5566
|
+
const dependencySignature = this.getComputedFieldDependencySignature(field, values);
|
|
5567
|
+
if (this.computedFieldDependencySignatureByField.get(field.name) === dependencySignature) {
|
|
5568
|
+
return;
|
|
5569
|
+
}
|
|
5564
5570
|
this.computedFieldSubs.get(field.name)?.unsubscribe();
|
|
5571
|
+
this.computedFieldDependencySignatureByField.set(field.name, dependencySignature);
|
|
5565
5572
|
try {
|
|
5566
5573
|
const raw = this.computedFieldResolver(field.computedSource, { field, values });
|
|
5567
5574
|
const sub = this.toComputedObservable(raw).subscribe({
|
|
5568
5575
|
next: value => {
|
|
5569
|
-
|
|
5570
|
-
|
|
5571
|
-
|
|
5572
|
-
this.onFieldBlur(field.name);
|
|
5576
|
+
const changed = this.applyComputedFieldValue(field, control, value);
|
|
5577
|
+
if (changed) {
|
|
5578
|
+
this.handleFormChange();
|
|
5573
5579
|
}
|
|
5580
|
+
this.validateComputedFieldIfValueChanged(field, control);
|
|
5574
5581
|
}
|
|
5575
5582
|
});
|
|
5576
5583
|
this.computedFieldSubs.set(field.name, sub);
|
|
5577
5584
|
}
|
|
5578
|
-
catch {
|
|
5585
|
+
catch {
|
|
5586
|
+
this.computedFieldDependencySignatureByField.delete(field.name);
|
|
5587
|
+
}
|
|
5579
5588
|
}
|
|
5580
5589
|
});
|
|
5581
5590
|
// Emitir un solo formChange luego de resolver todos los campos síncronos
|
|
@@ -5584,6 +5593,48 @@ class UicFormWrapperComponent {
|
|
|
5584
5593
|
}
|
|
5585
5594
|
this.resolveRepeaterComputedFields();
|
|
5586
5595
|
}
|
|
5596
|
+
applyComputedFieldValue(field, control, value) {
|
|
5597
|
+
if (this.areEquivalentValues(control.value, value)) {
|
|
5598
|
+
return false;
|
|
5599
|
+
}
|
|
5600
|
+
control.setValue(value, { emitEvent: false });
|
|
5601
|
+
control.updateValueAndValidity({ onlySelf: true, emitEvent: false });
|
|
5602
|
+
this.clearComputedExternalValidationTracking(field.name);
|
|
5603
|
+
return true;
|
|
5604
|
+
}
|
|
5605
|
+
validateComputedFieldIfValueChanged(field, control) {
|
|
5606
|
+
if (!field.externalValidation?.key)
|
|
5607
|
+
return;
|
|
5608
|
+
const currentValue = control.value;
|
|
5609
|
+
if (this.computedExternalValidationLastValue.has(field.name) &&
|
|
5610
|
+
this.areEquivalentValues(this.computedExternalValidationLastValue.get(field.name), currentValue)) {
|
|
5611
|
+
return;
|
|
5612
|
+
}
|
|
5613
|
+
this.computedExternalValidationLastValue.set(field.name, currentValue);
|
|
5614
|
+
this.onFieldBlur(field.name);
|
|
5615
|
+
}
|
|
5616
|
+
clearComputedExternalValidationTracking(fieldName) {
|
|
5617
|
+
this.computedExternalValidationLastValue.delete(fieldName);
|
|
5618
|
+
}
|
|
5619
|
+
getComputedFieldDependencySignature(field, values) {
|
|
5620
|
+
const source = field.computedSource;
|
|
5621
|
+
if (!source?.dependsOn?.length) {
|
|
5622
|
+
return this.safeStringify({ key: source?.key ?? '', values });
|
|
5623
|
+
}
|
|
5624
|
+
return this.safeStringify({
|
|
5625
|
+
key: source.key,
|
|
5626
|
+
dependsOn: source.dependsOn.map(path => [path, this.getValueByPath(values, path)])
|
|
5627
|
+
});
|
|
5628
|
+
}
|
|
5629
|
+
areEquivalentValues(a, b) {
|
|
5630
|
+
if (Object.is(a, b))
|
|
5631
|
+
return true;
|
|
5632
|
+
const aIsObject = a !== null && typeof a === 'object';
|
|
5633
|
+
const bIsObject = b !== null && typeof b === 'object';
|
|
5634
|
+
if (!aIsObject || !bIsObject)
|
|
5635
|
+
return false;
|
|
5636
|
+
return this.safeStringify(a) === this.safeStringify(b);
|
|
5637
|
+
}
|
|
5587
5638
|
toComputedObservable(value) {
|
|
5588
5639
|
if (isObservable(value))
|
|
5589
5640
|
return value;
|
|
@@ -9577,7 +9628,7 @@ const FIELDS_CONFIG = [
|
|
|
9577
9628
|
{ value: 'searcher', icon: 'ri-seo-line', detail: 'Buscador con fuente de datos externa', label: 'Buscador', properties: ['placeholder', 'optionsSource.key', 'optionsSource.idField', 'optionsSource.textField', 'optionsSource.textTemplate', 'optionsSource.dependsOn', 'optionsSource.paramName'], visibility: { outputType: 'object', operators: ['isEmpty', 'isNotEmpty'] } },
|
|
9578
9629
|
{ value: 'slider', icon: 'ri-equalizer-2-line', detail: 'Control deslizante continuo', label: 'Deslizador', properties: ['min', 'max', 'sliderInterval', 'sliderMarks'], visibility: { outputType: 'number', operators: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'isEmpty', 'isNotEmpty'] } },
|
|
9579
9630
|
{ value: 'repeater', icon: 'ri-stack-line', detail: 'Grupo de campos repetibles', label: 'Repetidor', properties: ['repeaterMinItems', 'repeaterMaxItems', 'repeaterAddLabel', 'repeaterRemoveLabel', 'repeaterItemTitle'], visibility: { outputType: 'object[]', operators: ['isEmpty', 'isNotEmpty'] } },
|
|
9580
|
-
{ value: 'computed', icon: 'ri-calculator-line', detail: 'Campo calculado automáticamente desde otros campos', label: 'Campo calculado', properties: ['computedSource.key', 'computedSource.dependsOn'], visibility: { outputType: 'string', operators: ['equals', 'notEquals', 'includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } }
|
|
9631
|
+
{ value: 'computed', icon: 'ri-calculator-line', detail: 'Campo calculado automáticamente desde otros campos', label: 'Campo calculado', properties: ['computedSource.key', 'computedSource.dependsOn', 'minLength', 'maxLength'], visibility: { outputType: 'string', operators: ['equals', 'notEquals', 'includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } }
|
|
9581
9632
|
];
|
|
9582
9633
|
const EXTERNAL_VALIDATION_FORM_FIELDS = [
|
|
9583
9634
|
{
|
|
@@ -10119,21 +10170,23 @@ class FormPreviewComponent {
|
|
|
10119
10170
|
schema = { cols: 2, blocks: [] };
|
|
10120
10171
|
selectOptionsResolver;
|
|
10121
10172
|
computedFieldResolver;
|
|
10173
|
+
externalValidatorResolver;
|
|
10122
10174
|
constructor(data) {
|
|
10123
10175
|
this.data = data;
|
|
10124
10176
|
this.schema = data.schema;
|
|
10125
10177
|
this.selectOptionsResolver = data.selectOptionsResolver;
|
|
10126
10178
|
this.computedFieldResolver = data.computedFieldResolver;
|
|
10179
|
+
this.externalValidatorResolver = data.externalValidatorResolver;
|
|
10127
10180
|
}
|
|
10128
10181
|
save(fr) {
|
|
10129
10182
|
console.log(fr.form);
|
|
10130
10183
|
}
|
|
10131
10184
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
10132
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \n [schema]=\"schema\" \n [selectOptionsResolver]=\"selectOptionsResolver\"\n [computedFieldResolver]=\"computedFieldResolver\"\n (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }] });
|
|
10185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \n [schema]=\"schema\" \n [selectOptionsResolver]=\"selectOptionsResolver\"\n [computedFieldResolver]=\"computedFieldResolver\"\n [externalValidatorResolver]=\"externalValidatorResolver\"\n (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }] });
|
|
10133
10186
|
}
|
|
10134
10187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, decorators: [{
|
|
10135
10188
|
type: Component,
|
|
10136
|
-
args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent], template: "<ui-form-wrapper \n [schema]=\"schema\" \n [selectOptionsResolver]=\"selectOptionsResolver\"\n [computedFieldResolver]=\"computedFieldResolver\"\n (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n" }]
|
|
10189
|
+
args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent], template: "<ui-form-wrapper \n [schema]=\"schema\" \n [selectOptionsResolver]=\"selectOptionsResolver\"\n [computedFieldResolver]=\"computedFieldResolver\"\n [externalValidatorResolver]=\"externalValidatorResolver\"\n (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n" }]
|
|
10137
10190
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10138
10191
|
type: Inject,
|
|
10139
10192
|
args: [MODAL_DATA]
|
|
@@ -10198,7 +10251,7 @@ class FieldEditorComponent {
|
|
|
10198
10251
|
hasExternalOptionsSource = computed(() => !!this.localField().optionsSource?.key);
|
|
10199
10252
|
isRepeater = computed(() => this.fieldType()?.value === 'repeater');
|
|
10200
10253
|
isComputed = computed(() => this.fieldType()?.value === 'computed');
|
|
10201
|
-
hasExternalValidation = computed(() => !this.isRepeater()
|
|
10254
|
+
hasExternalValidation = computed(() => !this.isRepeater());
|
|
10202
10255
|
config = input.required();
|
|
10203
10256
|
focusRequiredField = input(false);
|
|
10204
10257
|
isSubField = input(false);
|
|
@@ -10861,6 +10914,7 @@ class UicUserFormbuilderComponent {
|
|
|
10861
10914
|
.map(field => ({
|
|
10862
10915
|
id: field.code,
|
|
10863
10916
|
text: field.fieldData.label || field.fieldData.name,
|
|
10917
|
+
fieldType: field.fieldData.type,
|
|
10864
10918
|
group: multiBlock ? (block.title || `Bloque ${block.order}`) : undefined,
|
|
10865
10919
|
})));
|
|
10866
10920
|
return {
|
|
@@ -10884,6 +10938,7 @@ class UicUserFormbuilderComponent {
|
|
|
10884
10938
|
.map(sf => ({
|
|
10885
10939
|
id: sf.code,
|
|
10886
10940
|
text: sf.fieldData.label || sf.fieldData.name,
|
|
10941
|
+
fieldType: sf.fieldData.type,
|
|
10887
10942
|
group: 'Campos del repetidor',
|
|
10888
10943
|
}));
|
|
10889
10944
|
const parentNonRepeaterOptions = this.editableBlocks()
|
|
@@ -10892,6 +10947,7 @@ class UicUserFormbuilderComponent {
|
|
|
10892
10947
|
.map(f => ({
|
|
10893
10948
|
id: f.code,
|
|
10894
10949
|
text: f.fieldData.label || f.fieldData.name,
|
|
10950
|
+
fieldType: f.fieldData.type,
|
|
10895
10951
|
group: 'Campos del formulario',
|
|
10896
10952
|
}));
|
|
10897
10953
|
const fieldOptions = [...siblingOptions, ...parentNonRepeaterOptions];
|
|
@@ -11073,7 +11129,8 @@ class UicUserFormbuilderComponent {
|
|
|
11073
11129
|
subtitleMargin: this.editableSubtitleMargin() ?? undefined
|
|
11074
11130
|
}),
|
|
11075
11131
|
selectOptionsResolver: this.selectOptionsResolver,
|
|
11076
|
-
computedFieldResolver: this.computedFieldResolver
|
|
11132
|
+
computedFieldResolver: this.computedFieldResolver,
|
|
11133
|
+
externalValidatorResolver: this.externalValidatorResolver
|
|
11077
11134
|
},
|
|
11078
11135
|
title: 'Preview',
|
|
11079
11136
|
size: 'medium'
|
|
@@ -11321,18 +11378,34 @@ class UicUserFormbuilderComponent {
|
|
|
11321
11378
|
prepareFieldDataForSubmit(fieldData) {
|
|
11322
11379
|
const cleanFieldData = this.removeNullProperties(fieldData);
|
|
11323
11380
|
const optionsSource = cleanFieldData.optionsSource;
|
|
11381
|
+
const externalValidation = cleanFieldData.externalValidation;
|
|
11324
11382
|
if (!optionsSource) {
|
|
11325
|
-
return cleanFieldData;
|
|
11383
|
+
return this.cleanExternalValidationConfig(cleanFieldData, externalValidation);
|
|
11326
11384
|
}
|
|
11327
11385
|
const cleanOptionsSource = Object.fromEntries(Object.entries(optionsSource)
|
|
11328
11386
|
.filter(([, value]) => value !== null && value !== undefined && value !== ''));
|
|
11329
11387
|
if (!cleanOptionsSource['key']) {
|
|
11330
11388
|
const { optionsSource: _optionsSource, ...restFieldData } = cleanFieldData;
|
|
11331
|
-
return restFieldData;
|
|
11389
|
+
return this.cleanExternalValidationConfig(restFieldData, externalValidation);
|
|
11332
11390
|
}
|
|
11333
|
-
return {
|
|
11391
|
+
return this.cleanExternalValidationConfig({
|
|
11334
11392
|
...cleanFieldData,
|
|
11335
11393
|
optionsSource: cleanOptionsSource
|
|
11394
|
+
}, externalValidation);
|
|
11395
|
+
}
|
|
11396
|
+
cleanExternalValidationConfig(fieldData, externalValidation) {
|
|
11397
|
+
if (!externalValidation) {
|
|
11398
|
+
return fieldData;
|
|
11399
|
+
}
|
|
11400
|
+
const cleanExternalValidation = Object.fromEntries(Object.entries(externalValidation)
|
|
11401
|
+
.filter(([, value]) => value !== null && value !== undefined && value !== ''));
|
|
11402
|
+
if (!cleanExternalValidation['key']) {
|
|
11403
|
+
const { externalValidation: _externalValidation, ...restFieldData } = fieldData;
|
|
11404
|
+
return restFieldData;
|
|
11405
|
+
}
|
|
11406
|
+
return {
|
|
11407
|
+
...fieldData,
|
|
11408
|
+
externalValidation: cleanExternalValidation
|
|
11336
11409
|
};
|
|
11337
11410
|
}
|
|
11338
11411
|
deepClone(value) {
|