ui-core-abv 0.6.68 → 0.6.71
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 +240 -109
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/dynamic-form/form-wrapper/form-wrapper.component.d.ts +7 -1
- package/lib/components/dynamic-form/form.models.d.ts +1 -0
- package/lib/components/inputs/file-input/file-input.component.d.ts +1 -0
- package/lib/components/tree-admin/tree-admin.component.d.ts +4 -0
- package/lib/components/user-formbuilder/block-editor/field-editor/field-editor.component.d.ts +6 -1
- package/lib/components/user-formbuilder/user-formbuilder.component.d.ts +9 -0
- package/package.json +1 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -1388,6 +1388,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1388
1388
|
args: ['calendarTemplate']
|
|
1389
1389
|
}] } });
|
|
1390
1390
|
|
|
1391
|
+
let nextId$1 = 1;
|
|
1392
|
+
function createSuccessAlert(message, options) {
|
|
1393
|
+
return {
|
|
1394
|
+
id: nextId$1++,
|
|
1395
|
+
message,
|
|
1396
|
+
icon: 'ri-check-line',
|
|
1397
|
+
showProgressBar: true,
|
|
1398
|
+
type: 'success',
|
|
1399
|
+
duration: 3000,
|
|
1400
|
+
...options,
|
|
1401
|
+
};
|
|
1402
|
+
}
|
|
1403
|
+
function createErrorAlert(message, options) {
|
|
1404
|
+
return {
|
|
1405
|
+
id: nextId$1++,
|
|
1406
|
+
message,
|
|
1407
|
+
showProgressBar: true,
|
|
1408
|
+
type: 'error',
|
|
1409
|
+
icon: 'ri-error-warning-line',
|
|
1410
|
+
duration: 5000,
|
|
1411
|
+
...options,
|
|
1412
|
+
};
|
|
1413
|
+
}
|
|
1414
|
+
function createWarningAlert(message, options) {
|
|
1415
|
+
return {
|
|
1416
|
+
id: nextId$1++,
|
|
1417
|
+
message,
|
|
1418
|
+
showProgressBar: true,
|
|
1419
|
+
type: 'warning',
|
|
1420
|
+
icon: 'ri-alarm-warning-line',
|
|
1421
|
+
duration: 4000,
|
|
1422
|
+
...options,
|
|
1423
|
+
};
|
|
1424
|
+
}
|
|
1425
|
+
function createInfoAlert(message, options) {
|
|
1426
|
+
return {
|
|
1427
|
+
id: nextId$1++,
|
|
1428
|
+
showProgressBar: true,
|
|
1429
|
+
message,
|
|
1430
|
+
icon: 'ri-information-2-line',
|
|
1431
|
+
type: 'info',
|
|
1432
|
+
duration: 3000,
|
|
1433
|
+
...options,
|
|
1434
|
+
};
|
|
1435
|
+
}
|
|
1436
|
+
|
|
1437
|
+
class UicPushAlertService {
|
|
1438
|
+
autoIncId = 0;
|
|
1439
|
+
alerts$ = new Subject();
|
|
1440
|
+
get stream() {
|
|
1441
|
+
return this.alerts$.asObservable();
|
|
1442
|
+
}
|
|
1443
|
+
show(alertData) {
|
|
1444
|
+
this.autoIncId++;
|
|
1445
|
+
const alert = { ...alertData, id: this.autoIncId };
|
|
1446
|
+
this.alerts$.next(alert);
|
|
1447
|
+
}
|
|
1448
|
+
success(message, options) {
|
|
1449
|
+
this.show(createSuccessAlert(message, options));
|
|
1450
|
+
}
|
|
1451
|
+
error(message, options) {
|
|
1452
|
+
this.show(createErrorAlert(message, options));
|
|
1453
|
+
}
|
|
1454
|
+
warning(message, options) {
|
|
1455
|
+
this.show(createWarningAlert(message, options));
|
|
1456
|
+
}
|
|
1457
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1458
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, providedIn: 'root' });
|
|
1459
|
+
}
|
|
1460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, decorators: [{
|
|
1461
|
+
type: Injectable,
|
|
1462
|
+
args: [{
|
|
1463
|
+
providedIn: 'root'
|
|
1464
|
+
}]
|
|
1465
|
+
}] });
|
|
1466
|
+
|
|
1391
1467
|
const base$a = createValueAccessor();
|
|
1392
1468
|
class UicFileInputComponent extends base$a {
|
|
1393
1469
|
icon = ''; // Icono externo
|
|
@@ -1406,6 +1482,7 @@ class UicFileInputComponent extends base$a {
|
|
|
1406
1482
|
fileTypes = null;
|
|
1407
1483
|
fileUidResolverFn;
|
|
1408
1484
|
fileInput;
|
|
1485
|
+
push = inject(UicPushAlertService);
|
|
1409
1486
|
value = [];
|
|
1410
1487
|
files = [];
|
|
1411
1488
|
isDragging = false;
|
|
@@ -1613,6 +1690,7 @@ class UicFileInputComponent extends base$a {
|
|
|
1613
1690
|
}
|
|
1614
1691
|
if (item.fileUid && this.fileUidResolverFn) {
|
|
1615
1692
|
this.fileUidResolverFn(item.fileUid);
|
|
1693
|
+
this.push.success('Preparando...');
|
|
1616
1694
|
}
|
|
1617
1695
|
}
|
|
1618
1696
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -2903,7 +2981,7 @@ class UicSliderComponent extends base$5 {
|
|
|
2903
2981
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
2904
2982
|
multi: true
|
|
2905
2983
|
}
|
|
2906
|
-
], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;
|
|
2984
|
+
], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;height:calc(4 * var(--form-ref));display:flex;align-items:center;padding:25px 8px}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.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)}.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-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
2907
2985
|
}
|
|
2908
2986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSliderComponent, decorators: [{
|
|
2909
2987
|
type: Component,
|
|
@@ -2913,7 +2991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2913
2991
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
2914
2992
|
multi: true
|
|
2915
2993
|
}
|
|
2916
|
-
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;
|
|
2994
|
+
], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".slider-wrapper{width:100%;height:calc(4 * var(--form-ref));display:flex;align-items:center;padding:25px 8px}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.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)}.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-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
2917
2995
|
}], propDecorators: { icon: [{
|
|
2918
2996
|
type: Input
|
|
2919
2997
|
}], iconColor: [{
|
|
@@ -3399,7 +3477,7 @@ class UicPoolOptionsComponent extends base$2 {
|
|
|
3399
3477
|
useExisting: forwardRef(() => UicPoolOptionsComponent),
|
|
3400
3478
|
multi: true
|
|
3401
3479
|
}
|
|
3402
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <
|
|
3480
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h3 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h3>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.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)}.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-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
3403
3481
|
}
|
|
3404
3482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPoolOptionsComponent, decorators: [{
|
|
3405
3483
|
type: Component,
|
|
@@ -3409,7 +3487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3409
3487
|
useExisting: forwardRef(() => UicPoolOptionsComponent),
|
|
3410
3488
|
multi: true
|
|
3411
3489
|
}
|
|
3412
|
-
], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <
|
|
3490
|
+
], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h3 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h3>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.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)}.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-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
3413
3491
|
}], propDecorators: { icon: [{
|
|
3414
3492
|
type: Input
|
|
3415
3493
|
}], iconColor: [{
|
|
@@ -3708,82 +3786,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3708
3786
|
type: Input
|
|
3709
3787
|
}] } });
|
|
3710
3788
|
|
|
3711
|
-
let nextId$1 = 1;
|
|
3712
|
-
function createSuccessAlert(message, options) {
|
|
3713
|
-
return {
|
|
3714
|
-
id: nextId$1++,
|
|
3715
|
-
message,
|
|
3716
|
-
icon: 'ri-check-line',
|
|
3717
|
-
showProgressBar: true,
|
|
3718
|
-
type: 'success',
|
|
3719
|
-
duration: 3000,
|
|
3720
|
-
...options,
|
|
3721
|
-
};
|
|
3722
|
-
}
|
|
3723
|
-
function createErrorAlert(message, options) {
|
|
3724
|
-
return {
|
|
3725
|
-
id: nextId$1++,
|
|
3726
|
-
message,
|
|
3727
|
-
showProgressBar: true,
|
|
3728
|
-
type: 'error',
|
|
3729
|
-
icon: 'ri-error-warning-line',
|
|
3730
|
-
duration: 5000,
|
|
3731
|
-
...options,
|
|
3732
|
-
};
|
|
3733
|
-
}
|
|
3734
|
-
function createWarningAlert(message, options) {
|
|
3735
|
-
return {
|
|
3736
|
-
id: nextId$1++,
|
|
3737
|
-
message,
|
|
3738
|
-
showProgressBar: true,
|
|
3739
|
-
type: 'warning',
|
|
3740
|
-
icon: 'ri-alarm-warning-line',
|
|
3741
|
-
duration: 4000,
|
|
3742
|
-
...options,
|
|
3743
|
-
};
|
|
3744
|
-
}
|
|
3745
|
-
function createInfoAlert(message, options) {
|
|
3746
|
-
return {
|
|
3747
|
-
id: nextId$1++,
|
|
3748
|
-
showProgressBar: true,
|
|
3749
|
-
message,
|
|
3750
|
-
icon: 'ri-information-2-line',
|
|
3751
|
-
type: 'info',
|
|
3752
|
-
duration: 3000,
|
|
3753
|
-
...options,
|
|
3754
|
-
};
|
|
3755
|
-
}
|
|
3756
|
-
|
|
3757
|
-
class UicPushAlertService {
|
|
3758
|
-
autoIncId = 0;
|
|
3759
|
-
alerts$ = new Subject();
|
|
3760
|
-
get stream() {
|
|
3761
|
-
return this.alerts$.asObservable();
|
|
3762
|
-
}
|
|
3763
|
-
show(alertData) {
|
|
3764
|
-
this.autoIncId++;
|
|
3765
|
-
const alert = { ...alertData, id: this.autoIncId };
|
|
3766
|
-
this.alerts$.next(alert);
|
|
3767
|
-
}
|
|
3768
|
-
success(message, options) {
|
|
3769
|
-
this.show(createSuccessAlert(message, options));
|
|
3770
|
-
}
|
|
3771
|
-
error(message, options) {
|
|
3772
|
-
this.show(createErrorAlert(message, options));
|
|
3773
|
-
}
|
|
3774
|
-
warning(message, options) {
|
|
3775
|
-
this.show(createWarningAlert(message, options));
|
|
3776
|
-
}
|
|
3777
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3778
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, providedIn: 'root' });
|
|
3779
|
-
}
|
|
3780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, decorators: [{
|
|
3781
|
-
type: Injectable,
|
|
3782
|
-
args: [{
|
|
3783
|
-
providedIn: 'root'
|
|
3784
|
-
}]
|
|
3785
|
-
}] });
|
|
3786
|
-
|
|
3787
3789
|
class UicFormStateService {
|
|
3788
3790
|
destroyRef = inject(DestroyRef);
|
|
3789
3791
|
formValueSignal = signal({});
|
|
@@ -4286,6 +4288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4286
4288
|
|
|
4287
4289
|
class UicFormWrapperComponent {
|
|
4288
4290
|
fb = inject(FormBuilder);
|
|
4291
|
+
elementRef = inject(ElementRef);
|
|
4289
4292
|
form = this.fb.group({});
|
|
4290
4293
|
effectiveSchema = { cols: 2, blocks: [{ fields: [] }] };
|
|
4291
4294
|
schema;
|
|
@@ -4297,10 +4300,13 @@ class UicFormWrapperComponent {
|
|
|
4297
4300
|
showButtons = false;
|
|
4298
4301
|
fillSelects = false;
|
|
4299
4302
|
initialValues = {};
|
|
4303
|
+
focusFieldName = null;
|
|
4304
|
+
focusFieldTrigger = null;
|
|
4300
4305
|
fileUidResolverFn;
|
|
4301
4306
|
formSubmit = new EventEmitter();
|
|
4302
4307
|
formChange = new EventEmitter();
|
|
4303
4308
|
formValueSub = null;
|
|
4309
|
+
hasFocusedCurrentTrigger = false;
|
|
4304
4310
|
ngOnInit() {
|
|
4305
4311
|
this.syncEffectiveSchema();
|
|
4306
4312
|
this.buildForm();
|
|
@@ -4327,6 +4333,12 @@ class UicFormWrapperComponent {
|
|
|
4327
4333
|
this.buildForm();
|
|
4328
4334
|
this.updateExtenalData();
|
|
4329
4335
|
}
|
|
4336
|
+
const focusRequestChanged = (changes['focusFieldName'] && !changes['focusFieldName'].firstChange) ||
|
|
4337
|
+
(changes['focusFieldTrigger'] && !changes['focusFieldTrigger'].firstChange);
|
|
4338
|
+
if (focusRequestChanged) {
|
|
4339
|
+
this.hasFocusedCurrentTrigger = false;
|
|
4340
|
+
this.focusConfiguredField();
|
|
4341
|
+
}
|
|
4330
4342
|
}
|
|
4331
4343
|
ngOnDestroy() {
|
|
4332
4344
|
this.formValueSub?.unsubscribe();
|
|
@@ -4353,6 +4365,26 @@ class UicFormWrapperComponent {
|
|
|
4353
4365
|
});
|
|
4354
4366
|
this.form = newForm;
|
|
4355
4367
|
this.updateDisabledState();
|
|
4368
|
+
this.focusConfiguredField();
|
|
4369
|
+
}
|
|
4370
|
+
focusConfiguredField() {
|
|
4371
|
+
if (!this.focusFieldName || this.hasFocusedCurrentTrigger)
|
|
4372
|
+
return;
|
|
4373
|
+
const fieldName = this.focusFieldName;
|
|
4374
|
+
requestAnimationFrame(() => {
|
|
4375
|
+
const target = this.findFocusableFieldElement(fieldName);
|
|
4376
|
+
if (!target)
|
|
4377
|
+
return;
|
|
4378
|
+
this.hasFocusedCurrentTrigger = true;
|
|
4379
|
+
target.focus();
|
|
4380
|
+
if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
|
|
4381
|
+
target.select();
|
|
4382
|
+
}
|
|
4383
|
+
});
|
|
4384
|
+
}
|
|
4385
|
+
findFocusableFieldElement(fieldName) {
|
|
4386
|
+
const focusableElements = this.elementRef.nativeElement.querySelectorAll('input, textarea, select, button, [tabindex]');
|
|
4387
|
+
return Array.from(focusableElements).find(element => element.id === fieldName) ?? null;
|
|
4356
4388
|
}
|
|
4357
4389
|
updateDisabledState() {
|
|
4358
4390
|
if (!this.form)
|
|
@@ -4673,7 +4705,7 @@ class UicFormWrapperComponent {
|
|
|
4673
4705
|
};
|
|
4674
4706
|
}
|
|
4675
4707
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4676
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues", fileUidResolverFn: "fileUidResolverFn" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, providers: [UicFormStateService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n @for (block of effectiveSchema.blocks; track $index) {\r\n \r\n <section class=\"form-block\">\r\n @if (block.title){\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n @if (block.subtitle){\r\n <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n }\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"effectiveSchema.cols\"\r\n [inputs]=\"block.fields.length\"\r\n ></ui-skeleton-loader>\r\n } @else {\r\n <ui-dynamic-form\n [cols]=\"effectiveSchema.cols\"\n [disabled]=\"disabled\"\n [fileUidResolverFn]=\"fileUidResolverFn\"\n [fields]=\"block.fields\"\n [form]=\"form\">\n </ui-dynamic-form>\n }\r\n </section>\r\n }\r\n @if ( showButtons ) {\r\n\r\n <div class=\"form-buttons\">\r\n <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols", "fileUidResolverFn"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
4708
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues", focusFieldName: "focusFieldName", focusFieldTrigger: "focusFieldTrigger", fileUidResolverFn: "fileUidResolverFn" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, providers: [UicFormStateService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n @for (block of effectiveSchema.blocks; track $index) {\r\n \r\n <section class=\"form-block\">\r\n @if (block.title){\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n @if (block.subtitle){\r\n <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n }\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"effectiveSchema.cols\"\r\n [inputs]=\"block.fields.length\"\r\n ></ui-skeleton-loader>\r\n } @else {\r\n <ui-dynamic-form\n [cols]=\"effectiveSchema.cols\"\n [disabled]=\"disabled\"\n [fileUidResolverFn]=\"fileUidResolverFn\"\n [fields]=\"block.fields\"\n [form]=\"form\">\n </ui-dynamic-form>\n }\r\n </section>\r\n }\r\n @if ( showButtons ) {\r\n\r\n <div class=\"form-buttons\">\r\n <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols", "fileUidResolverFn"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
4677
4709
|
}
|
|
4678
4710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
|
|
4679
4711
|
type: Component,
|
|
@@ -4702,6 +4734,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4702
4734
|
type: Input
|
|
4703
4735
|
}], initialValues: [{
|
|
4704
4736
|
type: Input
|
|
4737
|
+
}], focusFieldName: [{
|
|
4738
|
+
type: Input
|
|
4739
|
+
}], focusFieldTrigger: [{
|
|
4740
|
+
type: Input
|
|
4705
4741
|
}], fileUidResolverFn: [{
|
|
4706
4742
|
type: Input
|
|
4707
4743
|
}], formSubmit: [{
|
|
@@ -4819,7 +4855,7 @@ class UicStepsFormComponent {
|
|
|
4819
4855
|
return this.currentIdx === this.steps.length - 1;
|
|
4820
4856
|
}
|
|
4821
4857
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n [(currentTab)]=\"currentTabTitle\" \r\n [navigationEnabled]=\"navigationEnabled\"\r\n [showStepTitle]=\"showStepTitle\"\r\n [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n <ui-form-wrapper [schema]=\"step.form\" \r\n [externalData]=\"externalData\"\r\n [disabled]=\"formDisabled\"\r\n [loading]=\"loading\"></ui-form-wrapper>\r\n </div>\r\n}\r\n\r\n@if (showButtons) {\r\n <div style=\"display: flex; gap: 10px;\">\r\n <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >{{'step_form.back' | uicTranslate}}</ui-button>\r\n <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?('step_form.submit' | uicTranslate):('step_form.next' | uicTranslate)}}</ui-button>\r\n </div>\r\n}\r\n", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
4858
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n [(currentTab)]=\"currentTabTitle\" \r\n [navigationEnabled]=\"navigationEnabled\"\r\n [showStepTitle]=\"showStepTitle\"\r\n [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n <ui-form-wrapper [schema]=\"step.form\" \r\n [externalData]=\"externalData\"\r\n [disabled]=\"formDisabled\"\r\n [loading]=\"loading\"></ui-form-wrapper>\r\n </div>\r\n}\r\n\r\n@if (showButtons) {\r\n <div style=\"display: flex; gap: 10px;\">\r\n <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >{{'step_form.back' | uicTranslate}}</ui-button>\r\n <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?('step_form.submit' | uicTranslate):('step_form.next' | uicTranslate)}}</ui-button>\r\n </div>\r\n}\r\n", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
4823
4859
|
}
|
|
4824
4860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, decorators: [{
|
|
4825
4861
|
type: Component,
|
|
@@ -6983,7 +7019,9 @@ class UicTreeAdminComponent {
|
|
|
6983
7019
|
{
|
|
6984
7020
|
id: 11,
|
|
6985
7021
|
enabled: true,
|
|
6986
|
-
name: 'Miembro 3'
|
|
7022
|
+
name: 'Miembro 3',
|
|
7023
|
+
tag: 'Admin',
|
|
7024
|
+
tagColor: 'red'
|
|
6987
7025
|
},
|
|
6988
7026
|
{
|
|
6989
7027
|
id: 12,
|
|
@@ -7108,14 +7146,20 @@ class UicTreeAdminComponent {
|
|
|
7108
7146
|
clearFilter() {
|
|
7109
7147
|
this.filterTerm = '';
|
|
7110
7148
|
}
|
|
7149
|
+
getVisibleTree() {
|
|
7150
|
+
if (!this.hasActiveFilter()) {
|
|
7151
|
+
return this.tree;
|
|
7152
|
+
}
|
|
7153
|
+
return this.tree.filter((item) => this.getFilteredChildren(item).length > 0);
|
|
7154
|
+
}
|
|
7111
7155
|
getFilteredChildren(item) {
|
|
7112
7156
|
if (!item.children?.length) {
|
|
7113
7157
|
return [];
|
|
7114
7158
|
}
|
|
7115
|
-
|
|
7116
|
-
if (!term) {
|
|
7159
|
+
if (!this.hasActiveFilter()) {
|
|
7117
7160
|
return item.children;
|
|
7118
7161
|
}
|
|
7162
|
+
const term = this.filterTerm.trim().toLowerCase();
|
|
7119
7163
|
return item.children.filter((child) => child.name.toLowerCase().includes(term));
|
|
7120
7164
|
}
|
|
7121
7165
|
finalizeParentEdit(item) {
|
|
@@ -7245,6 +7289,9 @@ class UicTreeAdminComponent {
|
|
|
7245
7289
|
}
|
|
7246
7290
|
return parent.children.some((child) => child.id !== subitem.id && child.name.trim().toLowerCase() === trimmed);
|
|
7247
7291
|
}
|
|
7292
|
+
hasActiveFilter() {
|
|
7293
|
+
return this.filterTerm.trim().length > 0;
|
|
7294
|
+
}
|
|
7248
7295
|
cleanupPendingCreateIds() {
|
|
7249
7296
|
if (!this.pendingCreateIds.size) {
|
|
7250
7297
|
return;
|
|
@@ -7264,7 +7311,7 @@ class UicTreeAdminComponent {
|
|
|
7264
7311
|
}
|
|
7265
7312
|
}
|
|
7266
7313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { searchEnabled: "searchEnabled", loading: "loading", emptyMessage: "emptyMessage", duplicateNameMessage: "duplicateNameMessage", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange", create: "create" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\r\n <div class=\"tree-skeleton\">\r\n <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n </div>\r\n} @else {\r\n @if (searchEnabled) {\r\n <div class=\"filter-bar\">\r\n {{'tree.search_label' | uicTranslate}}\r\n <ui-input>\r\n <input #inp [placeholder]=\"'tree.search_placeholder' | uicTranslate\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n </ui-input>\r\n <ui-button\r\n [iconOnly]=\"true\"\r\n icon=\"ri-eraser-line\"\r\n type=\"bordered\"\r\n color=\"black\"\r\n [disabled]=\"!filterTerm\"\r\n (click)=\"clearFilter(); inp.focus()\"\r\n ></ui-button>\r\n </div>\r\n }\r\n @for (item of tree; track item.id) {\r\n <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n <div class=\"tree-header-name\">\r\n @if (isEditingParent(item)) {\r\n <input\r\n #parentNameInput\r\n class=\"tree-name-input\"\r\n [attr.data-id]=\"item.id\"\r\n [value]=\"item.name\"\r\n (input)=\"updateParentName(item, $event)\"\r\n (blur)=\"finalizeParentEdit(item)\"\r\n (keydown.enter)=\"finalizeParentEdit(item)\"\r\n (keydown.escape)=\"cancelParentEdit(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n {{item.name}}\r\n </div>\r\n }\r\n <span>{{item.children?.length || 0}}</span>\r\n </div>\r\n <div>\r\n <ui-switch\r\n [checked]=\"item.enabled\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n ></ui-switch>\r\n </div>\r\n <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n @if (!item.children?.length) {\r\n <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n }\r\n </div>\r\n <div class=\"tree-body\">\r\n @if (getFilteredChildren(item).length) {\r\n @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n <div\r\n class=\"tree-subitem\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n [class.is-pending]=\"isPendingCreate(subitem)\"\r\n [class.is-parent-disabled]=\"!item.enabled\"\r\n >\r\n <div class=\"tree-subitem-name\">\r\n <i\r\n class=\"ri-circle-fill tree-subitem-status\"\r\n [class.is-enabled]=\"subitem.enabled\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n ></i>\r\n @if (isEditingChild(subitem)) {\r\n <input\r\n #childNameInput\r\n class=\"tree-name-input tree-name-input--sub\"\r\n [attr.data-id]=\"subitem.id\"\r\n [value]=\"subitem.name\"\r\n (input)=\"updateChildName(item, subitem, $event)\"\r\n (blur)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <span\r\n class=\"tree-name-text\"\r\n (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n >{{subitem.name}}</span>\r\n }\r\n </div>\r\n <div class=\"tree-subitem-actions\">\r\n <ui-switch\r\n [checked]=\"subitem.enabled\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n ></ui-switch>\r\n <ui-button\r\n (click)=\"emitEditChild(item, subitem, $event)\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n icon=\"ri-edit-line\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n size=\"s\"\r\n ></ui-button>\r\n <ui-button \r\n (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n icon=\"ri-delete-bin-line\" \r\n [disabled]=\"isPendingCreate(subitem)\"\r\n type=\"ghost\" \r\n [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tree-empty\">\r\n {{emptyMessage | uicTranslate}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
7314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { searchEnabled: "searchEnabled", loading: "loading", emptyMessage: "emptyMessage", duplicateNameMessage: "duplicateNameMessage", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange", create: "create" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\r\n <div class=\"tree-skeleton\">\r\n <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n </div>\r\n} @else {\r\n @if (searchEnabled) {\r\n <div class=\"filter-bar\">\r\n {{'tree.search_label' | uicTranslate}}\r\n <ui-input>\r\n <input #inp [placeholder]=\"'tree.search_placeholder' | uicTranslate\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n </ui-input>\r\n <ui-button\r\n [iconOnly]=\"true\"\r\n icon=\"ri-eraser-line\"\r\n type=\"bordered\"\r\n color=\"black\"\r\n [disabled]=\"!filterTerm\"\r\n (click)=\"clearFilter(); inp.focus()\"\r\n ></ui-button>\r\n </div>\r\n }\r\n @for (item of getVisibleTree(); track item.id) {\r\n <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n <div class=\"tree-header-name\">\r\n @if (isEditingParent(item)) {\r\n <input\r\n #parentNameInput\r\n class=\"tree-name-input\"\r\n [attr.data-id]=\"item.id\"\r\n [value]=\"item.name\"\r\n (input)=\"updateParentName(item, $event)\"\r\n (blur)=\"finalizeParentEdit(item)\"\r\n (keydown.enter)=\"finalizeParentEdit(item)\"\r\n (keydown.escape)=\"cancelParentEdit(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n {{item.name}}\r\n </div>\r\n }\r\n <span>{{item.children?.length || 0}}</span>\r\n </div>\r\n <div>\r\n <ui-switch\r\n [checked]=\"item.enabled\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n ></ui-switch>\r\n </div>\r\n <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n @if (!item.children?.length) {\r\n <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n }\r\n </div>\r\n <div class=\"tree-body\">\r\n @if (getFilteredChildren(item).length) {\r\n @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n <div\r\n class=\"tree-subitem\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n [class.is-pending]=\"isPendingCreate(subitem)\"\r\n [class.is-parent-disabled]=\"!item.enabled\"\r\n >\r\n <div class=\"tree-subitem-name\">\r\n <i\r\n class=\"ri-circle-fill tree-subitem-status\"\r\n [class.is-enabled]=\"subitem.enabled\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n ></i>\r\n @if (isEditingChild(subitem)) {\r\n <input\r\n #childNameInput\r\n class=\"tree-name-input tree-name-input--sub\"\r\n [attr.data-id]=\"subitem.id\"\r\n [value]=\"subitem.name\"\r\n (input)=\"updateChildName(item, subitem, $event)\"\r\n (blur)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <span\r\n class=\"tree-name-text\"\r\n (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n >{{subitem.name}}</span> \r\n @if (subitem.tag) {\r\n <span class=\"tree-tag tag-{{subitem.tagColor}}\" >{{subitem.tag}}</span>\r\n }\r\n }\r\n </div>\r\n <div class=\"tree-subitem-actions\">\r\n <ui-switch\r\n [checked]=\"subitem.enabled\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n ></ui-switch>\r\n <ui-button\r\n (click)=\"emitEditChild(item, subitem, $event)\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n icon=\"ri-edit-line\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n size=\"s\"\r\n ></ui-button>\r\n <ui-button \r\n (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n icon=\"ri-delete-bin-line\" \r\n [disabled]=\"isPendingCreate(subitem)\"\r\n type=\"ghost\" \r\n [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tree-empty\">\r\n {{emptyMessage | uicTranslate}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{color:var(--grey-900);padding:0 20px;cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}.tree-tag{font-size:11px;padding:2px 10px;font-weight:300;border-radius:10px}.tag-yellow{background-color:var(--yellow-100)}.tag-red{background-color:var(--red-100)}.tag-green{background-color:var(--green-100)}.tag-blue{background-color:var(--blue-100)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
7268
7315
|
}
|
|
7269
7316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, decorators: [{
|
|
7270
7317
|
type: Component,
|
|
@@ -7274,7 +7321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7274
7321
|
UicSkeletonLoaderComponent,
|
|
7275
7322
|
UicSwichComponent,
|
|
7276
7323
|
UicTranslatePipe
|
|
7277
|
-
], template: "@if (loading) {\r\n <div class=\"tree-skeleton\">\r\n <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n </div>\r\n} @else {\r\n @if (searchEnabled) {\r\n <div class=\"filter-bar\">\r\n {{'tree.search_label' | uicTranslate}}\r\n <ui-input>\r\n <input #inp [placeholder]=\"'tree.search_placeholder' | uicTranslate\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n </ui-input>\r\n <ui-button\r\n [iconOnly]=\"true\"\r\n icon=\"ri-eraser-line\"\r\n type=\"bordered\"\r\n color=\"black\"\r\n [disabled]=\"!filterTerm\"\r\n (click)=\"clearFilter(); inp.focus()\"\r\n ></ui-button>\r\n </div>\r\n }\r\n @for (item of tree; track item.id) {\r\n <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n <div class=\"tree-header-name\">\r\n @if (isEditingParent(item)) {\r\n <input\r\n #parentNameInput\r\n class=\"tree-name-input\"\r\n [attr.data-id]=\"item.id\"\r\n [value]=\"item.name\"\r\n (input)=\"updateParentName(item, $event)\"\r\n (blur)=\"finalizeParentEdit(item)\"\r\n (keydown.enter)=\"finalizeParentEdit(item)\"\r\n (keydown.escape)=\"cancelParentEdit(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n {{item.name}}\r\n </div>\r\n }\r\n <span>{{item.children?.length || 0}}</span>\r\n </div>\r\n <div>\r\n <ui-switch\r\n [checked]=\"item.enabled\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n ></ui-switch>\r\n </div>\r\n <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n @if (!item.children?.length) {\r\n <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n }\r\n </div>\r\n <div class=\"tree-body\">\r\n @if (getFilteredChildren(item).length) {\r\n @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n <div\r\n class=\"tree-subitem\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n [class.is-pending]=\"isPendingCreate(subitem)\"\r\n [class.is-parent-disabled]=\"!item.enabled\"\r\n >\r\n <div class=\"tree-subitem-name\">\r\n <i\r\n class=\"ri-circle-fill tree-subitem-status\"\r\n [class.is-enabled]=\"subitem.enabled\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n ></i>\r\n @if (isEditingChild(subitem)) {\r\n <input\r\n #childNameInput\r\n class=\"tree-name-input tree-name-input--sub\"\r\n [attr.data-id]=\"subitem.id\"\r\n [value]=\"subitem.name\"\r\n (input)=\"updateChildName(item, subitem, $event)\"\r\n (blur)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <span\r\n class=\"tree-name-text\"\r\n (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n >{{subitem.name}}</span>\r\n }\r\n </div>\r\n <div class=\"tree-subitem-actions\">\r\n <ui-switch\r\n [checked]=\"subitem.enabled\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n ></ui-switch>\r\n <ui-button\r\n (click)=\"emitEditChild(item, subitem, $event)\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n icon=\"ri-edit-line\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n size=\"s\"\r\n ></ui-button>\r\n <ui-button \r\n (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n icon=\"ri-delete-bin-line\" \r\n [disabled]=\"isPendingCreate(subitem)\"\r\n type=\"ghost\" \r\n [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tree-empty\">\r\n {{emptyMessage | uicTranslate}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}\n"] }]
|
|
7324
|
+
], template: "@if (loading) {\r\n <div class=\"tree-skeleton\">\r\n <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n </div>\r\n} @else {\r\n @if (searchEnabled) {\r\n <div class=\"filter-bar\">\r\n {{'tree.search_label' | uicTranslate}}\r\n <ui-input>\r\n <input #inp [placeholder]=\"'tree.search_placeholder' | uicTranslate\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n </ui-input>\r\n <ui-button\r\n [iconOnly]=\"true\"\r\n icon=\"ri-eraser-line\"\r\n type=\"bordered\"\r\n color=\"black\"\r\n [disabled]=\"!filterTerm\"\r\n (click)=\"clearFilter(); inp.focus()\"\r\n ></ui-button>\r\n </div>\r\n }\r\n @for (item of getVisibleTree(); track item.id) {\r\n <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n <div class=\"tree-header-name\">\r\n @if (isEditingParent(item)) {\r\n <input\r\n #parentNameInput\r\n class=\"tree-name-input\"\r\n [attr.data-id]=\"item.id\"\r\n [value]=\"item.name\"\r\n (input)=\"updateParentName(item, $event)\"\r\n (blur)=\"finalizeParentEdit(item)\"\r\n (keydown.enter)=\"finalizeParentEdit(item)\"\r\n (keydown.escape)=\"cancelParentEdit(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n {{item.name}}\r\n </div>\r\n }\r\n <span>{{item.children?.length || 0}}</span>\r\n </div>\r\n <div>\r\n <ui-switch\r\n [checked]=\"item.enabled\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n ></ui-switch>\r\n </div>\r\n <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n @if (!item.children?.length) {\r\n <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n }\r\n </div>\r\n <div class=\"tree-body\">\r\n @if (getFilteredChildren(item).length) {\r\n @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n <div\r\n class=\"tree-subitem\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n [class.is-pending]=\"isPendingCreate(subitem)\"\r\n [class.is-parent-disabled]=\"!item.enabled\"\r\n >\r\n <div class=\"tree-subitem-name\">\r\n <i\r\n class=\"ri-circle-fill tree-subitem-status\"\r\n [class.is-enabled]=\"subitem.enabled\"\r\n [class.is-disabled]=\"!subitem.enabled\"\r\n ></i>\r\n @if (isEditingChild(subitem)) {\r\n <input\r\n #childNameInput\r\n class=\"tree-name-input tree-name-input--sub\"\r\n [attr.data-id]=\"subitem.id\"\r\n [value]=\"subitem.name\"\r\n (input)=\"updateChildName(item, subitem, $event)\"\r\n (blur)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n } @else {\r\n <span\r\n class=\"tree-name-text\"\r\n (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n >{{subitem.name}}</span> \r\n @if (subitem.tag) {\r\n <span class=\"tree-tag tag-{{subitem.tagColor}}\" >{{subitem.tag}}</span>\r\n }\r\n }\r\n </div>\r\n <div class=\"tree-subitem-actions\">\r\n <ui-switch\r\n [checked]=\"subitem.enabled\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n ></ui-switch>\r\n <ui-button\r\n (click)=\"emitEditChild(item, subitem, $event)\"\r\n [disabled]=\"isPendingCreate(subitem)\"\r\n icon=\"ri-edit-line\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n size=\"s\"\r\n ></ui-button>\r\n <ui-button \r\n (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n icon=\"ri-delete-bin-line\" \r\n [disabled]=\"isPendingCreate(subitem)\"\r\n type=\"ghost\" \r\n [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tree-empty\">\r\n {{emptyMessage | uicTranslate}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{color:var(--grey-900);padding:0 20px;cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}.tree-tag{font-size:11px;padding:2px 10px;font-weight:300;border-radius:10px}.tag-yellow{background-color:var(--yellow-100)}.tag-red{background-color:var(--red-100)}.tag-green{background-color:var(--green-100)}.tag-blue{background-color:var(--blue-100)}\n"] }]
|
|
7278
7325
|
}], propDecorators: { searchEnabled: [{
|
|
7279
7326
|
type: Input
|
|
7280
7327
|
}], loading: [{
|
|
@@ -8481,7 +8528,7 @@ class FormPreviewComponent {
|
|
|
8481
8528
|
console.log(fr.form);
|
|
8482
8529
|
}
|
|
8483
8530
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
8484
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \r\n [schema]=\"schema\" \r\n [showButtons]=\"true\"\r\n (formSubmit)=\"save($event)\">\r\n</ui-form-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }] });
|
|
8531
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \r\n [schema]=\"schema\" \r\n [showButtons]=\"true\"\r\n (formSubmit)=\"save($event)\">\r\n</ui-form-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }] });
|
|
8485
8532
|
}
|
|
8486
8533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, decorators: [{
|
|
8487
8534
|
type: Component,
|
|
@@ -8529,11 +8576,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8529
8576
|
|
|
8530
8577
|
class FieldEditorComponent {
|
|
8531
8578
|
translateService = inject(UicTranslateService);
|
|
8579
|
+
elementRef = inject(ElementRef);
|
|
8580
|
+
currentFieldCode = null;
|
|
8532
8581
|
hasOptions = computed(() => {
|
|
8533
8582
|
const fieldType = this.fieldType();
|
|
8534
8583
|
return !!fieldType?.properties.includes('options');
|
|
8535
8584
|
});
|
|
8536
8585
|
config = input.required();
|
|
8586
|
+
focusRequiredField = input(false);
|
|
8537
8587
|
options = input({});
|
|
8538
8588
|
hiddenSections = signal([]);
|
|
8539
8589
|
fieldChange = output();
|
|
@@ -8568,8 +8618,19 @@ class FieldEditorComponent {
|
|
|
8568
8618
|
fieldType = computed(() => FIELDS_CONFIG.find(f => f.value === this.config().fieldData?.type));
|
|
8569
8619
|
constructor() {
|
|
8570
8620
|
effect(() => {
|
|
8571
|
-
const
|
|
8621
|
+
const config = this.config();
|
|
8622
|
+
const field = config.fieldData;
|
|
8572
8623
|
this.localField.set(field);
|
|
8624
|
+
if (this.currentFieldCode !== config.code) {
|
|
8625
|
+
this.currentFieldCode = config.code;
|
|
8626
|
+
this.scrollPropertiesToTop();
|
|
8627
|
+
}
|
|
8628
|
+
});
|
|
8629
|
+
}
|
|
8630
|
+
scrollPropertiesToTop() {
|
|
8631
|
+
requestAnimationFrame(() => {
|
|
8632
|
+
const scrollContainer = this.elementRef.nativeElement.closest('.formeditor-properties-form');
|
|
8633
|
+
scrollContainer?.scrollTo({ top: 0 });
|
|
8573
8634
|
});
|
|
8574
8635
|
}
|
|
8575
8636
|
updateRuleValue(fr) {
|
|
@@ -8581,6 +8642,7 @@ class FieldEditorComponent {
|
|
|
8581
8642
|
return;
|
|
8582
8643
|
const visibilityRules = {
|
|
8583
8644
|
fieldName,
|
|
8645
|
+
fieldLabel: this.getDependencyFieldLabel(fieldName),
|
|
8584
8646
|
operator,
|
|
8585
8647
|
value
|
|
8586
8648
|
};
|
|
@@ -8630,6 +8692,9 @@ class FieldEditorComponent {
|
|
|
8630
8692
|
this.localField.set(updatedField);
|
|
8631
8693
|
this.fieldChange.emit(updatedField);
|
|
8632
8694
|
}
|
|
8695
|
+
getDependencyFieldLabel(fieldName) {
|
|
8696
|
+
return this.options()['fieldName']?.find(option => option.id === fieldName)?.text ?? fieldName;
|
|
8697
|
+
}
|
|
8633
8698
|
toggleSection(section) {
|
|
8634
8699
|
const currentHidden = this.hiddenSections();
|
|
8635
8700
|
if (currentHidden.includes(section)) {
|
|
@@ -8678,7 +8743,7 @@ class FieldEditorComponent {
|
|
|
8678
8743
|
}));
|
|
8679
8744
|
}
|
|
8680
8745
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8681
|
-
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 }, 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 [fields]=\"requiredFields\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptions()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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<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 <ui-form-wrapper\n [fields]=\"branchFields\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\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)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { 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"] }] });
|
|
8746
|
+
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 }, 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 [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 (hasOptions()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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<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 <ui-form-wrapper\n [fields]=\"branchFields\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\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)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { 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"] }] });
|
|
8682
8747
|
}
|
|
8683
8748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
|
|
8684
8749
|
type: Component,
|
|
@@ -8687,7 +8752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8687
8752
|
UicButtonComponent,
|
|
8688
8753
|
UicTranslatePipe,
|
|
8689
8754
|
UicFieldOptionsEditorComponent
|
|
8690
|
-
], 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 [fields]=\"requiredFields\" \n [initialValues]=\"initialValues()\"\n [cols]=\"1\" \n (formChange)=\"updateFieldValues($event)\">\n </ui-form-wrapper>\n @if (hasOptions()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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<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 <ui-form-wrapper\n [fields]=\"branchFields\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\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)}\n"] }]
|
|
8755
|
+
], 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 [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 (hasOptions()) {\n <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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<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 <ui-form-wrapper\n [fields]=\"branchFields\" \n [initialValues]=\"branchInitialValues()\"\n [externalData]=\"options()\"\n [cols]=\"1\" \n (formChange)=\"updateRuleValue($event)\">\n </ui-form-wrapper>\n <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\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)}\n"] }]
|
|
8691
8756
|
}], ctorParameters: () => [] });
|
|
8692
8757
|
|
|
8693
8758
|
class FieldTypeSelectorComponent {
|
|
@@ -8744,7 +8809,7 @@ class BlockEditorComponent {
|
|
|
8744
8809
|
this.blockChange.emit({ ...this.block(), fields: nextFields });
|
|
8745
8810
|
}
|
|
8746
8811
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8747
|
-
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: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField" }, ngImport: i0, template: "<div class=\"form-block-card\">\n <div class=\"form-block-card-header\">\n <div>\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n </div>\n <ui-button [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n <div\n class=\"form-block-card-body\"\n cdkDropList\n [cdkDropListData]=\"block().fields\"\n (cdkDropListDropped)=\"reorderFields($event)\">\n \n <!-- FIELDS -->\n @for(edtField of block().fields; track edtField.code; let i = $index) {\n <div\n class=\"xfield-card\"\n cdkDrag\n [class.selected-field]=\"selectedFieldId === edtField.code\"\n (click)=\"selectField(edtField)\">\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n <div class=\"xfield-card-icon\">\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \n </div>\n <div class=\"xfield-card-body\">\n <b> {{edtField.fieldData.label}} \n @if(edtField.fieldData.visibilityRules) {\n <i class=\"branched-field ri-git-merge-line\"></i> \n <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\n }\n </b>\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n </div>\n <div class=\"xfield-card-actions\">\n <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n </div>\n\n }\n\n </div>\n <div class=\"new-field\">\n {{'form_builder.add_new_field' | uicTranslate}}\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n </div>\n</div>\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)}.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)}.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}\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", outputs: ["selectType"] }] });
|
|
8812
|
+
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: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField" }, ngImport: i0, template: "<div class=\"form-block-card\">\n <div class=\"form-block-card-header\">\n <div>\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n </div>\n <ui-button [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n <div\n class=\"form-block-card-body\"\n cdkDropList\n [cdkDropListData]=\"block().fields\"\n (cdkDropListDropped)=\"reorderFields($event)\">\n \n <!-- FIELDS -->\n @for(edtField of block().fields; track edtField.code; let i = $index) {\n <div\n class=\"xfield-card\"\n cdkDrag\n [class.selected-field]=\"selectedFieldId === edtField.code\"\n (click)=\"selectField(edtField)\">\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n <div class=\"xfield-card-icon\">\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \n </div>\n <div class=\"xfield-card-body\">\n <b> {{edtField.fieldData.label}} \n @if(edtField.fieldData.visibilityRules) {\n <i class=\"branched-field ri-git-merge-line\"></i> \n <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\n }\n </b>\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n </div>\n <div class=\"xfield-card-actions\">\n <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n </div>\n\n }\n\n </div>\n <div class=\"new-field\">\n {{'form_builder.add_new_field' | uicTranslate}}\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n </div>\n</div>\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)}.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)}.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", outputs: ["selectType"] }] });
|
|
8748
8813
|
}
|
|
8749
8814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, decorators: [{
|
|
8750
8815
|
type: Component,
|
|
@@ -8755,7 +8820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8755
8820
|
DragDropModule,
|
|
8756
8821
|
FormsModule,
|
|
8757
8822
|
FieldTypeSelectorComponent
|
|
8758
|
-
], template: "<div class=\"form-block-card\">\n <div class=\"form-block-card-header\">\n <div>\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n </div>\n <ui-button [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n <div\n class=\"form-block-card-body\"\n cdkDropList\n [cdkDropListData]=\"block().fields\"\n (cdkDropListDropped)=\"reorderFields($event)\">\n \n <!-- FIELDS -->\n @for(edtField of block().fields; track edtField.code; let i = $index) {\n <div\n class=\"xfield-card\"\n cdkDrag\n [class.selected-field]=\"selectedFieldId === edtField.code\"\n (click)=\"selectField(edtField)\">\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n <div class=\"xfield-card-icon\">\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \n </div>\n <div class=\"xfield-card-body\">\n <b> {{edtField.fieldData.label}} \n @if(edtField.fieldData.visibilityRules) {\n <i class=\"branched-field ri-git-merge-line\"></i> \n <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\n }\n </b>\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n </div>\n <div class=\"xfield-card-actions\">\n <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n </div>\n\n }\n\n </div>\n <div class=\"new-field\">\n {{'form_builder.add_new_field' | uicTranslate}}\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n </div>\n</div>\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)}.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)}.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}\n"] }]
|
|
8823
|
+
], template: "<div class=\"form-block-card\">\n <div class=\"form-block-card-header\">\n <div>\n <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n </div>\n <ui-button [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n <div\n class=\"form-block-card-body\"\n cdkDropList\n [cdkDropListData]=\"block().fields\"\n (cdkDropListDropped)=\"reorderFields($event)\">\n \n <!-- FIELDS -->\n @for(edtField of block().fields; track edtField.code; let i = $index) {\n <div\n class=\"xfield-card\"\n cdkDrag\n [class.selected-field]=\"selectedFieldId === edtField.code\"\n (click)=\"selectField(edtField)\">\n <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n <div class=\"xfield-card-icon\">\n <i [class]=\"edtField.field?.icon ?? ''\"></i> \n </div>\n <div class=\"xfield-card-body\">\n <b> {{edtField.fieldData.label}} \n @if(edtField.fieldData.visibilityRules) {\n <i class=\"branched-field ri-git-merge-line\"></i> \n <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\n }\n </b>\n <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n </div>\n <div class=\"xfield-card-actions\">\n <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n </div>\n </div>\n\n }\n\n </div>\n <div class=\"new-field\">\n {{'form_builder.add_new_field' | uicTranslate}}\n <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n </div>\n</div>\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)}.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)}.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"] }]
|
|
8759
8824
|
}], propDecorators: { selectedFieldId: [{
|
|
8760
8825
|
type: Input
|
|
8761
8826
|
}] } });
|
|
@@ -8776,7 +8841,12 @@ class UicUserFormbuilderComponent {
|
|
|
8776
8841
|
editingSnapshot = signal(null);
|
|
8777
8842
|
isReadOnly = signal(true);
|
|
8778
8843
|
selectedField = signal(null);
|
|
8844
|
+
focusNewFieldCode = signal(null);
|
|
8845
|
+
propertiesWidth = signal(250);
|
|
8779
8846
|
previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.editableCols()));
|
|
8847
|
+
isResizingProperties = false;
|
|
8848
|
+
resizeStartX = 0;
|
|
8849
|
+
resizeStartWidth = 0;
|
|
8780
8850
|
dependencyOptions = computed(() => {
|
|
8781
8851
|
const currentSelected = this.selectedField();
|
|
8782
8852
|
const options = this.editableBlocks()
|
|
@@ -8841,6 +8911,7 @@ class UicUserFormbuilderComponent {
|
|
|
8841
8911
|
const removedBlock = this.editableBlocks().find(block => block.code === code);
|
|
8842
8912
|
if (removedBlock && this.selectedField() && removedBlock.fields.some(field => field.code === this.selectedField()?.code)) {
|
|
8843
8913
|
this.selectedField.set(null);
|
|
8914
|
+
this.focusNewFieldCode.set(null);
|
|
8844
8915
|
}
|
|
8845
8916
|
this.editableBlocks.update(blocks => blocks.filter(block => block.code !== code));
|
|
8846
8917
|
}
|
|
@@ -8860,6 +8931,27 @@ class UicUserFormbuilderComponent {
|
|
|
8860
8931
|
this.editableBlocks.update(blocks => blocks.map(block => block.code === blockCode
|
|
8861
8932
|
? { ...block, fields: [...block.fields, updatedField] }
|
|
8862
8933
|
: block));
|
|
8934
|
+
this.selectedField.set(updatedField);
|
|
8935
|
+
this.focusNewFieldCode.set(updatedField.code);
|
|
8936
|
+
}
|
|
8937
|
+
selectField(field) {
|
|
8938
|
+
this.selectedField.set(field);
|
|
8939
|
+
this.focusNewFieldCode.set(null);
|
|
8940
|
+
}
|
|
8941
|
+
startPropertiesResize(event) {
|
|
8942
|
+
event.preventDefault();
|
|
8943
|
+
this.isResizingProperties = true;
|
|
8944
|
+
this.resizeStartX = event.clientX;
|
|
8945
|
+
this.resizeStartWidth = this.propertiesWidth();
|
|
8946
|
+
}
|
|
8947
|
+
onPropertiesResize(event) {
|
|
8948
|
+
if (!this.isResizingProperties)
|
|
8949
|
+
return;
|
|
8950
|
+
const nextWidth = this.resizeStartWidth + (this.resizeStartX - event.clientX);
|
|
8951
|
+
this.propertiesWidth.set(Math.min(Math.max(nextWidth, 250), 600));
|
|
8952
|
+
}
|
|
8953
|
+
stopPropertiesResize() {
|
|
8954
|
+
this.isResizingProperties = false;
|
|
8863
8955
|
}
|
|
8864
8956
|
printForm() {
|
|
8865
8957
|
this.modalService.openFloatingModal(FormPreviewComponent, {
|
|
@@ -8921,6 +9013,7 @@ class UicUserFormbuilderComponent {
|
|
|
8921
9013
|
this.editableCols.set(snapshot.cols ?? 2);
|
|
8922
9014
|
this.editableBlocks.set(this.prepareBlocksForLocalState(snapshot.blocks ?? []));
|
|
8923
9015
|
this.selectedField.set(null);
|
|
9016
|
+
this.focusNewFieldCode.set(null);
|
|
8924
9017
|
this.editingSnapshot.set(null);
|
|
8925
9018
|
this.isReadOnly.set(true);
|
|
8926
9019
|
}
|
|
@@ -8969,20 +9062,52 @@ class UicUserFormbuilderComponent {
|
|
|
8969
9062
|
}
|
|
8970
9063
|
hydrateBlocks(blocks) {
|
|
8971
9064
|
let changed = false;
|
|
9065
|
+
const dependencyLabelByName = new Map(blocks
|
|
9066
|
+
.flatMap(block => block.fields)
|
|
9067
|
+
.map(field => [
|
|
9068
|
+
field.fieldData.name,
|
|
9069
|
+
field.fieldData.label || field.fieldData.name
|
|
9070
|
+
]));
|
|
8972
9071
|
const hydratedBlocks = blocks.map(block => {
|
|
8973
9072
|
let blockChanged = false;
|
|
8974
9073
|
const hydratedFields = block.fields.map(field => {
|
|
8975
|
-
|
|
8976
|
-
|
|
8977
|
-
|
|
8978
|
-
|
|
8979
|
-
|
|
8980
|
-
|
|
8981
|
-
|
|
8982
|
-
|
|
8983
|
-
|
|
8984
|
-
|
|
8985
|
-
|
|
9074
|
+
let hydratedField = field;
|
|
9075
|
+
if (!field.field && field.type) {
|
|
9076
|
+
const fieldConfig = FIELDS_CONFIG.find(config => config.value === field.type);
|
|
9077
|
+
if (fieldConfig) {
|
|
9078
|
+
changed = true;
|
|
9079
|
+
blockChanged = true;
|
|
9080
|
+
hydratedField = {
|
|
9081
|
+
...hydratedField,
|
|
9082
|
+
field: fieldConfig
|
|
9083
|
+
};
|
|
9084
|
+
}
|
|
9085
|
+
}
|
|
9086
|
+
const visibilityRules = hydratedField.fieldData.visibilityRules;
|
|
9087
|
+
if (!visibilityRules?.length)
|
|
9088
|
+
return hydratedField;
|
|
9089
|
+
let rulesChanged = false;
|
|
9090
|
+
const hydratedRules = visibilityRules.map(rule => {
|
|
9091
|
+
const dependencyLabel = dependencyLabelByName.get(rule.fieldName) ?? rule.fieldName;
|
|
9092
|
+
if (rule.fieldLabel === dependencyLabel)
|
|
9093
|
+
return rule;
|
|
9094
|
+
changed = true;
|
|
9095
|
+
blockChanged = true;
|
|
9096
|
+
rulesChanged = true;
|
|
9097
|
+
return {
|
|
9098
|
+
...rule,
|
|
9099
|
+
fieldLabel: dependencyLabel
|
|
9100
|
+
};
|
|
9101
|
+
});
|
|
9102
|
+
return !rulesChanged
|
|
9103
|
+
? hydratedField
|
|
9104
|
+
: {
|
|
9105
|
+
...hydratedField,
|
|
9106
|
+
fieldData: {
|
|
9107
|
+
...hydratedField.fieldData,
|
|
9108
|
+
visibilityRules: hydratedRules
|
|
9109
|
+
}
|
|
9110
|
+
};
|
|
8986
9111
|
});
|
|
8987
9112
|
return blockChanged ? { ...block, fields: hydratedFields } : block;
|
|
8988
9113
|
});
|
|
@@ -9014,7 +9139,7 @@ class UicUserFormbuilderComponent {
|
|
|
9014
9139
|
return value;
|
|
9015
9140
|
}
|
|
9016
9141
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9017
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n <div class=\"formeditor-header\">\r\n <div style=\"flex: 1 1;\">\r\n {{formTitle}} \r\n \r\n <div class=\"cols-selector\"> \r\n @if (isReadOnly()) {\r\n {{editableCols()}}\r\n }@else {\r\n <ui-select [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n }\r\n col(s)</div>\r\n </div>\r\n @if (isReadOnly()) {\r\n @if (!disabled) {\r\n <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n }\r\n } @else {\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n }\r\n </div>\r\n @if (!isReadOnly()) {\r\n <div class=\"formeditor-body\">\r\n \r\n <!-- BLOCKS -->\r\n <div class=\"formeditor-overflow\">\r\n <div class=\"formeditor-workarea\">\r\n @for (block of editableBlocks(); track block.code; let i = $index) {\r\n <lib-block-editor \r\n [block]=\"block\"\r\n [selectedFieldId]=\"selectedField()?.code ?? null\"\
|
|
9142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, host: { listeners: { "document:mousemove": "onPropertiesResize($event)", "document:mouseup": "stopPropertiesResize()" } }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n <div class=\"formeditor-header\">\r\n <div style=\"flex: 1 1;\">\r\n {{formTitle}} \r\n \r\n <div class=\"cols-selector\"> \r\n @if (isReadOnly()) {\r\n {{editableCols()}}\r\n }@else {\r\n <ui-select [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n }\r\n col(s)</div>\r\n </div>\r\n @if (isReadOnly()) {\r\n @if (!disabled) {\r\n <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n }\r\n } @else {\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n }\r\n </div>\r\n @if (!isReadOnly()) {\r\n <div class=\"formeditor-body\">\r\n \r\n <!-- BLOCKS -->\r\n <div class=\"formeditor-overflow\">\r\n <div class=\"formeditor-workarea\">\r\n @for (block of editableBlocks(); track block.code; let i = $index) {\r\n <lib-block-editor \r\n [block]=\"block\"\r\n [selectedFieldId]=\"selectedField()?.code ?? null\"\n (blockChange)=\"onBlockChange(i, $event)\"\n (addFieldRequest)=\"addField(block.code, $event)\"\n (notifySelectedField)=\"selectField($event)\"\n (deleteBlock)=\"deleteBlock($event)\">\n </lib-block-editor>\n }\r\n <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n </div>\r\n </div>\r\n <!-- PROPERTIES -->\r\n <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\n <div\n class=\"formeditor-properties-resize\"\n (mousedown)=\"startPropertiesResize($event)\">\n </div>\n <h3>Propiedades</h3>\n <div class=\"formeditor-properties-form\">\n @if (selectedField() ) {\r\n <lib-field-editor \n [config]=\"selectedField()!\"\n [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n [options]=\"dependencyOptions()\"\n (fieldChange)=\"onFieldChange($event)\">\n </lib-field-editor>\n }@else{\r\n <div class=\"no-selected-field\">\r\n <i class=\"ri-edit-box-line\"></i>\r\n <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"form-preview\">\r\n <ui-form-wrapper \r\n [schema]=\"previewSchema()\"\r\n [showButtons]=\"false\">\r\n </ui-form-wrapper>\r\n </div>\r\n }\r\n </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "focusRequiredField", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }] });
|
|
9018
9143
|
}
|
|
9019
9144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
|
|
9020
9145
|
type: Component,
|
|
@@ -9026,11 +9151,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
9026
9151
|
FormsModule,
|
|
9027
9152
|
BlockEditorComponent,
|
|
9028
9153
|
UicSelectComponent
|
|
9029
|
-
], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n <div class=\"formeditor-header\">\r\n <div style=\"flex: 1 1;\">\r\n {{formTitle}} \r\n \r\n <div class=\"cols-selector\"> \r\n @if (isReadOnly()) {\r\n {{editableCols()}}\r\n }@else {\r\n <ui-select [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n }\r\n col(s)</div>\r\n </div>\r\n @if (isReadOnly()) {\r\n @if (!disabled) {\r\n <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n }\r\n } @else {\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n }\r\n </div>\r\n @if (!isReadOnly()) {\r\n <div class=\"formeditor-body\">\r\n \r\n <!-- BLOCKS -->\r\n <div class=\"formeditor-overflow\">\r\n <div class=\"formeditor-workarea\">\r\n @for (block of editableBlocks(); track block.code; let i = $index) {\r\n <lib-block-editor \r\n [block]=\"block\"\r\n [selectedFieldId]=\"selectedField()?.code ?? null\"\
|
|
9154
|
+
], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n <div class=\"formeditor-header\">\r\n <div style=\"flex: 1 1;\">\r\n {{formTitle}} \r\n \r\n <div class=\"cols-selector\"> \r\n @if (isReadOnly()) {\r\n {{editableCols()}}\r\n }@else {\r\n <ui-select [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n }\r\n col(s)</div>\r\n </div>\r\n @if (isReadOnly()) {\r\n @if (!disabled) {\r\n <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n }\r\n } @else {\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n }\r\n </div>\r\n @if (!isReadOnly()) {\r\n <div class=\"formeditor-body\">\r\n \r\n <!-- BLOCKS -->\r\n <div class=\"formeditor-overflow\">\r\n <div class=\"formeditor-workarea\">\r\n @for (block of editableBlocks(); track block.code; let i = $index) {\r\n <lib-block-editor \r\n [block]=\"block\"\r\n [selectedFieldId]=\"selectedField()?.code ?? null\"\n (blockChange)=\"onBlockChange(i, $event)\"\n (addFieldRequest)=\"addField(block.code, $event)\"\n (notifySelectedField)=\"selectField($event)\"\n (deleteBlock)=\"deleteBlock($event)\">\n </lib-block-editor>\n }\r\n <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n </div>\r\n </div>\r\n <!-- PROPERTIES -->\r\n <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\n <div\n class=\"formeditor-properties-resize\"\n (mousedown)=\"startPropertiesResize($event)\">\n </div>\n <h3>Propiedades</h3>\n <div class=\"formeditor-properties-form\">\n @if (selectedField() ) {\r\n <lib-field-editor \n [config]=\"selectedField()!\"\n [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n [options]=\"dependencyOptions()\"\n (fieldChange)=\"onFieldChange($event)\">\n </lib-field-editor>\n }@else{\r\n <div class=\"no-selected-field\">\r\n <i class=\"ri-edit-box-line\"></i>\r\n <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"form-preview\">\r\n <ui-form-wrapper \r\n [schema]=\"previewSchema()\"\r\n [showButtons]=\"false\">\r\n </ui-form-wrapper>\r\n </div>\r\n }\r\n </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\n"] }]
|
|
9030
9155
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
9031
9156
|
type: Input
|
|
9032
9157
|
}], formTitle: [{
|
|
9033
9158
|
type: Input
|
|
9159
|
+
}], onPropertiesResize: [{
|
|
9160
|
+
type: HostListener,
|
|
9161
|
+
args: ['document:mousemove', ['$event']]
|
|
9162
|
+
}], stopPropertiesResize: [{
|
|
9163
|
+
type: HostListener,
|
|
9164
|
+
args: ['document:mouseup']
|
|
9034
9165
|
}] } });
|
|
9035
9166
|
|
|
9036
9167
|
class RuleDefinirionComponent {
|
|
@@ -9216,7 +9347,7 @@ class RuleDefinirionComponent {
|
|
|
9216
9347
|
return condition.id === 0 ? (condition.temporalId ?? '') : condition.id;
|
|
9217
9348
|
}
|
|
9218
9349
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
9219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\n@if (newRule) {\n <ui-form-wrapper #formWrapper \n (formChange)=\"updateFormNewRule($event)\"\n (formSubmit)=\"createAndSelectRule($event)\" \n [initialValues]=\"initialValues\"\n [fields]=\"fields\" \n [cols]=\"2\"></ui-form-wrapper>\n <div class=\"condition-btns\">\n <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\n <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\n </div>\n} @else {\n <div class=\"condition-searcher\">\n <ui-input>\n <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\n </ui-input>\n <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\n </div>\n\n @if (paginatedConditions.length > 0) {\n @for (condition of paginatedConditions; track $index) {\n <div class=\"condition\" [class.condition-selected]=\"isSelected(condition)\">\n <i class=\"ri-align-item-horizontal-center-line\"></i>\n <div style=\"flex: 1 1;\">\n <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span></div>\n @if (customNamesEnabled) {\n <div class=\"condition-body\">\n <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\n <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\n <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\n </div>\n }\n </div>\n @if (!isSelected(condition)) {\n <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\n }\n </div>\n }\n } @else {\n <div class=\"condition\">\n <div class=\"condition-emptytext\">\n {{ 'rule_builder.definition.no_results' | uicTranslate }}\n </div>\n </div>\n }\n\n <div class=\"condition-pagination\">\n <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\n <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\n <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\n </div>\n}\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition-emptytext{font-size:12px;text-align:center;color:var(--grey-400);padding:10px;width:100%}.condition i{color:var(--blue-600)}.condition-selected{border-color:var(--blue-500);background:linear-gradient(135deg,var(--blue-50) 0%,#eef6ff 100%);box-shadow:inset 0 0 0 1px #2563eb1f}.condition-selected .condition-title{color:var(--blue-800)}.condition-selected .condition-body,.condition-selected i{color:var(--blue-700)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"], dependencies: [{ 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: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
9350
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\n@if (newRule) {\n <ui-form-wrapper #formWrapper \n (formChange)=\"updateFormNewRule($event)\"\n (formSubmit)=\"createAndSelectRule($event)\" \n [initialValues]=\"initialValues\"\n [fields]=\"fields\" \n [cols]=\"2\"></ui-form-wrapper>\n <div class=\"condition-btns\">\n <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\n <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\n </div>\n} @else {\n <div class=\"condition-searcher\">\n <ui-input>\n <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\n </ui-input>\n <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\n </div>\n\n @if (paginatedConditions.length > 0) {\n @for (condition of paginatedConditions; track $index) {\n <div class=\"condition\" [class.condition-selected]=\"isSelected(condition)\">\n <i class=\"ri-align-item-horizontal-center-line\"></i>\n <div style=\"flex: 1 1;\">\n <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span></div>\n @if (customNamesEnabled) {\n <div class=\"condition-body\">\n <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\n <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\n <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\n </div>\n }\n </div>\n @if (!isSelected(condition)) {\n <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\n }\n </div>\n }\n } @else {\n <div class=\"condition\">\n <div class=\"condition-emptytext\">\n {{ 'rule_builder.definition.no_results' | uicTranslate }}\n </div>\n </div>\n }\n\n <div class=\"condition-pagination\">\n <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\n <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\n <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\n </div>\n}\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition-emptytext{font-size:12px;text-align:center;color:var(--grey-400);padding:10px;width:100%}.condition i{color:var(--blue-600)}.condition-selected{border-color:var(--blue-500);background:linear-gradient(135deg,var(--blue-50) 0%,#eef6ff 100%);box-shadow:inset 0 0 0 1px #2563eb1f}.condition-selected .condition-title{color:var(--blue-800)}.condition-selected .condition-body,.condition-selected i{color:var(--blue-700)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"], dependencies: [{ 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: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
9220
9351
|
}
|
|
9221
9352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
|
|
9222
9353
|
type: Component,
|
|
@@ -9770,7 +9901,7 @@ class UicRuleBuilderComponent {
|
|
|
9770
9901
|
this.nextTemporalConditionId = nextId + 1;
|
|
9771
9902
|
}
|
|
9772
9903
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9773
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { disabled: "disabled", customNamesEnabled: "customNamesEnabled", conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", ruleTitle: "ruleTitle", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "\r\n<div class=\"rule-tools\">\r\n <h3>\r\n {{resolvedTitle}}\r\n </h3>\r\n @if (editing) {\r\n <ui-button [uiTooltip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n }@else {\r\n @if (!disabled) {\r\n <ui-button [uiTooltip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n }\r\n }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n <div class=\"rule-container-workspace\">\r\n @if (editing) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n </ng-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n }\r\n @if (editorRules.length==0) {\r\n <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n }\r\n </div>\r\n @if (editing) {\r\n <div class=\"rule-btns\">\r\n <ui-button color=\"black\" type=\"bordered\" [uiTooltip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" [uiTooltip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n @for (rule of rules; track $index; let i = $index) {\r\n @if (rule.type === 'condition') {\r\n <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n <div [uiTooltip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n <div\r\n class=\"condition-box\"\r\n [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n @if (rule.value == null || rule.value === '') {\r\n {{ 'rule_builder.select_condition' | uicTranslate }}\r\n } @else if (isConditionLabelPending(rule.value)) {\r\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n } @else {\r\n {{ getConditionLabel(rule.value) }}\r\n }\r\n </div>\r\n </div>\r\n <ui-button [uiTooltip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n </div>\r\n }\r\n @if (rule.type === 'operator') {\r\n <div [uiTooltip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n (click)=\"changeOperator(rules, i)\"\r\n class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n {{ getOperatorLabel(rule.value) }}\r\n </div>\r\n }\r\n @if (rule.type === 'group') {\r\n <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n <div class=\"rule-groups-tools\">\r\n <ui-button [uiTooltip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n </div>\r\n <div class=\"rule-groups-items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n @if (editorRules.length > 0) {\r\n <div class=\"rule-friendly-output\">\r\n <ng-container\r\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n </ng-container>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n <div class=\"readonly\">\r\n @if (isGroup) {\r\n <div class=\"readonly-group\">(</div>\r\n }\r\n \r\n @for (rule of rules; track $index) {\r\n @if (rule.type === 'condition') {\r\n <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [uiTooltip]=\"getConditionDetailTip(rule.value)\">\r\n @if (isConditionLabelPending(rule.value)) {\r\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n } @else {\r\n {{ getConditionLabel(rule.value) }}\r\n }\r\n </div>\r\n }\r\n \r\n @if (rule.type === 'operator') {\r\n <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n }\r\n \r\n @if (rule.type === 'group') {\r\n <div class=\"readonly-group\">\r\n <ng-container\r\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n </ng-container>\r\n </div>\r\n }\r\n }\r\n \r\n @if (isGroup) {\r\n <div class=\"readonly-group\">)</div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
9904
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { disabled: "disabled", customNamesEnabled: "customNamesEnabled", conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", ruleTitle: "ruleTitle", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "\r\n<div class=\"rule-tools\">\r\n <div class=\"rule-tools-title\">\r\n {{resolvedTitle}}\r\n </div>\r\n @if (editing) {\r\n <ui-button [uiTooltip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n }@else {\r\n @if (!disabled) {\r\n <ui-button [uiTooltip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n }\r\n }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n <div class=\"rule-container-workspace\">\r\n @if (editing) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n </ng-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n }\r\n @if (editorRules.length==0) {\r\n <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n }\r\n </div>\r\n @if (editing) {\r\n <div class=\"rule-btns\">\r\n <ui-button color=\"black\" type=\"bordered\" [uiTooltip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" [uiTooltip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n @for (rule of rules; track $index; let i = $index) {\r\n @if (rule.type === 'condition') {\r\n <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n <div [uiTooltip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n <div\r\n class=\"condition-box\"\r\n [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n @if (rule.value == null || rule.value === '') {\r\n {{ 'rule_builder.select_condition' | uicTranslate }}\r\n } @else if (isConditionLabelPending(rule.value)) {\r\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n } @else {\r\n {{ getConditionLabel(rule.value) }}\r\n }\r\n </div>\r\n </div>\r\n <ui-button [uiTooltip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n </div>\r\n }\r\n @if (rule.type === 'operator') {\r\n <div [uiTooltip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n (click)=\"changeOperator(rules, i)\"\r\n class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n {{ getOperatorLabel(rule.value) }}\r\n </div>\r\n }\r\n @if (rule.type === 'group') {\r\n <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n <div class=\"rule-groups-tools\">\r\n <ui-button [uiTooltip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n </div>\r\n <div class=\"rule-groups-items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n @if (editorRules.length > 0) {\r\n <div class=\"rule-friendly-output\">\r\n <ng-container\r\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n </ng-container>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n <div class=\"readonly\">\r\n @if (isGroup) {\r\n <div class=\"readonly-group\">(</div>\r\n }\r\n \r\n @for (rule of rules; track $index) {\r\n @if (rule.type === 'condition') {\r\n <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [uiTooltip]=\"getConditionDetailTip(rule.value)\">\r\n @if (isConditionLabelPending(rule.value)) {\r\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n } @else {\r\n {{ getConditionLabel(rule.value) }}\r\n }\r\n </div>\r\n }\r\n \r\n @if (rule.type === 'operator') {\r\n <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n }\r\n \r\n @if (rule.type === 'group') {\r\n <div class=\"readonly-group\">\r\n <ng-container\r\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n </ng-container>\r\n </div>\r\n }\r\n }\r\n \r\n @if (isGroup) {\r\n <div class=\"readonly-group\">)</div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools-title{flex:1 1;font-size:20px;font-weight:500;color:var(--grey-700)}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
9774
9905
|
}
|
|
9775
9906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
|
|
9776
9907
|
type: Component,
|
|
@@ -9780,7 +9911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
9780
9911
|
FormsModule,
|
|
9781
9912
|
UicToolTipDirective,
|
|
9782
9913
|
UicTranslatePipe
|
|
9783
|
-
], template: "\r\n<div class=\"rule-tools\">\r\n <
|
|
9914
|
+
], template: "\r\n<div class=\"rule-tools\">\r\n <div class=\"rule-tools-title\">\r\n {{resolvedTitle}}\r\n </div>\r\n @if (editing) {\r\n <ui-button [uiTooltip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n }@else {\r\n @if (!disabled) {\r\n <ui-button [uiTooltip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n }\r\n }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n <div class=\"rule-container-workspace\">\r\n @if (editing) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n </ng-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n }\r\n @if (editorRules.length==0) {\r\n <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n }\r\n </div>\r\n @if (editing) {\r\n <div class=\"rule-btns\">\r\n <ui-button color=\"black\" type=\"bordered\" [uiTooltip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" [uiTooltip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n @for (rule of rules; track $index; let i = $index) {\r\n @if (rule.type === 'condition') {\r\n <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n <div [uiTooltip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n <div\r\n class=\"condition-box\"\r\n [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n @if (rule.value == null || rule.value === '') {\r\n {{ 'rule_builder.select_condition' | uicTranslate }}\r\n } @else if (isConditionLabelPending(rule.value)) {\r\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n } @else {\r\n {{ getConditionLabel(rule.value) }}\r\n }\r\n </div>\r\n </div>\r\n <ui-button [uiTooltip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n </div>\r\n }\r\n @if (rule.type === 'operator') {\r\n <div [uiTooltip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n (click)=\"changeOperator(rules, i)\"\r\n class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n {{ getOperatorLabel(rule.value) }}\r\n </div>\r\n }\r\n @if (rule.type === 'group') {\r\n <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n <div class=\"rule-groups-tools\">\r\n <ui-button [uiTooltip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n <ui-button [uiTooltip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n </div>\r\n <div class=\"rule-groups-items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n @if (editorRules.length > 0) {\r\n <div class=\"rule-friendly-output\">\r\n <ng-container\r\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n </ng-container>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n <div class=\"readonly\">\r\n @if (isGroup) {\r\n <div class=\"readonly-group\">(</div>\r\n }\r\n \r\n @for (rule of rules; track $index) {\r\n @if (rule.type === 'condition') {\r\n <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [uiTooltip]=\"getConditionDetailTip(rule.value)\">\r\n @if (isConditionLabelPending(rule.value)) {\r\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n } @else {\r\n {{ getConditionLabel(rule.value) }}\r\n }\r\n </div>\r\n }\r\n \r\n @if (rule.type === 'operator') {\r\n <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n }\r\n \r\n @if (rule.type === 'group') {\r\n <div class=\"readonly-group\">\r\n <ng-container\r\n *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n </ng-container>\r\n </div>\r\n }\r\n }\r\n \r\n @if (isGroup) {\r\n <div class=\"readonly-group\">)</div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools-title{flex:1 1;font-size:20px;font-weight:500;color:var(--grey-700)}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
9784
9915
|
}], propDecorators: { disabled: [{
|
|
9785
9916
|
type: Input
|
|
9786
9917
|
}], customNamesEnabled: [{
|