ui-core-abv 0.6.48 → 0.6.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -1602,7 +1602,7 @@ class UicFileInputComponent extends base$a {
|
|
|
1602
1602
|
useExisting: forwardRef(() => UicFileInputComponent),
|
|
1603
1603
|
multi: true
|
|
1604
1604
|
}
|
|
1605
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\
|
|
1605
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\n #fileInput\n class=\"fileinput-native\"\n type=\"file\"\n (change)=\"onNativeInputChange($event)\"\n [attr.multiple]=\"multy ? '' : null\"\n [attr.accept]=\"acceptAttribute\"\n [disabled]=\"disabled || loading\"\n />\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\n", styles: [":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(--primary-500)}.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", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
|
|
1606
1606
|
}
|
|
1607
1607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, decorators: [{
|
|
1608
1608
|
type: Component,
|
|
@@ -1612,7 +1612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1612
1612
|
useExisting: forwardRef(() => UicFileInputComponent),
|
|
1613
1613
|
multi: true
|
|
1614
1614
|
}
|
|
1615
|
-
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\
|
|
1615
|
+
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\n #fileInput\n class=\"fileinput-native\"\n type=\"file\"\n (change)=\"onNativeInputChange($event)\"\n [attr.multiple]=\"multy ? '' : null\"\n [attr.accept]=\"acceptAttribute\"\n [disabled]=\"disabled || loading\"\n />\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>\n", styles: [":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(--primary-500)}.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", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
|
|
1616
1616
|
}], propDecorators: { icon: [{
|
|
1617
1617
|
type: Input
|
|
1618
1618
|
}], iconColor: [{
|
|
@@ -2513,7 +2513,7 @@ class UicSelectComponent extends base$6 {
|
|
|
2513
2513
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
2514
2514
|
multi: true
|
|
2515
2515
|
}
|
|
2516
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\n<ui-input-wrapper\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [label]=\"label\"\n [error]=\"error\"\n [tip]=\"tip\"\n [disabled]=\"disabled\">\n <div class=\"fakeinput-wrapp\" > \n <!-- INPUT -->\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\n @if (internalIcon) {\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\n }\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\n @if (selectedOption?.icon) {\n <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\n </div>\n @if (!disabled && !loading) {\n <i class=\"ri-arrow-down-s-line\"></i>\n }\n </div> \n <!-- DESPLEGABLE -->\n <ng-template #dropdownTemplate >\n <div class=\"input-options\">\n @if (showSearcher) {\n <div class=\"select-searcher\">\n <input\n #searchInput\n type=\"text\"\n [placeholder]=\"'select.search_placeholder'|uicTranslate\"\n [value]=\"searchTerm\"\n (input)=\"updateSearchTerm($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\">\n <ui-button\n icon=\"ri-close-line\"\n size=\"s\"\n type=\"ghost\"\n color=\"red\"\n [iconOnly]=\"true\"\n (click)=\"clearSearch($event)\">\n </ui-button>\n </div>\n }\n <!-- OPCIONES -->\n <div class=\"input-option-scroll\">\n @if (options.length > 0 && nullable) {\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\n <div class=\"option-divider\"></div>\n }\n \n \n @for (option of filteredOptions; track $index) {\n <div (click)=\"selectOption(option)\" class=\"input-option\">\n @if (option.icon) {\n <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n <div style=\"padding: 2px;\" >\n <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\n {{option.detail}}\n </div>\n </div>\n </div>\n @if ( $index < (filteredOptions.length - 1) ) {\n <span class=\"option-divider\"></span>\n }\n \n }\n \n @if (filteredOptions.length == 0) {\n <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\n }\n </div>\n </div>\n </ng-template>\n \n </div>\n</ui-input-wrapper>\n", styles: [":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(--primary-500)}.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"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
2516
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n @if (selectedOption?.icon) {\r\n <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n }\r\n {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n </div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n @if (showSearcher) {\r\n <div class=\"select-searcher\">\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n [value]=\"searchTerm\"\r\n (input)=\"updateSearchTerm($any($event.target).value)\"\r\n (click)=\"$event.stopPropagation()\">\r\n <ui-button\r\n icon=\"ri-close-line\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n color=\"red\"\r\n [iconOnly]=\"true\"\r\n (click)=\"clearSearch($event)\">\r\n </ui-button>\r\n </div>\r\n }\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n \r\n \r\n @for (option of filteredOptions; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n @if (option.icon) {\r\n <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n }\r\n <div style=\"padding: 2px;\" >\r\n <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n {{option.detail}}\r\n </div>\r\n </div>\r\n </div>\r\n @if ( $index < (filteredOptions.length - 1) ) {\r\n <span class=\"option-divider\"></span>\r\n }\r\n \r\n }\r\n \r\n @if (filteredOptions.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":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(--primary-500)}.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"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
2517
2517
|
}
|
|
2518
2518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
|
|
2519
2519
|
type: Component,
|
|
@@ -2523,7 +2523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2523
2523
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
2524
2524
|
multi: true
|
|
2525
2525
|
}
|
|
2526
|
-
], template: "\n<ui-input-wrapper\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [label]=\"label\"\n [error]=\"error\"\n [tip]=\"tip\"\n [disabled]=\"disabled\">\n <div class=\"fakeinput-wrapp\" > \n <!-- INPUT -->\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\n @if (internalIcon) {\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\n }\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\n @if (selectedOption?.icon) {\n <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\n </div>\n @if (!disabled && !loading) {\n <i class=\"ri-arrow-down-s-line\"></i>\n }\n </div> \n <!-- DESPLEGABLE -->\n <ng-template #dropdownTemplate >\n <div class=\"input-options\">\n @if (showSearcher) {\n <div class=\"select-searcher\">\n <input\n #searchInput\n type=\"text\"\n [placeholder]=\"'select.search_placeholder'|uicTranslate\"\n [value]=\"searchTerm\"\n (input)=\"updateSearchTerm($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\">\n <ui-button\n icon=\"ri-close-line\"\n size=\"s\"\n type=\"ghost\"\n color=\"red\"\n [iconOnly]=\"true\"\n (click)=\"clearSearch($event)\">\n </ui-button>\n </div>\n }\n <!-- OPCIONES -->\n <div class=\"input-option-scroll\">\n @if (options.length > 0 && nullable) {\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\n <div class=\"option-divider\"></div>\n }\n \n \n @for (option of filteredOptions; track $index) {\n <div (click)=\"selectOption(option)\" class=\"input-option\">\n @if (option.icon) {\n <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\n }\n <div style=\"padding: 2px;\" >\n <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\n {{option.detail}}\n </div>\n </div>\n </div>\n @if ( $index < (filteredOptions.length - 1) ) {\n <span class=\"option-divider\"></span>\n }\n \n }\n \n @if (filteredOptions.length == 0) {\n <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\n }\n </div>\n </div>\n </ng-template>\n \n </div>\n</ui-input-wrapper>\n", styles: [":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(--primary-500)}.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"] }]
|
|
2526
|
+
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n @if (selectedOption?.icon) {\r\n <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n }\r\n {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n </div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n @if (showSearcher) {\r\n <div class=\"select-searcher\">\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n [value]=\"searchTerm\"\r\n (input)=\"updateSearchTerm($any($event.target).value)\"\r\n (click)=\"$event.stopPropagation()\">\r\n <ui-button\r\n icon=\"ri-close-line\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n color=\"red\"\r\n [iconOnly]=\"true\"\r\n (click)=\"clearSearch($event)\">\r\n </ui-button>\r\n </div>\r\n }\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n \r\n \r\n @for (option of filteredOptions; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n @if (option.icon) {\r\n <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n }\r\n <div style=\"padding: 2px;\" >\r\n <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n {{option.detail}}\r\n </div>\r\n </div>\r\n </div>\r\n @if ( $index < (filteredOptions.length - 1) ) {\r\n <span class=\"option-divider\"></span>\r\n }\r\n \r\n }\r\n \r\n @if (filteredOptions.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [":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(--primary-500)}.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"] }]
|
|
2527
2527
|
}], propDecorators: { icon: [{
|
|
2528
2528
|
type: Input
|
|
2529
2529
|
}], iconColor: [{
|
|
@@ -4706,7 +4706,7 @@ class UicDropdownContainerComponent {
|
|
|
4706
4706
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
4707
4707
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
4708
4708
|
},
|
|
4709
|
-
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\
|
|
4709
|
+
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
4710
4710
|
}
|
|
4711
4711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
|
|
4712
4712
|
type: Component,
|
|
@@ -4715,7 +4715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4715
4715
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
4716
4716
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
4717
4717
|
},
|
|
4718
|
-
], template: "\
|
|
4718
|
+
], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
|
|
4719
4719
|
}], propDecorators: { buttonLabel: [{
|
|
4720
4720
|
type: Input
|
|
4721
4721
|
}], disabled: [{
|
|
@@ -5113,11 +5113,11 @@ class UicActionButtonComponent {
|
|
|
5113
5113
|
}
|
|
5114
5114
|
}
|
|
5115
5115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { icon: "icon", options: "options", multiselect: "multiselect", size: "size" }, outputs: { optionSelected: "optionSelected", optionsApplied: "optionsApplied" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\
|
|
5116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { icon: "icon", options: "options", multiselect: "multiselect", size: "size" }, outputs: { optionSelected: "optionSelected", optionsApplied: "optionsApplied" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\n </div>\n }\n </div>\n\r\n <!-- Footer con bot\u00F3n aplicar -->\r\n @if (multiselect) {\r\n <div class=\"action-menu-footer\">\r\n <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"], dependencies: [{ kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
5117
5117
|
}
|
|
5118
5118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, decorators: [{
|
|
5119
5119
|
type: Component,
|
|
5120
|
-
args: [{ selector: 'ui-action-button', imports: [UicCheckboxComponent, UicButtonComponent, FormsModule, UicTranslatePipe], template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\
|
|
5120
|
+
args: [{ selector: 'ui-action-button', imports: [UicCheckboxComponent, UicButtonComponent, FormsModule, UicTranslatePipe], template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n @if (multiselect) {\r\n <div class=\"action-menu-header\">\r\n <ui-checkbox [noPadding]=\"true\" \r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n </div>\r\n }\r\n <div class=\"action-menu-body\">\r\n @for (opt of options; track $index) {\r\n <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n @if (multiselect) {\r\n <div>\r\n <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n </div>\r\n }\r\n @if (icon) {\r\n <i [class]=\"opt.icon\"></i>\r\n }\r\n <span>{{ opt.label | uicTranslate }}</span>\n </div>\n }\n </div>\n\r\n <!-- Footer con bot\u00F3n aplicar -->\r\n @if (multiselect) {\r\n <div class=\"action-menu-footer\">\r\n <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"] }]
|
|
5121
5121
|
}], propDecorators: { icon: [{
|
|
5122
5122
|
type: Input
|
|
5123
5123
|
}], options: [{
|
|
@@ -5244,7 +5244,7 @@ class TinyAlertComponent {
|
|
|
5244
5244
|
this.modalRef.closeFloating(value ? this.response : null);
|
|
5245
5245
|
}
|
|
5246
5246
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\
|
|
5247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\n \r\n @if ( data.showInput ){\r\n <ui-input>\r\n <input type=\"text\">\r\n </ui-input>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { 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" }] });
|
|
5248
5248
|
}
|
|
5249
5249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
5250
5250
|
type: Component,
|
|
@@ -5252,7 +5252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5252
5252
|
UicButtonComponent,
|
|
5253
5253
|
UicInputComponent,
|
|
5254
5254
|
UicTranslatePipe
|
|
5255
|
-
], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\
|
|
5255
|
+
], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\n \r\n @if ( data.showInput ){\r\n <ui-input>\r\n <input type=\"text\">\r\n </ui-input>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
|
|
5256
5256
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5257
5257
|
type: Inject,
|
|
5258
5258
|
args: [MODAL_DATA]
|
|
@@ -5302,11 +5302,11 @@ class UicModalComponent {
|
|
|
5302
5302
|
this.modalRef.closeFloating(null);
|
|
5303
5303
|
}
|
|
5304
5304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \
|
|
5305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
|
|
5306
5306
|
}
|
|
5307
5307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
5308
5308
|
type: Component,
|
|
5309
|
-
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \
|
|
5309
|
+
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
|
|
5310
5310
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
5311
5311
|
type: Inject,
|
|
5312
5312
|
args: [UiModalRef]
|
|
@@ -5672,7 +5672,7 @@ class ItemValueComponent {
|
|
|
5672
5672
|
});
|
|
5673
5673
|
}
|
|
5674
5674
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5675
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (currentData) {\n @if (type == 'text' || !type) {\n <div [class]=\"'ui-trc-' + currentData.textColor \">\n @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\n {{ currentData.value }} \n @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\n </div>\n }\n @if (type == 'copy') {\n <div class=\"copy-div\">\n {{ currentData.value }} \n <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\n </div>\n }\n @if (type == 'money'){\n {{ (currentData.value??0) | currency: currentData.currencyCode||''}} \n }\n @if (type == 'bold'){\n <b>{{ currentData.value}}</b>\n }\n @if (type == 'date'){\n {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \n }\n @if (type == 'bigtext') {\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\n {{ currentData.value }} \n @if( currentData.value && currentData.value.toString().length > 0){\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\n }\n @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\n <div class=\"fade-overlay\"></div>\n }\n </div>\n }\n @if (type == 'icon-list') {\n @for (alert of currentData.list; track $index) {\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\n }\n }\n @else if (type == 'list'){\n <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list> \n }\n @else if (type == 'user'){\n <uic-table-user [user]=\"currentData.user\"></uic-table-user> \n }\n @else if (type == 'status'){\n @if (currentData.value) {\n <ui-status-label [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \n }@else {\n -\n }\n }\n @else if (type == 'tag'){\n <ui-status-label type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \n }\n @else if (type == 'switch'){\n <div (click)=\"$event.stopPropagation()\">\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \n </div>\n }\n\n @if( currentData.subtext ){\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ currentData.subtext }}</div>\n }\n}\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
5675
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (currentData) {\r\n @if (type == 'text' || !type) {\r\n <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n {{ currentData.value }} \r\n @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n </div>\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ currentData.value }} \r\n <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n }\r\n @if (type == 'bold'){\r\n <b>{{ currentData.value}}</b>\r\n }\r\n @if (type == 'date'){\r\n {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ currentData.value }} \r\n @if( currentData.value && currentData.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of currentData.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"currentData.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (currentData.value) {\r\n <ui-status-label [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( currentData.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ currentData.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
5676
5676
|
}
|
|
5677
5677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, decorators: [{
|
|
5678
5678
|
type: Component,
|
|
@@ -5686,7 +5686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5686
5686
|
UicButtonComponent,
|
|
5687
5687
|
CurrencyPipe,
|
|
5688
5688
|
DatePipe
|
|
5689
|
-
], template: "@if (currentData) {\n @if (type == 'text' || !type) {\n <div [class]=\"'ui-trc-' + currentData.textColor \">\n @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\n {{ currentData.value }} \n @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\n </div>\n }\n @if (type == 'copy') {\n <div class=\"copy-div\">\n {{ currentData.value }} \n <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\n </div>\n }\n @if (type == 'money'){\n {{ (currentData.value??0) | currency: currentData.currencyCode||''}} \n }\n @if (type == 'bold'){\n <b>{{ currentData.value}}</b>\n }\n @if (type == 'date'){\n {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \n }\n @if (type == 'bigtext') {\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\n {{ currentData.value }} \n @if( currentData.value && currentData.value.toString().length > 0){\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\n }\n @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\n <div class=\"fade-overlay\"></div>\n }\n </div>\n }\n @if (type == 'icon-list') {\n @for (alert of currentData.list; track $index) {\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\n }\n }\n @else if (type == 'list'){\n <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list> \n }\n @else if (type == 'user'){\n <uic-table-user [user]=\"currentData.user\"></uic-table-user> \n }\n @else if (type == 'status'){\n @if (currentData.value) {\n <ui-status-label [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \n }@else {\n -\n }\n }\n @else if (type == 'tag'){\n <ui-status-label type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \n }\n @else if (type == 'switch'){\n <div (click)=\"$event.stopPropagation()\">\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \n </div>\n }\n\n @if( currentData.subtext ){\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ currentData.subtext }}</div>\n }\n}\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"] }]
|
|
5689
|
+
], template: "@if (currentData) {\r\n @if (type == 'text' || !type) {\r\n <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n {{ currentData.value }} \r\n @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n </div>\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ currentData.value }} \r\n <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n }\r\n @if (type == 'bold'){\r\n <b>{{ currentData.value}}</b>\r\n }\r\n @if (type == 'date'){\r\n {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ currentData.value }} \r\n @if( currentData.value && currentData.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of currentData.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"currentData.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (currentData.value) {\r\n <ui-status-label [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( currentData.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ currentData.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"] }]
|
|
5690
5690
|
}], propDecorators: { key: [{
|
|
5691
5691
|
type: Input
|
|
5692
5692
|
}], type: [{
|
|
@@ -6199,11 +6199,11 @@ class UicSkeletonCardsComponent {
|
|
|
6199
6199
|
return this.cards > 0 ? this.cards : 0;
|
|
6200
6200
|
}
|
|
6201
6201
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\
|
|
6202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n @for (card of [].constructor(cardsCount); track $index) {\n <div class=\"skeleton-card skeleton-gradient\"></div>\n }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6203
6203
|
}
|
|
6204
6204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, decorators: [{
|
|
6205
6205
|
type: Component,
|
|
6206
|
-
args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\
|
|
6206
|
+
args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n @for (card of [].constructor(cardsCount); track $index) {\n <div class=\"skeleton-card skeleton-gradient\"></div>\n }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
|
|
6207
6207
|
}], propDecorators: { cards: [{
|
|
6208
6208
|
type: Input
|
|
6209
6209
|
}], gap: [{
|
|
@@ -7597,7 +7597,7 @@ class UicEditableTableComponent {
|
|
|
7597
7597
|
this.visibleRowsCount = Math.min(this.visibleRowsCount, totalRows);
|
|
7598
7598
|
}
|
|
7599
7599
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7600
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicEditableTableComponent, isStandalone: true, selector: "ui-editable-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columnsConfig: { classPropertyName: "columnsConfig", publicName: "columnsConfig", isSignal: true, isRequired: false, transformFunction: null }, visibleRowsStep: { classPropertyName: "visibleRowsStep", publicName: "visibleRowsStep", isSignal: false, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { recordChange: "recordChange" }, ngImport: i0, template: "<div class=\"xlstable-overflow\">\
|
|
7600
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicEditableTableComponent, isStandalone: true, selector: "ui-editable-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columnsConfig: { classPropertyName: "columnsConfig", publicName: "columnsConfig", isSignal: true, isRequired: false, transformFunction: null }, visibleRowsStep: { classPropertyName: "visibleRowsStep", publicName: "visibleRowsStep", isSignal: false, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { recordChange: "recordChange" }, ngImport: i0, template: "<div class=\"xlstable-overflow\">\n @if (headers.length > 0) {\n <table class=\"xls-table\">\n <colgroup>\n @if (rowActions().length > 0) {\n <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\n }\n @for (header of headers; track $index) {\n <col [style.width.px]=\"columnWidths[$index]\">\n }\n </colgroup>\n <thead>\n <tr>\n @if (rowActions().length > 0) {\n <th class=\"action-col\"></th>\n }\n @for (header of headers; track $index) {\n <th>\n @if (pendingColumnIndex === $index) {\n <div class=\"hea-th hea-th-edit\">\n <input\n class=\"new-col-name\"\n type=\"text\"\n [(ngModel)]=\"pendingColumnName\"\n (ngModelChange)=\"onPendingColumnNameChange($event)\"\n (blur)=\"onPendingColumnNameBlur()\"\n (keydown)=\"onPendingColumnNameKeydown($event)\"\n [attr.data-new-col]=\"$index\">\n @if (pendingColumnName.trim()) {\n <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n </div>\n } @else {\n <div class=\"hea-th\">\n <div style=\"flex: 1 1; min-width: 0;\">\n {{ header }} \n </div>\n \n @if (resolvedConfig().canAddColumn) {\n <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\" size=\"s\" [iconOnly]=\"true\"></ui-button> \n }\n @if (resolvedConfig().canDeleteColumn){\n <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n @if (resolvedConfig().resizeableColumns) {\n <span\n class=\"column-resize-handle\"\n (pointerdown)=\"startColumnResize($event, $index)\"\n ></span>\n }\n\n </div>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleRows(); track $index; let i = $index) {\n <tr>\n @if (rowActions().length > 0) {\n <td class=\"action-col\">\n <div class=\"action-cell\">\n <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\n </div>\n </td>\n }\n @for (header of headers; track $index; let col = $index) {\n <td>\n <input\n [disabled]=\"columnDisabledByHeader()[header]\"\n [type]=\"columnInputTypeByHeader()[header]\"\n [attr.data-row]=\"i\"\n [attr.data-col]=\"col\"\n [(ngModel)]=\"row[header]\"\n (blur)=\"onCellBlur()\"\n (keydown)=\"onCellKeydown($event, i, col)\">\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n @if (hasMoreRows()) {\n <div class=\"show-more\">\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\n {{'excel_table.see_more' | uicTranslate}}\n </ui-button>\n </div>\n }\n <div class=\"table-counter\">\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\n </div>\n } @else{\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\n }\n</div>\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
|
|
7601
7601
|
}
|
|
7602
7602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, decorators: [{
|
|
7603
7603
|
type: Component,
|
|
@@ -7608,7 +7608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7608
7608
|
FormsModule,
|
|
7609
7609
|
UicTranslatePipe,
|
|
7610
7610
|
UicToolTipDirective
|
|
7611
|
-
], template: "<div class=\"xlstable-overflow\">\
|
|
7611
|
+
], template: "<div class=\"xlstable-overflow\">\n @if (headers.length > 0) {\n <table class=\"xls-table\">\n <colgroup>\n @if (rowActions().length > 0) {\n <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\n }\n @for (header of headers; track $index) {\n <col [style.width.px]=\"columnWidths[$index]\">\n }\n </colgroup>\n <thead>\n <tr>\n @if (rowActions().length > 0) {\n <th class=\"action-col\"></th>\n }\n @for (header of headers; track $index) {\n <th>\n @if (pendingColumnIndex === $index) {\n <div class=\"hea-th hea-th-edit\">\n <input\n class=\"new-col-name\"\n type=\"text\"\n [(ngModel)]=\"pendingColumnName\"\n (ngModelChange)=\"onPendingColumnNameChange($event)\"\n (blur)=\"onPendingColumnNameBlur()\"\n (keydown)=\"onPendingColumnNameKeydown($event)\"\n [attr.data-new-col]=\"$index\">\n @if (pendingColumnName.trim()) {\n <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n </div>\n } @else {\n <div class=\"hea-th\">\n <div style=\"flex: 1 1; min-width: 0;\">\n {{ header }} \n </div>\n \n @if (resolvedConfig().canAddColumn) {\n <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\" size=\"s\" [iconOnly]=\"true\"></ui-button> \n }\n @if (resolvedConfig().canDeleteColumn){\n <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\" size=\"s\" [iconOnly]=\"true\"></ui-button>\n }\n @if (resolvedConfig().resizeableColumns) {\n <span\n class=\"column-resize-handle\"\n (pointerdown)=\"startColumnResize($event, $index)\"\n ></span>\n }\n\n </div>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleRows(); track $index; let i = $index) {\n <tr>\n @if (rowActions().length > 0) {\n <td class=\"action-col\">\n <div class=\"action-cell\">\n <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\n </div>\n </td>\n }\n @for (header of headers; track $index; let col = $index) {\n <td>\n <input\n [disabled]=\"columnDisabledByHeader()[header]\"\n [type]=\"columnInputTypeByHeader()[header]\"\n [attr.data-row]=\"i\"\n [attr.data-col]=\"col\"\n [(ngModel)]=\"row[header]\"\n (blur)=\"onCellBlur()\"\n (keydown)=\"onCellKeydown($event, i, col)\">\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n @if (hasMoreRows()) {\n <div class=\"show-more\">\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\n {{'excel_table.see_more' | uicTranslate}}\n </ui-button>\n </div>\n }\n <div class=\"table-counter\">\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\n </div>\n } @else{\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\n }\n</div>\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"] }]
|
|
7612
7612
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibleRowsStep: [{
|
|
7613
7613
|
type: Input
|
|
7614
7614
|
}], record: [{
|
|
@@ -7891,11 +7891,11 @@ class UicProgressBarComponent {
|
|
|
7891
7891
|
});
|
|
7892
7892
|
}
|
|
7893
7893
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7894
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
|
|
7894
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
|
|
7895
7895
|
}
|
|
7896
7896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, decorators: [{
|
|
7897
7897
|
type: Component,
|
|
7898
|
-
args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
|
|
7898
|
+
args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
|
|
7899
7899
|
}], propDecorators: { progress: [{
|
|
7900
7900
|
type: Input
|
|
7901
7901
|
}], color: [{
|
|
@@ -8318,11 +8318,11 @@ class UicFieldOptionsEditorComponent {
|
|
|
8318
8318
|
this.optionsChange.emit(this.options);
|
|
8319
8319
|
}
|
|
8320
8320
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFieldOptionsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8321
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFieldOptionsEditorComponent, isStandalone: true, selector: "ui-field-options-editor", inputs: { options: "options" }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\
|
|
8321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFieldOptionsEditorComponent, isStandalone: true, selector: "ui-field-options-editor", inputs: { options: "options" }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\n <div class=\"optbody\">\n <div class=\"option-row\">\n <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\n <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\n </div>\n @for (item of options; track $index) {\n <div class=\"option-row\">\n @if (true) {\n <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\n }\n <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\n <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\n </div>\n }\n <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\n </div>\n</ui-input-wrapper>\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\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: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
8322
8322
|
}
|
|
8323
8323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFieldOptionsEditorComponent, decorators: [{
|
|
8324
8324
|
type: Component,
|
|
8325
|
-
args: [{ selector: 'ui-field-options-editor', imports: [FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\
|
|
8325
|
+
args: [{ selector: 'ui-field-options-editor', imports: [FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\n <div class=\"optbody\">\n <div class=\"option-row\">\n <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\n <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\n </div>\n @for (item of options; track $index) {\n <div class=\"option-row\">\n @if (true) {\n <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\n }\n <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\n <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\n </div>\n }\n <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\n </div>\n</ui-input-wrapper>\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\n"] }]
|
|
8326
8326
|
}], propDecorators: { optionsChange: [{
|
|
8327
8327
|
type: Output
|
|
8328
8328
|
}], options: [{
|
|
@@ -8480,7 +8480,7 @@ class FieldEditorComponent {
|
|
|
8480
8480
|
}));
|
|
8481
8481
|
}
|
|
8482
8482
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8483
|
-
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>\
|
|
8483
|
+
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"], 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"] }] });
|
|
8484
8484
|
}
|
|
8485
8485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
|
|
8486
8486
|
type: Component,
|
|
@@ -8489,7 +8489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8489
8489
|
UicButtonComponent,
|
|
8490
8490
|
UicTranslatePipe,
|
|
8491
8491
|
UicFieldOptionsEditorComponent
|
|
8492
|
-
], 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>\
|
|
8492
|
+
], 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"] }]
|
|
8493
8493
|
}], ctorParameters: () => [] });
|
|
8494
8494
|
|
|
8495
8495
|
class FieldTypeSelectorComponent {
|
|
@@ -8546,7 +8546,7 @@ class BlockEditorComponent {
|
|
|
8546
8546
|
this.blockChange.emit({ ...this.block(), fields: nextFields });
|
|
8547
8547
|
}
|
|
8548
8548
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8549
|
-
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\">\
|
|
8549
|
+
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 [tip]=\"'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: "[tip]", inputs: ["tip"] }, { 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"] }] });
|
|
8550
8550
|
}
|
|
8551
8551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, decorators: [{
|
|
8552
8552
|
type: Component,
|
|
@@ -8557,25 +8557,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8557
8557
|
DragDropModule,
|
|
8558
8558
|
FormsModule,
|
|
8559
8559
|
FieldTypeSelectorComponent
|
|
8560
|
-
], template: "<div class=\"form-block-card\">\
|
|
8560
|
+
], 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 [tip]=\"'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"] }]
|
|
8561
8561
|
}], propDecorators: { selectedFieldId: [{
|
|
8562
8562
|
type: Input
|
|
8563
8563
|
}] } });
|
|
8564
8564
|
|
|
8565
8565
|
class UicUserFormbuilderComponent {
|
|
8566
8566
|
modalService = inject(UicModalService);
|
|
8567
|
+
tinyAlertService = inject(UicTinyAlertService);
|
|
8568
|
+
translateService = inject(UicTranslateService);
|
|
8567
8569
|
formTitle = 'Nuevo formulario';
|
|
8568
|
-
cols = 2;
|
|
8569
8570
|
readOnly = input(true);
|
|
8570
|
-
|
|
8571
|
+
editableFormInput = input({ cols: 2, blocks: [] }, { alias: 'editableForm' });
|
|
8571
8572
|
submitFormRequest = output();
|
|
8572
8573
|
nextBlockId = 1;
|
|
8573
8574
|
nextFieldId = 1;
|
|
8575
|
+
editableCols = signal(2);
|
|
8574
8576
|
editableBlocks = signal([]);
|
|
8575
8577
|
editingSnapshot = signal(null);
|
|
8576
8578
|
isReadOnly = signal(true);
|
|
8577
8579
|
selectedField = signal(null);
|
|
8578
|
-
previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.
|
|
8580
|
+
previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.editableCols()));
|
|
8579
8581
|
dependencyOptions = computed(() => {
|
|
8580
8582
|
const currentSelected = this.selectedField();
|
|
8581
8583
|
const options = this.editableBlocks()
|
|
@@ -8596,11 +8598,12 @@ class UicUserFormbuilderComponent {
|
|
|
8596
8598
|
}
|
|
8597
8599
|
});
|
|
8598
8600
|
effect(() => {
|
|
8599
|
-
const
|
|
8601
|
+
const sourceForm = this.editableFormInput();
|
|
8600
8602
|
if (!this.isReadOnly() && this.editingSnapshot()) {
|
|
8601
8603
|
return;
|
|
8602
8604
|
}
|
|
8603
|
-
this.
|
|
8605
|
+
this.editableCols.set(sourceForm.cols ?? 2);
|
|
8606
|
+
this.editableBlocks.set(this.prepareBlocksForLocalState(sourceForm.blocks ?? []));
|
|
8604
8607
|
});
|
|
8605
8608
|
effect(() => {
|
|
8606
8609
|
const blocks = this.editableBlocks();
|
|
@@ -8661,11 +8664,18 @@ class UicUserFormbuilderComponent {
|
|
|
8661
8664
|
}
|
|
8662
8665
|
printForm() {
|
|
8663
8666
|
this.modalService.openFloatingModal(FormPreviewComponent, {
|
|
8664
|
-
data: { schema: helperShowFormFromBuilder(this.editableBlocks(), this.
|
|
8667
|
+
data: { schema: helperShowFormFromBuilder(this.editableBlocks(), this.editableCols(), true) },
|
|
8665
8668
|
size: 'medium'
|
|
8666
8669
|
});
|
|
8667
8670
|
}
|
|
8668
8671
|
submitForm() {
|
|
8672
|
+
const duplicatedFieldName = this.getDuplicatedFieldName();
|
|
8673
|
+
if (duplicatedFieldName) {
|
|
8674
|
+
this.tinyAlertService.warning(this.translateService.translate('form_builder.validation.duplicate_identifier', {
|
|
8675
|
+
identifier: duplicatedFieldName
|
|
8676
|
+
}));
|
|
8677
|
+
return;
|
|
8678
|
+
}
|
|
8669
8679
|
const blocksWithOrderedFields = this.editableBlocks().map(block => ({
|
|
8670
8680
|
...block,
|
|
8671
8681
|
fields: block.fields.map((field, index) => ({
|
|
@@ -8677,20 +8687,40 @@ class UicUserFormbuilderComponent {
|
|
|
8677
8687
|
this.editableBlocks.set(blocksWithOrderedFields);
|
|
8678
8688
|
this.isReadOnly.set(true);
|
|
8679
8689
|
this.editingSnapshot.set(null);
|
|
8680
|
-
this.submitFormRequest.emit(
|
|
8681
|
-
|
|
8682
|
-
|
|
8683
|
-
|
|
8690
|
+
this.submitFormRequest.emit({
|
|
8691
|
+
cols: this.editableCols(),
|
|
8692
|
+
blocks: blocksWithOrderedFields.map(block => ({
|
|
8693
|
+
...block,
|
|
8694
|
+
fields: block.fields.map(({ field, ...restField }) => restField)
|
|
8695
|
+
}))
|
|
8696
|
+
});
|
|
8697
|
+
}
|
|
8698
|
+
getDuplicatedFieldName() {
|
|
8699
|
+
const usedNames = new Set();
|
|
8700
|
+
for (const field of this.editableBlocks().flatMap(block => block.fields)) {
|
|
8701
|
+
const fieldName = field.fieldData.name?.trim();
|
|
8702
|
+
if (!fieldName)
|
|
8703
|
+
continue;
|
|
8704
|
+
if (usedNames.has(fieldName)) {
|
|
8705
|
+
return fieldName;
|
|
8706
|
+
}
|
|
8707
|
+
usedNames.add(fieldName);
|
|
8708
|
+
}
|
|
8709
|
+
return null;
|
|
8684
8710
|
}
|
|
8685
8711
|
enableEditMode() {
|
|
8686
|
-
this.editingSnapshot.set(this.deepClone(
|
|
8712
|
+
this.editingSnapshot.set(this.deepClone({
|
|
8713
|
+
cols: this.editableCols(),
|
|
8714
|
+
blocks: this.editableBlocks()
|
|
8715
|
+
}));
|
|
8687
8716
|
this.isReadOnly.set(false);
|
|
8688
8717
|
}
|
|
8689
8718
|
discardChanges() {
|
|
8690
8719
|
const snapshot = this.editingSnapshot();
|
|
8691
8720
|
if (!snapshot)
|
|
8692
8721
|
return;
|
|
8693
|
-
this.
|
|
8722
|
+
this.editableCols.set(snapshot.cols ?? 2);
|
|
8723
|
+
this.editableBlocks.set(this.prepareBlocksForLocalState(snapshot.blocks ?? []));
|
|
8694
8724
|
this.selectedField.set(null);
|
|
8695
8725
|
this.editingSnapshot.set(null);
|
|
8696
8726
|
this.isReadOnly.set(true);
|
|
@@ -8785,7 +8815,7 @@ class UicUserFormbuilderComponent {
|
|
|
8785
8815
|
return value;
|
|
8786
8816
|
}
|
|
8787
8817
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8788
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null },
|
|
8818
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { 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 <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\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\"\r\n (blockChange)=\"onBlockChange(i, $event)\"\r\n (addFieldRequest)=\"addField(block.code, $event)\"\r\n (notifySelectedField)=\"selectedField.set($event)\"\r\n (deleteBlock)=\"deleteBlock($event)\">\r\n </lib-block-editor>\r\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\">\r\n <h3>Propiedades</h3>\r\n <div class=\"formeditor-properties-form\">\r\n @if (selectedField() ) {\r\n <lib-field-editor \r\n [config]=\"selectedField()!\"\r\n [options]=\"dependencyOptions()\"\r\n (fieldChange)=\"onFieldChange($event)\">\r\n </lib-field-editor>\r\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.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"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "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"] }] });
|
|
8789
8819
|
}
|
|
8790
8820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
|
|
8791
8821
|
type: Component,
|
|
@@ -8795,12 +8825,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8795
8825
|
UicTranslatePipe,
|
|
8796
8826
|
FieldEditorComponent,
|
|
8797
8827
|
FormsModule,
|
|
8798
|
-
BlockEditorComponent
|
|
8799
|
-
|
|
8828
|
+
BlockEditorComponent,
|
|
8829
|
+
UicSelectComponent
|
|
8830
|
+
], 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 <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\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\"\r\n (blockChange)=\"onBlockChange(i, $event)\"\r\n (addFieldRequest)=\"addField(block.code, $event)\"\r\n (notifySelectedField)=\"selectedField.set($event)\"\r\n (deleteBlock)=\"deleteBlock($event)\">\r\n </lib-block-editor>\r\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\">\r\n <h3>Propiedades</h3>\r\n <div class=\"formeditor-properties-form\">\r\n @if (selectedField() ) {\r\n <lib-field-editor \r\n [config]=\"selectedField()!\"\r\n [options]=\"dependencyOptions()\"\r\n (fieldChange)=\"onFieldChange($event)\">\r\n </lib-field-editor>\r\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.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"] }]
|
|
8800
8831
|
}], ctorParameters: () => [], propDecorators: { formTitle: [{
|
|
8801
8832
|
type: Input
|
|
8802
|
-
}], cols: [{
|
|
8803
|
-
type: Input
|
|
8804
8833
|
}] } });
|
|
8805
8834
|
|
|
8806
8835
|
class RuleDefinirionComponent {
|
|
@@ -8955,7 +8984,7 @@ class RuleDefinirionComponent {
|
|
|
8955
8984
|
return condition.id === 0 ? (condition.temporalId ?? '') : condition.id;
|
|
8956
8985
|
}
|
|
8957
8986
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
8958
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\
|
|
8987
|
+
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 (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></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 <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 </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"], 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" }] });
|
|
8959
8988
|
}
|
|
8960
8989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
|
|
8961
8990
|
type: Component,
|
|
@@ -8965,7 +8994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8965
8994
|
UicInputComponent,
|
|
8966
8995
|
UicButtonComponent,
|
|
8967
8996
|
UicTranslatePipe
|
|
8968
|
-
], template: "\
|
|
8997
|
+
], template: "\n@if (newRule) {\n <ui-form-wrapper #formWrapper (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></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 <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 </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"] }]
|
|
8969
8998
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8970
8999
|
type: Inject,
|
|
8971
9000
|
args: [MODAL_DATA]
|
|
@@ -8977,71 +9006,7 @@ class UicRuleBuilderComponent {
|
|
|
8977
9006
|
emitRuleDefinitionOnInit = false;
|
|
8978
9007
|
conditionsEmitScheduled = false;
|
|
8979
9008
|
ruleDefinitionEmitScheduled = false;
|
|
8980
|
-
_conditions = [
|
|
8981
|
-
{
|
|
8982
|
-
id: 1,
|
|
8983
|
-
description: 'Mayores de edad',
|
|
8984
|
-
fieldName: 'Edad',
|
|
8985
|
-
fieldCode: 'age',
|
|
8986
|
-
operatorCode: 'greater_than',
|
|
8987
|
-
operatorName: 'Mayor que',
|
|
8988
|
-
value: '18',
|
|
8989
|
-
},
|
|
8990
|
-
{
|
|
8991
|
-
id: 2,
|
|
8992
|
-
description: 'Menores de edad',
|
|
8993
|
-
fieldName: 'Edad',
|
|
8994
|
-
fieldCode: 'age',
|
|
8995
|
-
operatorCode: 'less_than',
|
|
8996
|
-
operatorName: 'Menor que',
|
|
8997
|
-
value: '18',
|
|
8998
|
-
},
|
|
8999
|
-
{
|
|
9000
|
-
id: 3,
|
|
9001
|
-
description: 'Demo 3',
|
|
9002
|
-
fieldName: 'Edad',
|
|
9003
|
-
fieldCode: 'age',
|
|
9004
|
-
operatorCode: 'less_than',
|
|
9005
|
-
operatorName: 'Menor que',
|
|
9006
|
-
value: '18',
|
|
9007
|
-
},
|
|
9008
|
-
{
|
|
9009
|
-
id: 4,
|
|
9010
|
-
description: 'Demo 4',
|
|
9011
|
-
fieldName: 'Edad',
|
|
9012
|
-
fieldCode: 'age',
|
|
9013
|
-
operatorCode: 'less_than',
|
|
9014
|
-
operatorName: 'Menor que',
|
|
9015
|
-
value: '18',
|
|
9016
|
-
},
|
|
9017
|
-
{
|
|
9018
|
-
id: 5,
|
|
9019
|
-
description: 'Demo 5',
|
|
9020
|
-
fieldName: 'Edad',
|
|
9021
|
-
fieldCode: 'age',
|
|
9022
|
-
operatorCode: 'less_than',
|
|
9023
|
-
operatorName: 'Menor que',
|
|
9024
|
-
value: '18',
|
|
9025
|
-
},
|
|
9026
|
-
{
|
|
9027
|
-
id: 6,
|
|
9028
|
-
description: 'Demo 6',
|
|
9029
|
-
fieldName: 'Edad',
|
|
9030
|
-
fieldCode: 'age',
|
|
9031
|
-
operatorCode: 'less_than',
|
|
9032
|
-
operatorName: 'Menor que',
|
|
9033
|
-
value: '18',
|
|
9034
|
-
},
|
|
9035
|
-
{
|
|
9036
|
-
id: 7,
|
|
9037
|
-
description: 'Demo 7',
|
|
9038
|
-
fieldName: 'Edad',
|
|
9039
|
-
fieldCode: 'age',
|
|
9040
|
-
operatorCode: 'less_than',
|
|
9041
|
-
operatorName: 'Menor que',
|
|
9042
|
-
value: '18',
|
|
9043
|
-
}
|
|
9044
|
-
];
|
|
9009
|
+
_conditions = [];
|
|
9045
9010
|
set conditions(value) {
|
|
9046
9011
|
this._conditions = Array.isArray(value) ? value.map(condition => ({ ...condition })) : [];
|
|
9047
9012
|
const conditionsNormalized = this.refreshAvailableConditions();
|
|
@@ -9101,7 +9066,6 @@ class UicRuleBuilderComponent {
|
|
|
9101
9066
|
editorRules = [];
|
|
9102
9067
|
translate = inject(UicTranslateService);
|
|
9103
9068
|
modal = inject(UicModalService);
|
|
9104
|
-
tinyAlert = inject(UicTinyAlertService);
|
|
9105
9069
|
get resolvedTitle() {
|
|
9106
9070
|
return this.ruleTitle || this.translate.translate('rule_builder.title');
|
|
9107
9071
|
}
|
|
@@ -9178,10 +9142,6 @@ class UicRuleBuilderComponent {
|
|
|
9178
9142
|
}
|
|
9179
9143
|
print() {
|
|
9180
9144
|
const normalizedRules = this.normalizeRules(this.cloneRules(this.editorRules));
|
|
9181
|
-
if (!this.hasOperators(normalizedRules)) {
|
|
9182
|
-
this.tinyAlert.warning('rule_builder.validation.single_condition_not_allowed');
|
|
9183
|
-
return;
|
|
9184
|
-
}
|
|
9185
9145
|
this.editorRules = normalizedRules;
|
|
9186
9146
|
this.markRulesAsSaved(this.editorRules);
|
|
9187
9147
|
this.emitRuleDefinitionState();
|
|
@@ -9259,17 +9219,6 @@ class UicRuleBuilderComponent {
|
|
|
9259
9219
|
return [];
|
|
9260
9220
|
});
|
|
9261
9221
|
}
|
|
9262
|
-
hasOperators(rules) {
|
|
9263
|
-
return rules.some(rule => {
|
|
9264
|
-
if (rule.type === 'operator') {
|
|
9265
|
-
return true;
|
|
9266
|
-
}
|
|
9267
|
-
if (rule.type === 'group' && rule.rules) {
|
|
9268
|
-
return this.hasOperators(rule.rules);
|
|
9269
|
-
}
|
|
9270
|
-
return false;
|
|
9271
|
-
});
|
|
9272
|
-
}
|
|
9273
9222
|
normalizeRules(rules, preserveIncompleteUnsaved = false) {
|
|
9274
9223
|
const normalized = [];
|
|
9275
9224
|
let expectsExpression = true;
|
|
@@ -9572,7 +9521,7 @@ class UicRuleBuilderComponent {
|
|
|
9572
9521
|
this.nextTemporalConditionId = nextId + 1;
|
|
9573
9522
|
}
|
|
9574
9523
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9575
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { 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 [tip]=\"'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 [tip]=\"'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 <ui-button [tip]=\"'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</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\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" [tip]=\"'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 [tip]=\"'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 [tip]=\"'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 [tip]=\"'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 [tip]=\"'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 [tip]=\"'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 [tip]=\"'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)\" [tip]=\"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: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
9524
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { 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 [tip]=\"'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 [tip]=\"'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 <ui-button [tip]=\"'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</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\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" [tip]=\"'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') {\n <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n <div\n class=\"condition-box\"\n [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\n [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\n @if (rule.value == null || rule.value === '') {\n {{ 'rule_builder.select_condition' | uicTranslate }}\n } @else if (isConditionLabelPending(rule.value)) {\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n } @else {\n {{ getConditionLabel(rule.value) }}\n }\n </div>\n </div>\n <ui-button [tip]=\"'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>\n </div>\n }\n @if (rule.type === 'operator') {\r\n <div [tip]=\"'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 [tip]=\"'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 [tip]=\"'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 [tip]=\"'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) {\n @if (rule.type === 'condition') {\n <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\n @if (isConditionLabelPending(rule.value)) {\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n } @else {\n {{ getConditionLabel(rule.value) }}\n }\n </div>\n }\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: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
9576
9525
|
}
|
|
9577
9526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
|
|
9578
9527
|
type: Component,
|
|
@@ -9582,7 +9531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
9582
9531
|
FormsModule,
|
|
9583
9532
|
UicToolTipDirective,
|
|
9584
9533
|
UicTranslatePipe
|
|
9585
|
-
], template: "\r\n<div class=\"rule-tools\">\r\n <h3>\r\n {{resolvedTitle}}\r\n </h3>\r\n @if (editing) {\r\n <ui-button [tip]=\"'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 [tip]=\"'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 <ui-button [tip]=\"'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</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\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" [tip]=\"'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') {\
|
|
9534
|
+
], template: "\r\n<div class=\"rule-tools\">\r\n <h3>\r\n {{resolvedTitle}}\r\n </h3>\r\n @if (editing) {\r\n <ui-button [tip]=\"'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 [tip]=\"'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 <ui-button [tip]=\"'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</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\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" [tip]=\"'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') {\n <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n <div\n class=\"condition-box\"\n [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\n [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\n @if (rule.value == null || rule.value === '') {\n {{ 'rule_builder.select_condition' | uicTranslate }}\n } @else if (isConditionLabelPending(rule.value)) {\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n } @else {\n {{ getConditionLabel(rule.value) }}\n }\n </div>\n </div>\n <ui-button [tip]=\"'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>\n </div>\n }\n @if (rule.type === 'operator') {\r\n <div [tip]=\"'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 [tip]=\"'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 [tip]=\"'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 [tip]=\"'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) {\n @if (rule.type === 'condition') {\n <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\n @if (isConditionLabelPending(rule.value)) {\n <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n } @else {\n {{ getConditionLabel(rule.value) }}\n }\n </div>\n }\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"] }]
|
|
9586
9535
|
}], propDecorators: { conditions: [{
|
|
9587
9536
|
type: Input
|
|
9588
9537
|
}], conditionOperators: [{
|