ui-core-abv 0.10.2 → 0.10.4
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
CHANGED
|
@@ -1922,49 +1922,6 @@ class UicFileInputComponent extends base$b {
|
|
|
1922
1922
|
this.push.success('Preparando...');
|
|
1923
1923
|
}
|
|
1924
1924
|
}
|
|
1925
|
-
downloadTemplate() {
|
|
1926
|
-
if (!this.templateUrl) {
|
|
1927
|
-
return;
|
|
1928
|
-
}
|
|
1929
|
-
const fileName = this.getTemplateFileName();
|
|
1930
|
-
fetch(this.templateUrl)
|
|
1931
|
-
.then((response) => {
|
|
1932
|
-
if (!response.ok) {
|
|
1933
|
-
throw new Error('template fetch failed');
|
|
1934
|
-
}
|
|
1935
|
-
return response.blob();
|
|
1936
|
-
})
|
|
1937
|
-
.then((blob) => {
|
|
1938
|
-
const url = URL.createObjectURL(blob);
|
|
1939
|
-
const link = document.createElement('a');
|
|
1940
|
-
link.href = url;
|
|
1941
|
-
link.download = fileName;
|
|
1942
|
-
link.rel = 'noopener';
|
|
1943
|
-
document.body.appendChild(link);
|
|
1944
|
-
link.click();
|
|
1945
|
-
link.remove();
|
|
1946
|
-
setTimeout(() => URL.revokeObjectURL(url), 0);
|
|
1947
|
-
})
|
|
1948
|
-
.catch(() => {
|
|
1949
|
-
this.push.error('No se pudo renombrar el archivo, se abrirá con su nombre original');
|
|
1950
|
-
window.open(this.templateUrl, '_blank', 'noopener');
|
|
1951
|
-
});
|
|
1952
|
-
}
|
|
1953
|
-
getTemplateFileName() {
|
|
1954
|
-
const baseName = (this.label || 'formato').trim().replace(/[\\/]/g, '-');
|
|
1955
|
-
const extension = this.getUrlExtension(this.templateUrl);
|
|
1956
|
-
return extension ? `${baseName}.${extension}` : baseName;
|
|
1957
|
-
}
|
|
1958
|
-
getUrlExtension(url) {
|
|
1959
|
-
try {
|
|
1960
|
-
const pathname = new URL(url).pathname;
|
|
1961
|
-
const dotIndex = pathname.lastIndexOf('.');
|
|
1962
|
-
return dotIndex > -1 ? pathname.slice(dotIndex + 1) : '';
|
|
1963
|
-
}
|
|
1964
|
-
catch {
|
|
1965
|
-
return '';
|
|
1966
|
-
}
|
|
1967
|
-
}
|
|
1968
1925
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1969
1926
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFileInputComponent, isStandalone: true, selector: "ui-file-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", multy: "multy", fileTypes: "fileTypes", fileUidResolverFn: "fileUidResolverFn", templateUrl: "templateUrl", templateText: "templateText", templateLinkLabel: "templateLinkLabel" }, providers: [
|
|
1970
1927
|
{
|
|
@@ -1972,7 +1929,7 @@ class UicFileInputComponent extends base$b {
|
|
|
1972
1929
|
useExisting: forwardRef(() => UicFileInputComponent),
|
|
1973
1930
|
multi: true
|
|
1974
1931
|
}
|
|
1975
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<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 (templateUrl) {\r\n <div class=\"fileinput-template\">\r\n {{templateText}} <span (click)=\"downloadTemplate()\" class=\"fileinput-template__link\">{{templateLinkLabel}}</span>\r\n </div>\r\n }\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":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)}.f-white{color:var(--white)}.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", ".fileinput-template{font-size:12px;color:var(--grey-500);margin-bottom:.25rem}.fileinput-template__link{color:var(--primary-500);text-decoration:underline;cursor:pointer}.fileinput-template__link:hover{color:var(--primary-600, var(--primary-500))}.fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
|
|
1932
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<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 (templateUrl) {\r\n <div class=\"fileinput-template\">\r\n {{templateText}} <a [href]=\"templateUrl\" target=\"_blank\" rel=\"noopener\" class=\"fileinput-template__link\">{{templateLinkLabel}}</a>\r\n </div>\r\n }\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":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)}.f-white{color:var(--white)}.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", ".fileinput-template{font-size:12px;color:var(--grey-500);margin-bottom:.25rem}.fileinput-template__link{color:var(--primary-500);text-decoration:underline;cursor:pointer}.fileinput-template__link:hover{color:var(--primary-600, var(--primary-500))}.fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
|
|
1976
1933
|
}
|
|
1977
1934
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, decorators: [{
|
|
1978
1935
|
type: Component,
|
|
@@ -1982,7 +1939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1982
1939
|
useExisting: forwardRef(() => UicFileInputComponent),
|
|
1983
1940
|
multi: true
|
|
1984
1941
|
}
|
|
1985
|
-
], template: "\r\n<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 (templateUrl) {\r\n <div class=\"fileinput-template\">\r\n {{templateText}} <
|
|
1942
|
+
], template: "\r\n<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 (templateUrl) {\r\n <div class=\"fileinput-template\">\r\n {{templateText}} <a [href]=\"templateUrl\" target=\"_blank\" rel=\"noopener\" class=\"fileinput-template__link\">{{templateLinkLabel}}</a>\r\n </div>\r\n }\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":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)}.f-white{color:var(--white)}.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", ".fileinput-template{font-size:12px;color:var(--grey-500);margin-bottom:.25rem}.fileinput-template__link{color:var(--primary-500);text-decoration:underline;cursor:pointer}.fileinput-template__link:hover{color:var(--primary-600, var(--primary-500))}.fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
|
|
1986
1943
|
}], propDecorators: { icon: [{
|
|
1987
1944
|
type: Input
|
|
1988
1945
|
}], iconColor: [{
|
|
@@ -4470,6 +4427,14 @@ class UicDynamicFormComponent {
|
|
|
4470
4427
|
}
|
|
4471
4428
|
getValueByFieldName(fieldName) {
|
|
4472
4429
|
const formValues = this.formState.values();
|
|
4430
|
+
// Sub-formulario (ítem de repeater): gana el hermano. Primero se busca en el
|
|
4431
|
+
// propio ítem y, si no existe, se cae al formulario raíz. Las referencias solo
|
|
4432
|
+
// van de menor a mayor o igual ámbito (ítem -> ítem/raíz), nunca raíz -> ítem.
|
|
4433
|
+
if (this.isSubForm) {
|
|
4434
|
+
const localControl = this.formSignal()?.controls[fieldName];
|
|
4435
|
+
if (localControl)
|
|
4436
|
+
return localControl.getRawValue();
|
|
4437
|
+
}
|
|
4473
4438
|
if (Object.prototype.hasOwnProperty.call(formValues, fieldName)) {
|
|
4474
4439
|
return formValues[fieldName];
|
|
4475
4440
|
}
|
|
@@ -7604,6 +7569,9 @@ function mapEditableBlocksToBlocks(blocks, editable) {
|
|
|
7604
7569
|
}
|
|
7605
7570
|
: field.fieldData.optionsSource;
|
|
7606
7571
|
const isComputedField = field.fieldData.type === 'computed';
|
|
7572
|
+
// Los códigos sf_N se repiten entre repeaters: las reglas de un subcampo
|
|
7573
|
+
// se resuelven primero contra los hermanos de su propio repeater.
|
|
7574
|
+
const siblingCodeToName = new Map((field.repeaterSubFields ?? []).map(sf => [sf.code, sf.fieldData.name]));
|
|
7607
7575
|
return {
|
|
7608
7576
|
...field.fieldData,
|
|
7609
7577
|
type: isComputedField ? 'text' : field.fieldData.type,
|
|
@@ -7622,7 +7590,7 @@ function mapEditableBlocksToBlocks(blocks, editable) {
|
|
|
7622
7590
|
const sfIsComputed = sf.fieldData.type === 'computed';
|
|
7623
7591
|
const sfVisibilityRules = sf.fieldData.visibilityRules?.map(rule => ({
|
|
7624
7592
|
...rule,
|
|
7625
|
-
fieldName: fieldCodeToName.get(rule.fieldName) ?? rule.fieldName
|
|
7593
|
+
fieldName: siblingCodeToName.get(rule.fieldName) ?? fieldCodeToName.get(rule.fieldName) ?? rule.fieldName
|
|
7626
7594
|
}));
|
|
7627
7595
|
const sfOptionsSource = sf.fieldData.optionsSource?.dependsOn
|
|
7628
7596
|
? {
|
|
@@ -11020,7 +10988,7 @@ class FieldEditorComponent {
|
|
|
11020
10988
|
});
|
|
11021
10989
|
}
|
|
11022
10990
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, isSubField: { classPropertyName: "isSubField", publicName: "isSubField", isSignal: true, isRequired: false, transformFunction: null }, enableNameModify: { classPropertyName: "enableNameModify", publicName: "enableNameModify", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n <ui-form-wrapper\r\n #basicFormWrapper\r\n [fields]=\"requiredFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\r\n [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n @if (hasOptionsSourceConfig()) {\r\n <ui-form-wrapper\r\n [fields]=\"optionsSourceFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n @if (hasOptions() && !hasExternalOptionsSource()) {\r\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n }\r\n }\r\n @if (isComputed()) {\r\n <ui-form-wrapper\r\n [fields]=\"computedSourceFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n <ui-form-wrapper\r\n [fields]=\"advancedFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n <ui-form-wrapper\r\n [fields]=\"styleFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\"> \r\n </ui-form-wrapper>\r\n</div>\r\n\r\n@if (!isSubField() && hasExternalValidation()) {\r\n <div class=\"props-title\">{{'form_builder.field_editor.external_validation_title' | uicTranslate}} <i (click)=\"toggleSection('external_validation')\" class=\"{{hiddenSections().includes('external_validation') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i></div>\r\n <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('external_validation')\">\r\n <ui-form-wrapper\r\n [fields]=\"externalValidationFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n </div>\r\n}\r\n\r\n@if (!isSubField()) {\r\n <div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n @if (localField().visibilityRules) {\r\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n \r\n <!-- List of existing rules -->\r\n <div class=\"rules-container\">\r\n @for (rule of localField().visibilityRules; track $index) {\r\n <div class=\"rule-card\" [class.editing]=\"editingRuleIndex() === $index && !isAddingNewRule()\">\r\n <div class=\"rule-content\">\r\n <div class=\"rule-text\">\r\n <strong>{{ rule.fieldLabel || rule.fieldName }}</strong>\r\n @if (rule.operator) {\r\n <span class=\"rule-operator\">{{ 'form_builder.visibility_operators.' + rule.operator | uicTranslate }}</span>\r\n }\r\n @if (rule.value !== null && rule.value !== undefined) {\r\n <span class=\"rule-value\">{{ rule.value }}</span>\r\n }\r\n </div>\r\n </div>\r\n @if (editingRuleIndex() === -1) {\r\n <div class=\"rule-actions\">\r\n <button class=\"rule-btn edit\" (click)=\"startEditingRule($index)\" title=\"Editar\">\r\n <i class=\"ri-edit-line\"></i>\r\n </button>\r\n <button class=\"rule-btn delete\" (click)=\"removeRule($index)\" title=\"Eliminar\">\r\n <i class=\"ri-delete-bin-line\"></i>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <!-- Inline edit form for existing rule -->\r\n @if (editingRuleIndex() === $index && !isAddingNewRule()) {\r\n <div class=\"rule-editor\">\r\n <ui-form-wrapper\r\n [fields]=\"branchFields()\" \r\n [initialValues]=\"branchInitialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateRuleValue($event)\">\r\n </ui-form-wrapper>\r\n <div class=\"editor-actions\">\r\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- New rule form (only while adding) -->\r\n @if (isAddingNewRule()) {\r\n <div class=\"rule-editor new-rule\">\r\n <ui-form-wrapper\r\n [fields]=\"branchFields()\" \r\n [initialValues]=\"branchInitialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateRuleValue($event)\">\r\n </ui-form-wrapper>\r\n <div class=\"editor-actions\">\r\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Add button (hidden while editing) -->\r\n @if (editingRuleIndex() === -1) {\r\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n }\r\n } @else {\r\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n }\r\n </div>\r\n}\r\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}.rules-container{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rule-card{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--grey-300);border-radius:3px;background:var(--white);font-size:12px}.rule-card.editing{border-color:var(--primary-400, #6366f1);border-bottom:none;border-radius:3px 3px 0 0}.rule-card .rule-content{flex:1;min-width:0}.rule-card .rule-text{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rule-card .rule-text strong{font-weight:600;color:var(--grey-800)}.rule-card .rule-text .rule-operator{font-style:italic;color:var(--grey-600)}.rule-card .rule-text .rule-value{background:var(--grey-100);padding:0 3px;border-radius:2px;color:var(--grey-800)}.rule-actions{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.rule-btn{background:none;border:none;cursor:pointer;padding:2px 4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--grey-600);transition:color .2s}.rule-btn:hover{color:var(--grey-800)}.rule-btn.delete{color:var(--red-600)}.rule-btn.delete:hover{color:var(--red-800)}.rule-editor{padding:8px;border:1px solid var(--primary-400, #6366f1);border-radius:0 0 3px 3px;background:var(--grey-50);margin-bottom:6px}.rule-editor.new-rule{border-radius:3px;margin-top:4px}.editor-actions{display:flex;gap:4px;margin-top:6px}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "iconMode", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
|
|
10991
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, isSubField: { classPropertyName: "isSubField", publicName: "isSubField", isSignal: true, isRequired: false, transformFunction: null }, enableNameModify: { classPropertyName: "enableNameModify", publicName: "enableNameModify", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n <ui-form-wrapper\n #basicFormWrapper\n [fields]=\"requiredFields()\"\n [initialValues]=\"initialValues()\"\n [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptionsSourceConfig()) {\n <ui-form-wrapper\n [fields]=\"optionsSourceFields()\"\n [initialValues]=\"initialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptions() && !hasExternalOptionsSource()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n }\n }\n @if (isComputed()) {\n <ui-form-wrapper\n [fields]=\"computedSourceFields()\"\n [initialValues]=\"initialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n <ui-form-wrapper\n [fields]=\"advancedFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n <ui-form-wrapper\n [fields]=\"styleFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\"> \n </ui-form-wrapper>\n</div>\n\n@if (!isSubField() && hasExternalValidation()) {\n <div class=\"props-title\">{{'form_builder.field_editor.external_validation_title' | uicTranslate}} <i (click)=\"toggleSection('external_validation')\" class=\"{{hiddenSections().includes('external_validation') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i></div>\n <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('external_validation')\">\n <ui-form-wrapper\n [fields]=\"externalValidationFields()\"\n [initialValues]=\"initialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n </div>\n}\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n @if (localField().visibilityRules) {\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n \n <!-- List of existing rules -->\n <div class=\"rules-container\">\n @for (rule of localField().visibilityRules; track $index) {\n <div class=\"rule-card\" [class.editing]=\"editingRuleIndex() === $index && !isAddingNewRule()\">\n <div class=\"rule-content\">\n <div class=\"rule-text\">\n <strong>{{ rule.fieldLabel || rule.fieldName }}</strong>\n @if (rule.operator) {\n <span class=\"rule-operator\">{{ 'form_builder.visibility_operators.' + rule.operator | uicTranslate }}</span>\n }\n @if (rule.value !== null && rule.value !== undefined) {\n <span class=\"rule-value\">{{ rule.value }}</span>\n }\n </div>\n </div>\n @if (editingRuleIndex() === -1) {\n <div class=\"rule-actions\">\n <button class=\"rule-btn edit\" (click)=\"startEditingRule($index)\" title=\"Editar\">\n <i class=\"ri-edit-line\"></i>\n </button>\n <button class=\"rule-btn delete\" (click)=\"removeRule($index)\" title=\"Eliminar\">\n <i class=\"ri-delete-bin-line\"></i>\n </button>\n </div>\n }\n </div>\n <!-- Inline edit form for existing rule -->\n @if (editingRuleIndex() === $index && !isAddingNewRule()) {\n <div class=\"rule-editor\">\n <ui-form-wrapper\n [fields]=\"branchFields()\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <div class=\"editor-actions\">\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\n </div>\n </div>\n }\n }\n </div>\n\n <!-- New rule form (only while adding) -->\n @if (isAddingNewRule()) {\n <div class=\"rule-editor new-rule\">\n <ui-form-wrapper\n [fields]=\"branchFields()\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <div class=\"editor-actions\">\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\n </div>\n </div>\n }\n\n <!-- Add button (hidden while editing) -->\n @if (editingRuleIndex() === -1) {\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n }\n } @else {\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n }\n</div>\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}.rules-container{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rule-card{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--grey-300);border-radius:3px;background:var(--white);font-size:12px}.rule-card.editing{border-color:var(--primary-400, #6366f1);border-bottom:none;border-radius:3px 3px 0 0}.rule-card .rule-content{flex:1;min-width:0}.rule-card .rule-text{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rule-card .rule-text strong{font-weight:600;color:var(--grey-800)}.rule-card .rule-text .rule-operator{font-style:italic;color:var(--grey-600)}.rule-card .rule-text .rule-value{background:var(--grey-100);padding:0 3px;border-radius:2px;color:var(--grey-800)}.rule-actions{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.rule-btn{background:none;border:none;cursor:pointer;padding:2px 4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--grey-600);transition:color .2s}.rule-btn:hover{color:var(--grey-800)}.rule-btn.delete{color:var(--red-600)}.rule-btn.delete:hover{color:var(--red-800)}.rule-editor{padding:8px;border:1px solid var(--primary-400, #6366f1);border-radius:0 0 3px 3px;background:var(--grey-50);margin-bottom:6px}.rule-editor.new-rule{border-radius:3px;margin-top:4px}.editor-actions{display:flex;gap:4px;margin-top:6px}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "iconMode", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
|
|
11024
10992
|
}
|
|
11025
10993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
|
|
11026
10994
|
type: Component,
|
|
@@ -11029,7 +10997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
11029
10997
|
UicButtonComponent,
|
|
11030
10998
|
UicTranslatePipe,
|
|
11031
10999
|
UicFieldOptionsEditorComponent
|
|
11032
|
-
], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n <ui-form-wrapper\r\n #basicFormWrapper\r\n [fields]=\"requiredFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\r\n [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n @if (hasOptionsSourceConfig()) {\r\n <ui-form-wrapper\r\n [fields]=\"optionsSourceFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n @if (hasOptions() && !hasExternalOptionsSource()) {\r\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n }\r\n }\r\n @if (isComputed()) {\r\n <ui-form-wrapper\r\n [fields]=\"computedSourceFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n <ui-form-wrapper\r\n [fields]=\"advancedFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n <ui-form-wrapper\r\n [fields]=\"styleFields()\" \r\n [initialValues]=\"initialValues()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateFieldValues($event)\"> \r\n </ui-form-wrapper>\r\n</div>\r\n\r\n@if (!isSubField() && hasExternalValidation()) {\r\n <div class=\"props-title\">{{'form_builder.field_editor.external_validation_title' | uicTranslate}} <i (click)=\"toggleSection('external_validation')\" class=\"{{hiddenSections().includes('external_validation') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i></div>\r\n <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('external_validation')\">\r\n <ui-form-wrapper\r\n [fields]=\"externalValidationFields()\"\r\n [initialValues]=\"initialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\"\r\n (formChange)=\"updateFieldValues($event)\">\r\n </ui-form-wrapper>\r\n </div>\r\n}\r\n\r\n@if (!isSubField()) {\r\n <div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n @if (localField().visibilityRules) {\r\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n \r\n <!-- List of existing rules -->\r\n <div class=\"rules-container\">\r\n @for (rule of localField().visibilityRules; track $index) {\r\n <div class=\"rule-card\" [class.editing]=\"editingRuleIndex() === $index && !isAddingNewRule()\">\r\n <div class=\"rule-content\">\r\n <div class=\"rule-text\">\r\n <strong>{{ rule.fieldLabel || rule.fieldName }}</strong>\r\n @if (rule.operator) {\r\n <span class=\"rule-operator\">{{ 'form_builder.visibility_operators.' + rule.operator | uicTranslate }}</span>\r\n }\r\n @if (rule.value !== null && rule.value !== undefined) {\r\n <span class=\"rule-value\">{{ rule.value }}</span>\r\n }\r\n </div>\r\n </div>\r\n @if (editingRuleIndex() === -1) {\r\n <div class=\"rule-actions\">\r\n <button class=\"rule-btn edit\" (click)=\"startEditingRule($index)\" title=\"Editar\">\r\n <i class=\"ri-edit-line\"></i>\r\n </button>\r\n <button class=\"rule-btn delete\" (click)=\"removeRule($index)\" title=\"Eliminar\">\r\n <i class=\"ri-delete-bin-line\"></i>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <!-- Inline edit form for existing rule -->\r\n @if (editingRuleIndex() === $index && !isAddingNewRule()) {\r\n <div class=\"rule-editor\">\r\n <ui-form-wrapper\r\n [fields]=\"branchFields()\" \r\n [initialValues]=\"branchInitialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateRuleValue($event)\">\r\n </ui-form-wrapper>\r\n <div class=\"editor-actions\">\r\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- New rule form (only while adding) -->\r\n @if (isAddingNewRule()) {\r\n <div class=\"rule-editor new-rule\">\r\n <ui-form-wrapper\r\n [fields]=\"branchFields()\" \r\n [initialValues]=\"branchInitialValues()\"\r\n [externalData]=\"options()\"\r\n [cols]=\"1\" \r\n (formChange)=\"updateRuleValue($event)\">\r\n </ui-form-wrapper>\r\n <div class=\"editor-actions\">\r\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Add button (hidden while editing) -->\r\n @if (editingRuleIndex() === -1) {\r\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n }\r\n } @else {\r\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n }\r\n </div>\r\n}\r\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}.rules-container{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rule-card{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--grey-300);border-radius:3px;background:var(--white);font-size:12px}.rule-card.editing{border-color:var(--primary-400, #6366f1);border-bottom:none;border-radius:3px 3px 0 0}.rule-card .rule-content{flex:1;min-width:0}.rule-card .rule-text{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rule-card .rule-text strong{font-weight:600;color:var(--grey-800)}.rule-card .rule-text .rule-operator{font-style:italic;color:var(--grey-600)}.rule-card .rule-text .rule-value{background:var(--grey-100);padding:0 3px;border-radius:2px;color:var(--grey-800)}.rule-actions{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.rule-btn{background:none;border:none;cursor:pointer;padding:2px 4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--grey-600);transition:color .2s}.rule-btn:hover{color:var(--grey-800)}.rule-btn.delete{color:var(--red-600)}.rule-btn.delete:hover{color:var(--red-800)}.rule-editor{padding:8px;border:1px solid var(--primary-400, #6366f1);border-radius:0 0 3px 3px;background:var(--grey-50);margin-bottom:6px}.rule-editor.new-rule{border-radius:3px;margin-top:4px}.editor-actions{display:flex;gap:4px;margin-top:6px}\n"] }]
|
|
11000
|
+
], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n <ui-form-wrapper\n #basicFormWrapper\n [fields]=\"requiredFields()\"\n [initialValues]=\"initialValues()\"\n [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptionsSourceConfig()) {\n <ui-form-wrapper\n [fields]=\"optionsSourceFields()\"\n [initialValues]=\"initialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptions() && !hasExternalOptionsSource()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n }\n }\n @if (isComputed()) {\n <ui-form-wrapper\n [fields]=\"computedSourceFields()\"\n [initialValues]=\"initialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n <ui-form-wrapper\n [fields]=\"advancedFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n <ui-form-wrapper\n [fields]=\"styleFields()\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\"> \n </ui-form-wrapper>\n</div>\n\n@if (!isSubField() && hasExternalValidation()) {\n <div class=\"props-title\">{{'form_builder.field_editor.external_validation_title' | uicTranslate}} <i (click)=\"toggleSection('external_validation')\" class=\"{{hiddenSections().includes('external_validation') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i></div>\n <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('external_validation')\">\n <ui-form-wrapper\n [fields]=\"externalValidationFields()\"\n [initialValues]=\"initialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\"\n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n </div>\n}\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n @if (localField().visibilityRules) {\n <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n \n <!-- List of existing rules -->\n <div class=\"rules-container\">\n @for (rule of localField().visibilityRules; track $index) {\n <div class=\"rule-card\" [class.editing]=\"editingRuleIndex() === $index && !isAddingNewRule()\">\n <div class=\"rule-content\">\n <div class=\"rule-text\">\n <strong>{{ rule.fieldLabel || rule.fieldName }}</strong>\n @if (rule.operator) {\n <span class=\"rule-operator\">{{ 'form_builder.visibility_operators.' + rule.operator | uicTranslate }}</span>\n }\n @if (rule.value !== null && rule.value !== undefined) {\n <span class=\"rule-value\">{{ rule.value }}</span>\n }\n </div>\n </div>\n @if (editingRuleIndex() === -1) {\n <div class=\"rule-actions\">\n <button class=\"rule-btn edit\" (click)=\"startEditingRule($index)\" title=\"Editar\">\n <i class=\"ri-edit-line\"></i>\n </button>\n <button class=\"rule-btn delete\" (click)=\"removeRule($index)\" title=\"Eliminar\">\n <i class=\"ri-delete-bin-line\"></i>\n </button>\n </div>\n }\n </div>\n <!-- Inline edit form for existing rule -->\n @if (editingRuleIndex() === $index && !isAddingNewRule()) {\n <div class=\"rule-editor\">\n <ui-form-wrapper\n [fields]=\"branchFields()\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <div class=\"editor-actions\">\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\n </div>\n </div>\n }\n }\n </div>\n\n <!-- New rule form (only while adding) -->\n @if (isAddingNewRule()) {\n <div class=\"rule-editor new-rule\">\n <ui-form-wrapper\n [fields]=\"branchFields()\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <div class=\"editor-actions\">\n <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\n <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\n </div>\n </div>\n }\n\n <!-- Add button (hidden while editing) -->\n @if (editingRuleIndex() === -1) {\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n }\n } @else {\n <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n }\n</div>\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}.rules-container{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rule-card{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--grey-300);border-radius:3px;background:var(--white);font-size:12px}.rule-card.editing{border-color:var(--primary-400, #6366f1);border-bottom:none;border-radius:3px 3px 0 0}.rule-card .rule-content{flex:1;min-width:0}.rule-card .rule-text{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rule-card .rule-text strong{font-weight:600;color:var(--grey-800)}.rule-card .rule-text .rule-operator{font-style:italic;color:var(--grey-600)}.rule-card .rule-text .rule-value{background:var(--grey-100);padding:0 3px;border-radius:2px;color:var(--grey-800)}.rule-actions{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.rule-btn{background:none;border:none;cursor:pointer;padding:2px 4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--grey-600);transition:color .2s}.rule-btn:hover{color:var(--grey-800)}.rule-btn.delete{color:var(--red-600)}.rule-btn.delete:hover{color:var(--red-800)}.rule-editor{padding:8px;border:1px solid var(--primary-400, #6366f1);border-radius:0 0 3px 3px;background:var(--grey-50);margin-bottom:6px}.rule-editor.new-rule{border-radius:3px;margin-top:4px}.editor-actions{display:flex;gap:4px;margin-top:6px}\n"] }]
|
|
11033
11001
|
}], ctorParameters: () => [] });
|
|
11034
11002
|
|
|
11035
11003
|
class FieldTypeSelectorComponent {
|
|
@@ -11123,6 +11091,8 @@ class BlockEditorComponent {
|
|
|
11123
11091
|
deleteSubField(parentCode, sfCode, event) {
|
|
11124
11092
|
event.stopPropagation();
|
|
11125
11093
|
const parentField = this.block().fields.find(f => f.code === parentCode);
|
|
11094
|
+
if (parentField && this.isSubFieldVisibilityParent(parentField, sfCode))
|
|
11095
|
+
return;
|
|
11126
11096
|
const updated = (parentField?.repeaterSubFields ?? []).filter(sf => sf.code !== sfCode);
|
|
11127
11097
|
this.updateSubFields(parentCode, updated);
|
|
11128
11098
|
if (this.selectedSubFieldCode() === sfCode) {
|
|
@@ -11182,6 +11152,10 @@ class BlockEditorComponent {
|
|
|
11182
11152
|
isVisibilityParent(fieldCode) {
|
|
11183
11153
|
return this.visibilityParentFieldCodes.has(fieldCode);
|
|
11184
11154
|
}
|
|
11155
|
+
// Las reglas de un subcampo solo referencian hermanos del mismo repeater (códigos sf_N no son únicos entre repeaters).
|
|
11156
|
+
isSubFieldVisibilityParent(parentField, sfCode) {
|
|
11157
|
+
return (parentField.repeaterSubFields ?? []).some(sf => sf.fieldData.visibilityRules?.some(rule => rule.fieldName === sfCode));
|
|
11158
|
+
}
|
|
11185
11159
|
isBlockVisibilityParent() {
|
|
11186
11160
|
return this.block().fields.some(field => this.isVisibilityParent(field.code));
|
|
11187
11161
|
}
|
|
@@ -11193,7 +11167,7 @@ class BlockEditorComponent {
|
|
|
11193
11167
|
this.blockChange.emit({ ...this.block(), fields: nextFields });
|
|
11194
11168
|
}
|
|
11195
11169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11196
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldCode: { classPropertyName: "selectedSubFieldCode", publicName: "selectedSubFieldCode", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldParentCode: { classPropertyName: "selectedSubFieldParentCode", publicName: "selectedSubFieldParentCode", isSignal: true, isRequired: false, transformFunction: null }, visibilityParentFieldCodes: { classPropertyName: "visibilityParentFieldCodes", publicName: "visibilityParentFieldCodes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField", notifySelectedSubField: "notifySelectedSubField", notifyNewSubField: "notifyNewSubField" }, ngImport: i0, template: "<div class=\"form-block-card\">\r\n <div class=\"form-block-card-header\">\r\n <div>\r\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_message' | uicTranslate\" [ngModel]=\"block().message\" (ngModelChange)=\"changeMessage($event)\">\r\n </div>\r\n <ui-button\r\n [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n [disabled]=\"isBlockVisibilityParent()\"\r\n (click)=\"requestDeleteBlock($event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n <div\r\n class=\"form-block-card-body\"\r\n cdkDropList\r\n [cdkDropListData]=\"block().fields\"\r\n (cdkDropListDropped)=\"reorderFields($event)\">\r\n \r\n <!-- FIELDS -->\r\n @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n <div class=\"field-with-subfields\">\r\n <div\r\n class=\"xfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n (click)=\"selectField(edtField)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b> {{edtField.fieldData.label}}\r\n @if (edtField.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n @if(edtField.fieldData.visibilityRules) {\r\n <i class=\"branched-field ri-git-merge-line\"></i>\r\n <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? '-'}} </span>\r\n }\r\n </b>\r\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n @if (edtField.fieldData.type === 'repeater') {\r\n <ui-button\r\n [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"toggleRepeater(edtField.code, $event)\">\r\n </ui-button>\r\n }\r\n <ui-button\r\n [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n [disabled]=\"isVisibilityParent(edtField.code)\"\r\n (click)=\"deleteField(edtField.code, $event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n <div class=\"repeater-inline-panel\">\r\n <div\r\n class=\"repeater-subfields-list\"\r\n cdkDropList\r\n [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n <div\r\n class=\"xfield-card subfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"selectedSubFieldCode() === sf.code && edtField.code === selectedSubFieldParentCode()\"\r\n (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b>{{ sf.fieldData.label || sf.fieldData.name }}\r\n @if (sf.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n </b>\r\n <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n <ui-button\r\n size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n } @empty {\r\n <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n }\r\n </div>\r\n <div class=\"new-subfield\">\r\n {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n <div class=\"new-field\">\r\n {{'form_builder.add_new_field' | uicTranslate}}\r\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.hidden-field{color:var(--grey-500)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: FieldTypeSelectorComponent, selector: "lib-field-type-selector", inputs: ["excludeTypes"], outputs: ["selectType"] }] });
|
|
11170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldCode: { classPropertyName: "selectedSubFieldCode", publicName: "selectedSubFieldCode", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldParentCode: { classPropertyName: "selectedSubFieldParentCode", publicName: "selectedSubFieldParentCode", isSignal: true, isRequired: false, transformFunction: null }, visibilityParentFieldCodes: { classPropertyName: "visibilityParentFieldCodes", publicName: "visibilityParentFieldCodes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField", notifySelectedSubField: "notifySelectedSubField", notifyNewSubField: "notifyNewSubField" }, ngImport: i0, template: "<div class=\"form-block-card\">\r\n <div class=\"form-block-card-header\">\r\n <div>\r\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_message' | uicTranslate\" [ngModel]=\"block().message\" (ngModelChange)=\"changeMessage($event)\">\r\n </div>\r\n <ui-button\r\n [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n [disabled]=\"isBlockVisibilityParent()\"\r\n (click)=\"requestDeleteBlock($event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n <div\r\n class=\"form-block-card-body\"\r\n cdkDropList\r\n [cdkDropListData]=\"block().fields\"\r\n (cdkDropListDropped)=\"reorderFields($event)\">\r\n \r\n <!-- FIELDS -->\r\n @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n <div class=\"field-with-subfields\">\r\n <div\r\n class=\"xfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n (click)=\"selectField(edtField)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b> {{edtField.fieldData.label}}\r\n @if (edtField.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n @if(edtField.fieldData.visibilityRules) {\r\n <i class=\"branched-field ri-git-merge-line\"></i>\r\n <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? '-'}} </span>\r\n }\r\n </b>\r\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n @if (edtField.fieldData.type === 'repeater') {\r\n <ui-button\r\n [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"toggleRepeater(edtField.code, $event)\">\r\n </ui-button>\r\n }\r\n <ui-button\r\n [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n [disabled]=\"isVisibilityParent(edtField.code)\"\r\n (click)=\"deleteField(edtField.code, $event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n <div class=\"repeater-inline-panel\">\r\n <div\r\n class=\"repeater-subfields-list\"\r\n cdkDropList\r\n [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n <div\r\n class=\"xfield-card subfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"selectedSubFieldCode() === sf.code && edtField.code === selectedSubFieldParentCode()\"\r\n (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b>{{ sf.fieldData.label || sf.fieldData.name }}\r\n @if (sf.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n @if (sf.fieldData.visibilityRules) {\r\n <i class=\"branched-field ri-git-merge-line\"></i>\r\n <span class=\"vs-rule\"> {{sf.fieldData.visibilityRules[0]?.fieldLabel ?? '-'}} </span>\r\n }\r\n </b>\r\n <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n <ui-button\r\n [uiTooltip]=\"(isSubFieldVisibilityParent(edtField, sf.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n [disabled]=\"isSubFieldVisibilityParent(edtField, sf.code)\"\r\n size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n } @empty {\r\n <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n }\r\n </div>\r\n <div class=\"new-subfield\">\r\n {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n <div class=\"new-field\">\r\n {{'form_builder.add_new_field' | uicTranslate}}\r\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.hidden-field{color:var(--grey-500)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: FieldTypeSelectorComponent, selector: "lib-field-type-selector", inputs: ["excludeTypes"], outputs: ["selectType"] }] });
|
|
11197
11171
|
}
|
|
11198
11172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, decorators: [{
|
|
11199
11173
|
type: Component,
|
|
@@ -11204,7 +11178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
11204
11178
|
DragDropModule,
|
|
11205
11179
|
FormsModule,
|
|
11206
11180
|
FieldTypeSelectorComponent
|
|
11207
|
-
], template: "<div class=\"form-block-card\">\r\n <div class=\"form-block-card-header\">\r\n <div>\r\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_message' | uicTranslate\" [ngModel]=\"block().message\" (ngModelChange)=\"changeMessage($event)\">\r\n </div>\r\n <ui-button\r\n [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n [disabled]=\"isBlockVisibilityParent()\"\r\n (click)=\"requestDeleteBlock($event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n <div\r\n class=\"form-block-card-body\"\r\n cdkDropList\r\n [cdkDropListData]=\"block().fields\"\r\n (cdkDropListDropped)=\"reorderFields($event)\">\r\n \r\n <!-- FIELDS -->\r\n @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n <div class=\"field-with-subfields\">\r\n <div\r\n class=\"xfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n (click)=\"selectField(edtField)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b> {{edtField.fieldData.label}}\r\n @if (edtField.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n @if(edtField.fieldData.visibilityRules) {\r\n <i class=\"branched-field ri-git-merge-line\"></i>\r\n <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? '-'}} </span>\r\n }\r\n </b>\r\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n @if (edtField.fieldData.type === 'repeater') {\r\n <ui-button\r\n [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"toggleRepeater(edtField.code, $event)\">\r\n </ui-button>\r\n }\r\n <ui-button\r\n [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n [disabled]=\"isVisibilityParent(edtField.code)\"\r\n (click)=\"deleteField(edtField.code, $event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n <div class=\"repeater-inline-panel\">\r\n <div\r\n class=\"repeater-subfields-list\"\r\n cdkDropList\r\n [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n <div\r\n class=\"xfield-card subfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"selectedSubFieldCode() === sf.code && edtField.code === selectedSubFieldParentCode()\"\r\n (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b>{{ sf.fieldData.label || sf.fieldData.name }}\r\n @if (sf.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n </b>\r\n <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n <ui-button\r\n size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n } @empty {\r\n <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n }\r\n </div>\r\n <div class=\"new-subfield\">\r\n {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n <div class=\"new-field\">\r\n {{'form_builder.add_new_field' | uicTranslate}}\r\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.hidden-field{color:var(--grey-500)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"] }]
|
|
11181
|
+
], template: "<div class=\"form-block-card\">\r\n <div class=\"form-block-card-header\">\r\n <div>\r\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n <input [placeholder]=\"'form_builder.block_message' | uicTranslate\" [ngModel]=\"block().message\" (ngModelChange)=\"changeMessage($event)\">\r\n </div>\r\n <ui-button\r\n [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n [disabled]=\"isBlockVisibilityParent()\"\r\n (click)=\"requestDeleteBlock($event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n <div\r\n class=\"form-block-card-body\"\r\n cdkDropList\r\n [cdkDropListData]=\"block().fields\"\r\n (cdkDropListDropped)=\"reorderFields($event)\">\r\n \r\n <!-- FIELDS -->\r\n @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n <div class=\"field-with-subfields\">\r\n <div\r\n class=\"xfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n (click)=\"selectField(edtField)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b> {{edtField.fieldData.label}}\r\n @if (edtField.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n @if(edtField.fieldData.visibilityRules) {\r\n <i class=\"branched-field ri-git-merge-line\"></i>\r\n <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? '-'}} </span>\r\n }\r\n </b>\r\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n @if (edtField.fieldData.type === 'repeater') {\r\n <ui-button\r\n [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"toggleRepeater(edtField.code, $event)\">\r\n </ui-button>\r\n }\r\n <ui-button\r\n [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n [disabled]=\"isVisibilityParent(edtField.code)\"\r\n (click)=\"deleteField(edtField.code, $event)\"\r\n size=\"s\"\r\n icon=\"ri-delete-bin-line\"\r\n color=\"red\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n <div class=\"repeater-inline-panel\">\r\n <div\r\n class=\"repeater-subfields-list\"\r\n cdkDropList\r\n [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n <div\r\n class=\"xfield-card subfield-card\"\r\n cdkDrag\r\n [class.selected-field]=\"selectedSubFieldCode() === sf.code && edtField.code === selectedSubFieldParentCode()\"\r\n (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n <div class=\"xfield-card-icon\">\r\n <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n </div>\r\n <div class=\"xfield-card-body\">\r\n <b>{{ sf.fieldData.label || sf.fieldData.name }}\r\n @if (sf.fieldData.hidden) {\r\n <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n }\r\n @if (sf.fieldData.visibilityRules) {\r\n <i class=\"branched-field ri-git-merge-line\"></i>\r\n <span class=\"vs-rule\"> {{sf.fieldData.visibilityRules[0]?.fieldLabel ?? '-'}} </span>\r\n }\r\n </b>\r\n <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n </div>\r\n <div class=\"xfield-card-actions\">\r\n <ui-button\r\n [uiTooltip]=\"(isSubFieldVisibilityParent(edtField, sf.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n [disabled]=\"isSubFieldVisibilityParent(edtField, sf.code)\"\r\n size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n </ui-button>\r\n </div>\r\n </div>\r\n } @empty {\r\n <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n }\r\n </div>\r\n <div class=\"new-subfield\">\r\n {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n <div class=\"new-field\">\r\n {{'form_builder.add_new_field' | uicTranslate}}\r\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.hidden-field{color:var(--grey-500)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"] }]
|
|
11208
11182
|
}], ctorParameters: () => [], propDecorators: { visibilityParentFieldCodes: [{
|
|
11209
11183
|
type: Input
|
|
11210
11184
|
}] } });
|
|
@@ -11302,7 +11276,9 @@ class UicUserFormbuilderComponent {
|
|
|
11302
11276
|
}));
|
|
11303
11277
|
const fieldOptions = [...siblingOptions, ...parentNonRepeaterOptions];
|
|
11304
11278
|
return {
|
|
11305
|
-
|
|
11279
|
+
// Visibilidad: en el builder solo se permiten hermanos del mismo ítem.
|
|
11280
|
+
// El motor también resuelve campos del raíz (gana el hermano), pero solo vía esquema manual.
|
|
11281
|
+
fieldName: siblingOptions,
|
|
11306
11282
|
'optionsSource.key': this.optionSources,
|
|
11307
11283
|
'optionsSource.dependsOn': fieldOptions,
|
|
11308
11284
|
'computedSource.key': this.computedSources,
|
|
@@ -11740,15 +11716,33 @@ class UicUserFormbuilderComponent {
|
|
|
11740
11716
|
}
|
|
11741
11717
|
// Hydrate sub-fields for repeater
|
|
11742
11718
|
if (hydratedField.repeaterSubFields?.length) {
|
|
11719
|
+
const siblingLabelByCode = new Map(hydratedField.repeaterSubFields.map(sf => [sf.code, sf.fieldData.label || sf.fieldData.name]));
|
|
11743
11720
|
const hydratedSubFields = hydratedField.repeaterSubFields.map(sf => {
|
|
11744
|
-
|
|
11745
|
-
|
|
11746
|
-
|
|
11747
|
-
|
|
11748
|
-
|
|
11749
|
-
|
|
11750
|
-
|
|
11751
|
-
|
|
11721
|
+
let hydratedSf = sf;
|
|
11722
|
+
if (!sf.field) {
|
|
11723
|
+
const sfConfig = FIELDS_CONFIG.find(c => c.value === sf.type);
|
|
11724
|
+
if (sfConfig) {
|
|
11725
|
+
changed = true;
|
|
11726
|
+
blockChanged = true;
|
|
11727
|
+
hydratedSf = { ...hydratedSf, field: sfConfig };
|
|
11728
|
+
}
|
|
11729
|
+
}
|
|
11730
|
+
// Reglas de subcampo: solo hermanos del mismo repeater.
|
|
11731
|
+
const sfRules = hydratedSf.fieldData.visibilityRules;
|
|
11732
|
+
if (sfRules?.some(rule => siblingLabelByCode.has(rule.fieldName) && rule.fieldLabel !== siblingLabelByCode.get(rule.fieldName))) {
|
|
11733
|
+
changed = true;
|
|
11734
|
+
blockChanged = true;
|
|
11735
|
+
hydratedSf = {
|
|
11736
|
+
...hydratedSf,
|
|
11737
|
+
fieldData: {
|
|
11738
|
+
...hydratedSf.fieldData,
|
|
11739
|
+
visibilityRules: sfRules.map(rule => siblingLabelByCode.has(rule.fieldName)
|
|
11740
|
+
? { ...rule, fieldLabel: siblingLabelByCode.get(rule.fieldName) }
|
|
11741
|
+
: rule)
|
|
11742
|
+
}
|
|
11743
|
+
};
|
|
11744
|
+
}
|
|
11745
|
+
return hydratedSf;
|
|
11752
11746
|
});
|
|
11753
11747
|
if (hydratedSubFields !== hydratedField.repeaterSubFields) {
|
|
11754
11748
|
hydratedField = { ...hydratedField, repeaterSubFields: hydratedSubFields };
|