sf-crud 13.0.12 → 13.0.13
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/sf-crud.mjs +10 -6
- package/fesm2022/sf-crud.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/sf-crud.mjs
CHANGED
|
@@ -1156,6 +1156,10 @@ class TableroComponent {
|
|
|
1156
1156
|
if (this.crudConfig.tablero?.dataKey && !newItem[this.crudConfig.tablero.dataKey]) {
|
|
1157
1157
|
newItem[this.crudConfig.tablero.dataKey] = item[this.crudConfig.tablero.dataKey];
|
|
1158
1158
|
}
|
|
1159
|
+
const missingKeys = Object.keys(item).filter(key => !(key in newItem));
|
|
1160
|
+
missingKeys.forEach(key => {
|
|
1161
|
+
newItem[key] = item[key];
|
|
1162
|
+
});
|
|
1159
1163
|
this.data.push(newItem);
|
|
1160
1164
|
});
|
|
1161
1165
|
}
|
|
@@ -1360,11 +1364,11 @@ class StepComponent {
|
|
|
1360
1364
|
}
|
|
1361
1365
|
}
|
|
1362
1366
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepComponent, deps: [{ token: i2.Router }, { token: StepService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
1363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StepComponent, isStandalone: true, selector: "app-step", inputs: { items: "items" }, ngImport: i0, template: "<div>\r\n <div id=\"step-container\">\r\n <p-steps #stepsComponent [model]=\"items\" [readonly]=\"false\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onactiveIndexChange($event)\"></p-steps>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div class=\"buttons-step\">\r\n <div >\r\n <button pButton *ngIf=\"activeIndex != 0\" icon=\"pi pi-arrow-left\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(-1)\"></button>\r\n </div>\r\n <span >\r\n <button pButton *ngIf=\"!(activeIndex + 1 >= items.length)\" icon=\"pi pi-arrow-right\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(1)\"></button>\r\n </span>\r\n <button pButton *ngIf=\"activeIndex >= items.length - 1\" label=\"Finalizar\" [disabled]=\"loading\" (click)=\"requestNaviagtion(0)\"\r\n [style]=\"{'margin-left': '10px'}\"></button>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .p-steps-number{background-color:var(--secondary-color)!important}::ng-deep .p-button{border-radius:6px}::ng-deep .p-steps-item .p-menuitem-link{margin-inline:15vw}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{color:#fff;font-family:sans-serif}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title{color:#4b5563;font-family:inherit}
|
|
1367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StepComponent, isStandalone: true, selector: "app-step", inputs: { items: "items" }, ngImport: i0, template: "<div>\r\n <div id=\"step-container\">\r\n <p-steps #stepsComponent [model]=\"items\" [readonly]=\"false\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onactiveIndexChange($event)\"></p-steps>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div class=\"buttons-step\">\r\n <div >\r\n <button pButton *ngIf=\"activeIndex != 0\" icon=\"pi pi-arrow-left\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(-1)\"></button>\r\n </div>\r\n <span >\r\n <button pButton *ngIf=\"!(activeIndex + 1 >= items.length)\" icon=\"pi pi-arrow-right\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(1)\"></button>\r\n </span>\r\n <button pButton *ngIf=\"activeIndex >= items.length - 1\" label=\"Finalizar\" [disabled]=\"loading\" (click)=\"requestNaviagtion(0)\"\r\n [style]=\"{'margin-left': '10px'}\"></button>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .p-steps-number{background-color:var(--secondary-color)!important}::ng-deep .p-button{border-radius:6px}::ng-deep .p-steps-item .p-menuitem-link{margin-inline:15vw}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{color:#fff;font-family:sans-serif}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title{color:#4b5563;font-family:inherit}:is() ul[role=tablist]{padding-bottom:10px}:is() .p-steps-number{color:#fff!important}.buttons-step{margin-bottom:1.5rem}.buttons-step button{height:3.5rem}.buttons-step ::ng-deep .p-button{background-color:var(--button-color);border-color:var(--button-color)}.buttons-step .p-button-icon-only{width:3.5rem}#step-container{overflow-x:scroll;scrollbar-width:20px;padding-bottom:5px}.buttons-step{display:flex;justify-content:space-evenly}.content{margin-block:30px}@media screen and (max-width: 765px){:is() .p-steps-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:inherit;text-align:center}::ng-deep .p-steps-item a.p-menuitem-link{margin-inline:0!important;width:90vw}}\n"], dependencies: [{ kind: "ngmodule", type: StepsModule }, { kind: "component", type: i3$1.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass", "exact"], outputs: ["activeIndexChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1364
1368
|
}
|
|
1365
1369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepComponent, decorators: [{
|
|
1366
1370
|
type: Component,
|
|
1367
|
-
args: [{ selector: 'app-step', imports: [StepsModule, RouterOutlet, ButtonModule, CommonModule], standalone: true, template: "<div>\r\n <div id=\"step-container\">\r\n <p-steps #stepsComponent [model]=\"items\" [readonly]=\"false\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onactiveIndexChange($event)\"></p-steps>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div class=\"buttons-step\">\r\n <div >\r\n <button pButton *ngIf=\"activeIndex != 0\" icon=\"pi pi-arrow-left\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(-1)\"></button>\r\n </div>\r\n <span >\r\n <button pButton *ngIf=\"!(activeIndex + 1 >= items.length)\" icon=\"pi pi-arrow-right\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(1)\"></button>\r\n </span>\r\n <button pButton *ngIf=\"activeIndex >= items.length - 1\" label=\"Finalizar\" [disabled]=\"loading\" (click)=\"requestNaviagtion(0)\"\r\n [style]=\"{'margin-left': '10px'}\"></button>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .p-steps-number{background-color:var(--secondary-color)!important}::ng-deep .p-button{border-radius:6px}::ng-deep .p-steps-item .p-menuitem-link{margin-inline:15vw}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{color:#fff;font-family:sans-serif}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title{color:#4b5563;font-family:inherit}
|
|
1371
|
+
args: [{ selector: 'app-step', imports: [StepsModule, RouterOutlet, ButtonModule, CommonModule], standalone: true, template: "<div>\r\n <div id=\"step-container\">\r\n <p-steps #stepsComponent [model]=\"items\" [readonly]=\"false\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onactiveIndexChange($event)\"></p-steps>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div class=\"buttons-step\">\r\n <div >\r\n <button pButton *ngIf=\"activeIndex != 0\" icon=\"pi pi-arrow-left\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(-1)\"></button>\r\n </div>\r\n <span >\r\n <button pButton *ngIf=\"!(activeIndex + 1 >= items.length)\" icon=\"pi pi-arrow-right\" [disabled]=\"loading\"\r\n (click)=\"requestNaviagtion(1)\"></button>\r\n </span>\r\n <button pButton *ngIf=\"activeIndex >= items.length - 1\" label=\"Finalizar\" [disabled]=\"loading\" (click)=\"requestNaviagtion(0)\"\r\n [style]=\"{'margin-left': '10px'}\"></button>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .p-steps-number{background-color:var(--secondary-color)!important}::ng-deep .p-button{border-radius:6px}::ng-deep .p-steps-item .p-menuitem-link{margin-inline:15vw}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{color:#fff;font-family:sans-serif}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title{color:#4b5563;font-family:inherit}:is() ul[role=tablist]{padding-bottom:10px}:is() .p-steps-number{color:#fff!important}.buttons-step{margin-bottom:1.5rem}.buttons-step button{height:3.5rem}.buttons-step ::ng-deep .p-button{background-color:var(--button-color);border-color:var(--button-color)}.buttons-step .p-button-icon-only{width:3.5rem}#step-container{overflow-x:scroll;scrollbar-width:20px;padding-bottom:5px}.buttons-step{display:flex;justify-content:space-evenly}.content{margin-block:30px}@media screen and (max-width: 765px){:is() .p-steps-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:inherit;text-align:center}::ng-deep .p-steps-item a.p-menuitem-link{margin-inline:0!important;width:90vw}}\n"] }]
|
|
1368
1372
|
}], ctorParameters: () => [{ type: i2.Router }, { type: StepService }, { type: i2.ActivatedRoute }], propDecorators: { items: [{
|
|
1369
1373
|
type: Input
|
|
1370
1374
|
}] } });
|
|
@@ -2087,14 +2091,14 @@ class ControlComponent {
|
|
|
2087
2091
|
});
|
|
2088
2092
|
}
|
|
2089
2093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ControlComponent, deps: [{ token: GeneralService }, { token: SfCrudService }, { token: i0.ChangeDetectorRef }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2090
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ControlComponent, isStandalone: true, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo" }, outputs: { setValue: "setValue", sendObject: "sendObject", addressClicked: "addressClicked", setDependencyValue: "setDependencyValue" }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container ml-0\" \r\n[ngClass]=\"control.labelPosition === 'horizontal' ? (control.reverse ? 'flex gap-2 flex-row-reverse items-left' : 'flex gap-2 items-left') : (control.reverse ? 'flex flex-column flex-column-reverse' : 'flex flex-column')\">\r\n <div class=\"label-container\">\r\n <label [for]=\"label\">{{label}}</label>\r\n <i #tooltip *ngIf=\"control.tooltip\" class=\"pi pi-question-circle\"\r\n [tooltipPosition]=\"control.tooltipPosition || 'top'\" [pTooltip]=\"control.tooltip\"\r\n (touchstart)=\"onTouchDescription()\" (touchend)=\"onUnTouchDescription()\"></i>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'string'\" >\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'input'\">\r\n <input pInputText [name]=\"label\" type=\"text\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\" [autocomplete]=\"control.autocomplete || 'off'\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [rows]=\"control.config?.rows ? control.config.rows : 4\" [(ngModel)]=\"value\"\r\n (input)=\"sendValue()\" pInputTextarea [disabled]=\"control.config?.disabled || false\"\r\n [autoResize]=\"control.config?.autoresize || false\"></textarea>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <input pInputText type=\"password\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'email'\">\r\n <input pInputText type=\"text\" [(ngModel)]=\"value\" placeholder=\"email@example.com\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"email\" (input)=\"onInputEmail(false)\"\r\n (focusout)=\"onInputEmail(true)\" (keyup.enter)=\"doFocusOut()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <p-inputMask mask=\"(999) 999-9999\" [(ngModel)]=\"value\" placeholder=\"(999) 999-9999\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"tel-national\"\r\n [unmask]=\"control.unmask || false\" (onComplete)=\"sendValue()\"></p-inputMask>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <input pInputText type=\"text\" [value]=\"value | formatAddress: control.separador\" autocomplete=\"off\" [disabled]=\"clicked\" (keydown)=\"onClickedAddres()\" (focus)=\"onClickedAddres()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <p-select [options]=\"control.enum\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config.optionLabel\" [showClear]=\"control.config.showClear\"\r\n [optionValue]=\"control.field || control.config.optionValue\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\"\r\n (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [field]=\"control.field\"\r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\" (onClear)=\"setValue.emit(null)\"></p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocompleteCustom'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" \r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\"\r\n [field]=\"control.field\" (onClear)=\"setValue.emit(null)\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <div>{{ item._display }}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input:search'\">\r\n <div class=\"p-inputgroup\">\r\n <input type=\"text\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [accept]=\"control.config?.accept || 'image/*,application/pdf'\"\r\n [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\" [configName]=\"control.config?.configName\"\r\n [limit]=\"control.config?.limit || 1\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'calendar'\">\r\n <!-- <div class=\"p-col-12\">\r\n <p-inputgroup>\r\n <p-inputMask [(ngModel)]=\"tempValue\" [mask]=\"maskDate\" [placeholder]=\"control.placeholder\"\r\n (onBlur)=\"onChangeSDate($event)\" [disabled]=\"control.disabled || false\"></p-inputMask>\r\n <p-calendar\r\n [(ngModel)]=\"value\" class=\"only-icon\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"!control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [touchUI]=\"control.touchUI || false\" [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\"\r\n ></p-calendar>\r\n </p-inputgroup>\r\n \r\n </div> -->\r\n <p-datepicker\r\n [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n ></p-datepicker>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'numeric'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <p-inputNumber [ngModel]=\"value\" (ngModelChange)=\"value = $event; sendValue()\" mode=\"decimal\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n [prefix]=\"control.currency || '$ '\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal'\">\r\n <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'percentage'\">\r\n <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n <p-inputgroup>\r\n <input type=\"number\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </p-inputgroup>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'array'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\"\r\n [configName]=\"control.config?.configName\" [limit]=\"control.config?.limit || 1\"\r\n [accept]=\"control.config?.accept || 'image/*,application/pdf'\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'multiselect'\">\r\n <p-multiSelect [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config?.optionLabel\" [optionValue]=\"control.config?.optionValue\"\r\n [placeholder]=\"control.config?.placeholder\"\r\n [display]=\"control.config?.display || 'chip'\"></p-multiSelect>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'switch'\">\r\n <p-inputSwitch [(ngModel)]=\"tempValue\" (onChange)=\"onChangeSwitch()\" [id]=\"label\"\r\n [trueValue]=\"control?.trueValue !== undefined ? control?.trueValue: null\"\r\n [falseValue]=\"control?.falseValue !== undefined ? control?.falseValue: null\"></p-inputSwitch>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <p-checkbox [(ngModel)]=\"tempCheckVal\" [binary]=\"control?.binary !== undefined ? control?.binary: true\" (onChange)=\"onCheckboxChange()\" />\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n", styles: ["::ng-deep .label-container{& label{margin-right:10px;color:#55585b;font-size:17px}& i{font-size:1.1rem}}::ng-deep .p-tooltip{max-width:15rem;font-size:.85rem;text-align:center}.control-container ::ng-deep .p-inputtext,.control-container ::ng-deep .p-inputwrapper,.control-container ::ng-deep .p-select,.control-container ::ng-deep .p-datepicker{width:100%}.control-container ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::ng-deep .p-dropdown{background:#fff;border:1px solid #d1d5db;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.control-container ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup{p-calendar{display:contents;::ng-deep input{display:none!important}::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}}p-inputMask{display:contents;::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}}}@media (max-width <=768px){:host{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$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: i5$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i7.InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "variant", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autofocus", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i16.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i17.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i11$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: FileUploadComponent, selector: "sf-file-upload", inputs: ["limit", "files", "loading", "configName", "accept"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i13$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i14$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i15$1.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i16$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i17$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i18$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ControlComponent, isStandalone: true, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo" }, outputs: { setValue: "setValue", sendObject: "sendObject", addressClicked: "addressClicked", setDependencyValue: "setDependencyValue" }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container ml-0\" \r\n[ngClass]=\"control.labelPosition === 'horizontal' ? (control.reverse ? 'flex gap-2 flex-row-reverse items-left' : 'flex gap-2 items-left') : (control.reverse ? 'flex flex-column flex-column-reverse' : 'flex flex-column')\">\r\n <div class=\"label-container\">\r\n <label [for]=\"label\">{{label}}</label>\r\n <i #tooltip *ngIf=\"control.tooltip\" class=\"pi pi-question-circle\"\r\n [tooltipPosition]=\"control.tooltipPosition || 'top'\" [pTooltip]=\"control.tooltip\"\r\n (touchstart)=\"onTouchDescription()\" (touchend)=\"onUnTouchDescription()\"></i>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'string'\" >\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'input'\">\r\n <input pInputText [name]=\"label\" type=\"text\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\" [autocomplete]=\"control.autocomplete || 'off'\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [rows]=\"control.config?.rows ? control.config.rows : 4\" [(ngModel)]=\"value\"\r\n (input)=\"sendValue()\" pInputTextarea [disabled]=\"control.config?.disabled || false\"\r\n [autoResize]=\"control.config?.autoresize || false\"></textarea>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <input pInputText type=\"password\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'email'\">\r\n <input pInputText type=\"text\" [(ngModel)]=\"value\" placeholder=\"email@example.com\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"email\" (input)=\"onInputEmail(false)\"\r\n (focusout)=\"onInputEmail(true)\" (keyup.enter)=\"doFocusOut()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <p-inputMask mask=\"(999) 999-9999\" [(ngModel)]=\"value\" placeholder=\"(999) 999-9999\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"tel-national\"\r\n [unmask]=\"control.unmask || false\" (onComplete)=\"sendValue()\"></p-inputMask>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <input pInputText type=\"text\" [value]=\"value | formatAddress: control.separador\" autocomplete=\"off\" [disabled]=\"clicked\" (keydown)=\"onClickedAddres()\" (focus)=\"onClickedAddres()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <p-select [options]=\"control.enum\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config.optionLabel\" [showClear]=\"control.config.showClear\"\r\n [optionValue]=\"control.field || control.config.optionValue\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\"\r\n (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [field]=\"control.field\"\r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\" (onClear)=\"setValue.emit(null)\"></p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocompleteCustom'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" \r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\"\r\n [field]=\"control.field\" (onClear)=\"setValue.emit(null)\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <div>{{ item._display }}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input:search'\">\r\n <div class=\"p-inputgroup\">\r\n <input type=\"text\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [accept]=\"control.config?.accept || 'image/*,application/pdf'\"\r\n [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\" [configName]=\"control.config?.configName\"\r\n [limit]=\"control.config?.limit || 1\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'calendar'\">\r\n <!-- <div class=\"p-col-12\">\r\n <p-inputgroup>\r\n <p-inputMask [(ngModel)]=\"tempValue\" [mask]=\"maskDate\" [placeholder]=\"control.placeholder\"\r\n (onBlur)=\"onChangeSDate($event)\" [disabled]=\"control.disabled || false\"></p-inputMask>\r\n <p-calendar\r\n [(ngModel)]=\"value\" class=\"only-icon\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"!control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [touchUI]=\"control.touchUI || false\" [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\"\r\n ></p-calendar>\r\n </p-inputgroup>\r\n \r\n </div> -->\r\n <p-datepicker\r\n [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n ></p-datepicker>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'numeric'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <p-inputNumber [ngModel]=\"value\" (ngModelChange)=\"value = $event; sendValue()\" mode=\"decimal\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n [prefix]=\"control.currency || '$ '\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal'\">\r\n <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'percentage'\">\r\n <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n <p-inputgroup>\r\n <input type=\"number\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </p-inputgroup>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'array'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\"\r\n [configName]=\"control.config?.configName\" [limit]=\"control.config?.limit || 1\"\r\n [accept]=\"control.config?.accept || 'image/*,application/pdf'\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'multiselect'\">\r\n <p-multiSelect [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config?.optionLabel\" [optionValue]=\"control.config?.optionValue\"\r\n [placeholder]=\"control.config?.placeholder\"\r\n [display]=\"control.config?.display || 'chip'\"></p-multiSelect>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'switch'\">\r\n <p-inputSwitch [(ngModel)]=\"tempValue\" (onChange)=\"onChangeSwitch()\" [id]=\"label\"\r\n [trueValue]=\"control?.trueValue !== undefined ? control?.trueValue: null\"\r\n [falseValue]=\"control?.falseValue !== undefined ? control?.falseValue: null\"></p-inputSwitch>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <p-checkbox [(ngModel)]=\"tempCheckVal\" [binary]=\"control?.binary !== undefined ? control?.binary: true\" (onChange)=\"onCheckboxChange()\" />\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n", styles: [":is() label{margin-right:10px;color:#55585b;font-size:17px}:is() i{font-size:1.1rem}::ng-deep .p-tooltip{max-width:15rem;font-size:.85rem;text-align:center}.control-container ::ng-deep .p-inputtext,.control-container ::ng-deep .p-inputwrapper,.control-container ::ng-deep .p-select,.control-container ::ng-deep .p-datepicker{width:100%}.control-container ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::ng-deep .p-dropdown{background:#fff;border:1px solid #d1d5db;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.control-container ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup p-calendar{display:contents}.p-inputgroup p-calendar ::ng-deep input{display:none!important}.p-inputgroup p-calendar ::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}.p-inputgroup p-inputMask{display:contents}.p-inputgroup p-inputMask ::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}@media (max-width <=768px){:host{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$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: i5$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i7.InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "variant", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autofocus", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i16.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i17.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i11$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: FileUploadComponent, selector: "sf-file-upload", inputs: ["limit", "files", "loading", "configName", "accept"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i13$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i14$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i15$1.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i16$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i17$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i18$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2091
2095
|
}
|
|
2092
2096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ControlComponent, decorators: [{
|
|
2093
2097
|
type: Component,
|
|
2094
2098
|
args: [{ selector: 'sf-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule,
|
|
2095
2099
|
InputTextModule, TextareaModule, InputMaskModule, SelectModule, MultiSelectModule, AutoCompleteModule, ButtonModule, FileUploadComponent,
|
|
2096
2100
|
DatePickerModule, InputNumberModule, InputSwitchModule, CheckboxModule, InputGroupModule, InputGroupAddonModule, TooltipModule
|
|
2097
|
-
], standalone: true, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container ml-0\" \r\n[ngClass]=\"control.labelPosition === 'horizontal' ? (control.reverse ? 'flex gap-2 flex-row-reverse items-left' : 'flex gap-2 items-left') : (control.reverse ? 'flex flex-column flex-column-reverse' : 'flex flex-column')\">\r\n <div class=\"label-container\">\r\n <label [for]=\"label\">{{label}}</label>\r\n <i #tooltip *ngIf=\"control.tooltip\" class=\"pi pi-question-circle\"\r\n [tooltipPosition]=\"control.tooltipPosition || 'top'\" [pTooltip]=\"control.tooltip\"\r\n (touchstart)=\"onTouchDescription()\" (touchend)=\"onUnTouchDescription()\"></i>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'string'\" >\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'input'\">\r\n <input pInputText [name]=\"label\" type=\"text\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\" [autocomplete]=\"control.autocomplete || 'off'\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [rows]=\"control.config?.rows ? control.config.rows : 4\" [(ngModel)]=\"value\"\r\n (input)=\"sendValue()\" pInputTextarea [disabled]=\"control.config?.disabled || false\"\r\n [autoResize]=\"control.config?.autoresize || false\"></textarea>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <input pInputText type=\"password\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'email'\">\r\n <input pInputText type=\"text\" [(ngModel)]=\"value\" placeholder=\"email@example.com\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"email\" (input)=\"onInputEmail(false)\"\r\n (focusout)=\"onInputEmail(true)\" (keyup.enter)=\"doFocusOut()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <p-inputMask mask=\"(999) 999-9999\" [(ngModel)]=\"value\" placeholder=\"(999) 999-9999\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"tel-national\"\r\n [unmask]=\"control.unmask || false\" (onComplete)=\"sendValue()\"></p-inputMask>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <input pInputText type=\"text\" [value]=\"value | formatAddress: control.separador\" autocomplete=\"off\" [disabled]=\"clicked\" (keydown)=\"onClickedAddres()\" (focus)=\"onClickedAddres()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <p-select [options]=\"control.enum\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config.optionLabel\" [showClear]=\"control.config.showClear\"\r\n [optionValue]=\"control.field || control.config.optionValue\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\"\r\n (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [field]=\"control.field\"\r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\" (onClear)=\"setValue.emit(null)\"></p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocompleteCustom'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" \r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\"\r\n [field]=\"control.field\" (onClear)=\"setValue.emit(null)\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <div>{{ item._display }}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input:search'\">\r\n <div class=\"p-inputgroup\">\r\n <input type=\"text\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [accept]=\"control.config?.accept || 'image/*,application/pdf'\"\r\n [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\" [configName]=\"control.config?.configName\"\r\n [limit]=\"control.config?.limit || 1\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'calendar'\">\r\n <!-- <div class=\"p-col-12\">\r\n <p-inputgroup>\r\n <p-inputMask [(ngModel)]=\"tempValue\" [mask]=\"maskDate\" [placeholder]=\"control.placeholder\"\r\n (onBlur)=\"onChangeSDate($event)\" [disabled]=\"control.disabled || false\"></p-inputMask>\r\n <p-calendar\r\n [(ngModel)]=\"value\" class=\"only-icon\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"!control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [touchUI]=\"control.touchUI || false\" [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\"\r\n ></p-calendar>\r\n </p-inputgroup>\r\n \r\n </div> -->\r\n <p-datepicker\r\n [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n ></p-datepicker>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'numeric'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <p-inputNumber [ngModel]=\"value\" (ngModelChange)=\"value = $event; sendValue()\" mode=\"decimal\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n [prefix]=\"control.currency || '$ '\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal'\">\r\n <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'percentage'\">\r\n <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n <p-inputgroup>\r\n <input type=\"number\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </p-inputgroup>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'array'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\"\r\n [configName]=\"control.config?.configName\" [limit]=\"control.config?.limit || 1\"\r\n [accept]=\"control.config?.accept || 'image/*,application/pdf'\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'multiselect'\">\r\n <p-multiSelect [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config?.optionLabel\" [optionValue]=\"control.config?.optionValue\"\r\n [placeholder]=\"control.config?.placeholder\"\r\n [display]=\"control.config?.display || 'chip'\"></p-multiSelect>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'switch'\">\r\n <p-inputSwitch [(ngModel)]=\"tempValue\" (onChange)=\"onChangeSwitch()\" [id]=\"label\"\r\n [trueValue]=\"control?.trueValue !== undefined ? control?.trueValue: null\"\r\n [falseValue]=\"control?.falseValue !== undefined ? control?.falseValue: null\"></p-inputSwitch>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <p-checkbox [(ngModel)]=\"tempCheckVal\" [binary]=\"control?.binary !== undefined ? control?.binary: true\" (onChange)=\"onCheckboxChange()\" />\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n", styles: ["::ng-deep .label-container{& label{margin-right:10px;color:#55585b;font-size:17px}& i{font-size:1.1rem}}::ng-deep .p-tooltip{max-width:15rem;font-size:.85rem;text-align:center}.control-container ::ng-deep .p-inputtext,.control-container ::ng-deep .p-inputwrapper,.control-container ::ng-deep .p-select,.control-container ::ng-deep .p-datepicker{width:100%}.control-container ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::ng-deep .p-dropdown{background:#fff;border:1px solid #d1d5db;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.control-container ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup{p-calendar{display:contents;::ng-deep input{display:none!important}::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}}p-inputMask{display:contents;::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}}}@media (max-width <=768px){:host{font-size:14px}}\n"] }]
|
|
2101
|
+
], standalone: true, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container ml-0\" \r\n[ngClass]=\"control.labelPosition === 'horizontal' ? (control.reverse ? 'flex gap-2 flex-row-reverse items-left' : 'flex gap-2 items-left') : (control.reverse ? 'flex flex-column flex-column-reverse' : 'flex flex-column')\">\r\n <div class=\"label-container\">\r\n <label [for]=\"label\">{{label}}</label>\r\n <i #tooltip *ngIf=\"control.tooltip\" class=\"pi pi-question-circle\"\r\n [tooltipPosition]=\"control.tooltipPosition || 'top'\" [pTooltip]=\"control.tooltip\"\r\n (touchstart)=\"onTouchDescription()\" (touchend)=\"onUnTouchDescription()\"></i>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'string'\" >\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'input'\">\r\n <input pInputText [name]=\"label\" type=\"text\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\" [autocomplete]=\"control.autocomplete || 'off'\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [rows]=\"control.config?.rows ? control.config.rows : 4\" [(ngModel)]=\"value\"\r\n (input)=\"sendValue()\" pInputTextarea [disabled]=\"control.config?.disabled || false\"\r\n [autoResize]=\"control.config?.autoresize || false\"></textarea>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <input pInputText type=\"password\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n [disabled]=\"control.disabled || false\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'email'\">\r\n <input pInputText type=\"text\" [(ngModel)]=\"value\" placeholder=\"email@example.com\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"email\" (input)=\"onInputEmail(false)\"\r\n (focusout)=\"onInputEmail(true)\" (keyup.enter)=\"doFocusOut()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <p-inputMask mask=\"(999) 999-9999\" [(ngModel)]=\"value\" placeholder=\"(999) 999-9999\"\r\n [disabled]=\"control.disabled || false\" autocomplete=\"tel-national\"\r\n [unmask]=\"control.unmask || false\" (onComplete)=\"sendValue()\"></p-inputMask>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <input pInputText type=\"text\" [value]=\"value | formatAddress: control.separador\" autocomplete=\"off\" [disabled]=\"clicked\" (keydown)=\"onClickedAddres()\" (focus)=\"onClickedAddres()\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <p-select [options]=\"control.enum\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config.optionLabel\" [showClear]=\"control.config.showClear\"\r\n [optionValue]=\"control.field || control.config.optionValue\" appendTo=\"body\"\r\n placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\"\r\n (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n [disabled]=\"control.disabled || false\"></p-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [field]=\"control.field\"\r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\" (onClear)=\"setValue.emit(null)\"></p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'autocompleteCustom'\">\r\n <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n (completeMethod)=\"loadDataFromControlBusquedaService($event)\" \r\n [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n [disabled]=\"control.disabled || false\"\r\n [field]=\"control.field\" (onClear)=\"setValue.emit(null)\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <div>{{ item._display }}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input:search'\">\r\n <div class=\"p-inputgroup\">\r\n <input type=\"text\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [accept]=\"control.config?.accept || 'image/*,application/pdf'\"\r\n [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\" [configName]=\"control.config?.configName\"\r\n [limit]=\"control.config?.limit || 1\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'calendar'\">\r\n <!-- <div class=\"p-col-12\">\r\n <p-inputgroup>\r\n <p-inputMask [(ngModel)]=\"tempValue\" [mask]=\"maskDate\" [placeholder]=\"control.placeholder\"\r\n (onBlur)=\"onChangeSDate($event)\" [disabled]=\"control.disabled || false\"></p-inputMask>\r\n <p-calendar\r\n [(ngModel)]=\"value\" class=\"only-icon\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"!control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [touchUI]=\"control.touchUI || false\" [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\"\r\n ></p-calendar>\r\n </p-inputgroup>\r\n \r\n </div> -->\r\n <p-datepicker\r\n [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n [showOnFocus]=\"control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n ></p-datepicker>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'numeric'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <p-inputNumber [ngModel]=\"value\" (ngModelChange)=\"value = $event; sendValue()\" mode=\"decimal\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n [prefix]=\"control.currency || '$ '\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal'\">\r\n <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'percentage'\">\r\n <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n <p-inputgroup>\r\n <input type=\"number\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n (keyup.enter)=\"doFocusOut()\" />\r\n <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n </p-inputgroup>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'array'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'file'\">\r\n <sf-file-upload *ngIf=\"!isLoading\" [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\"\r\n [configName]=\"control.config?.configName\" [limit]=\"control.config?.limit || 1\"\r\n [accept]=\"control.config?.accept || 'image/*,application/pdf'\" (onUpload)=\"onUpload($event)\"\r\n (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'multiselect'\">\r\n <p-multiSelect [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n [optionLabel]=\"control.config?.optionLabel\" [optionValue]=\"control.config?.optionValue\"\r\n [placeholder]=\"control.config?.placeholder\"\r\n [display]=\"control.config?.display || 'chip'\"></p-multiSelect>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <ng-container [ngSwitch]=\"control.subtype\">\r\n <ng-container *ngSwitchCase=\"'switch'\">\r\n <p-inputSwitch [(ngModel)]=\"tempValue\" (onChange)=\"onChangeSwitch()\" [id]=\"label\"\r\n [trueValue]=\"control?.trueValue !== undefined ? control?.trueValue: null\"\r\n [falseValue]=\"control?.falseValue !== undefined ? control?.falseValue: null\"></p-inputSwitch>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <p-checkbox [(ngModel)]=\"tempCheckVal\" [binary]=\"control?.binary !== undefined ? control?.binary: true\" (onChange)=\"onCheckboxChange()\" />\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n", styles: [":is() label{margin-right:10px;color:#55585b;font-size:17px}:is() i{font-size:1.1rem}::ng-deep .p-tooltip{max-width:15rem;font-size:.85rem;text-align:center}.control-container ::ng-deep .p-inputtext,.control-container ::ng-deep .p-inputwrapper,.control-container ::ng-deep .p-select,.control-container ::ng-deep .p-datepicker{width:100%}.control-container ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::ng-deep .p-dropdown{background:#fff;border:1px solid #d1d5db;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.control-container ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup p-calendar{display:contents}.p-inputgroup p-calendar ::ng-deep input{display:none!important}.p-inputgroup p-calendar ::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}.p-inputgroup p-inputMask{display:contents}.p-inputgroup p-inputMask ::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}@media (max-width <=768px){:host{font-size:14px}}\n"] }]
|
|
2098
2102
|
}], ctorParameters: () => [{ type: GeneralService }, { type: SfCrudService }, { type: i0.ChangeDetectorRef }, { type: NotificationService }], propDecorators: { showTempValue: [{
|
|
2099
2103
|
type: Input
|
|
2100
2104
|
}], control: [{
|
|
@@ -2515,11 +2519,11 @@ class FormComponent {
|
|
|
2515
2519
|
this.setValue(value.data, value.scope, i, j, k);
|
|
2516
2520
|
}
|
|
2517
2521
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormComponent, deps: [{ token: SfCrudService }, { token: i2$1.DomSanitizer }, { token: StepService }, { token: i4.AdoService }, { token: i4.JWTService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2518
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { uiEsquema: "uiEsquema", esquema: "esquema", data: "data", isDialog: "isDialog", isAddressDialog: "isAddressDialog", separador: "separador" }, host: { properties: { "style.--primary-color": "this.color", "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButton" } }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"controlsLoaded\" class=\"frm-container\">\r\n <ng-container *ngIf=\"isAddressDialog && currentAddress\">\r\n Direcci\u00F3n actual: {{currentAddress | formatAddress: separador}}\r\n <br>\r\n </ng-container>\r\n <br>\r\n <ng-container *ngIf=\"isAddressDialog\">\r\n Direcci\u00F3n nueva: {{newAddress | formatAddress: separador}}\r\n </ng-container>\r\n <p-fluid>\r\n <div *ngFor=\"let element of uiEsquema.elements; let i = index\" [class]=\"element?.class\" #a>\r\n <ng-container [ngSwitch]=\"element.type\" *ngIf=\"visible[i][0]\">\r\n <div class=\"label\" *ngSwitchCase=\"'Label'\" [style]=\"element?.style\">\r\n {{element?.label}}\r\n </div>\r\n <ng-container *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'Texto'\" [ngStyle]=\"{'height': '100%', 'margin-block': 'auto'}\">\r\n <p>{{el.label}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'VerticalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'PDF'\" class=\"pdf\">\r\n <iframe [src]=\"values[i][j]\" frameborder=\"0\" allow=\"geolocation *; camera *;\"></iframe>\r\n </div>\r\n <div *ngSwitchCase=\"'PDF-SIGN'\">\r\n <sf-sign [allowDownload]=\"true\" [idkatios]=\"idKatios\" [tdoc]=\"data.pdf.tdoc\" [ndoc]=\"data.pdf.ndoc\"\r\n [idDocument]=\"data.pdf.id\" [typeDocument]=\"data.pdf.idDoc\"\r\n (stateDocument)=\"onStateDocument($event)\"></sf-sign>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'SIMULADOR'\">\r\n <sf-simulador [simulador]=\"data\" [otherToolTips]=\"data.otherTooltips\"\r\n (simuladorChange)=\"onSimuladorChange($event)\" (enProceso)=\"emitLoadingForm($event)\"></sf-simulador>\r\n </ng-container>\r\n <div *ngSwitchCase=\"'ADO'\" class=\"buttons\">\r\n <p-button *ngIf=\"!data?.ADO?.dataProceso?.idProceso\" [ngStyle]=\"el?.ngStyle\" (click)=\"goToADO()\" label=\"Validar identidad\"></p-button>\r\n </div>\r\n <div *ngSwitchCase=\"'ADO'\">\r\n <div *ngIf=\"data?.ADO?.dataProceso?.idProceso\">\r\n <div class=\"data-ado-container\">\r\n <ng-container *ngIf=\"proceso\">\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === true\" pTooltip=\"Validado\" tooltipPosition=\"top\" id=\"Validado\" class=\"pi pi-user\" style=\"color: green\"\r\n (touchstart)=\"onTouchDescription('Validado', false)\" (touchend)=\"onUnTouchDescription('Validado')\"></i>\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === false\" pTooltip=\"No validado\" tooltipPosition=\"top\" id=\"No-Validado\" class=\"pi pi-user\" style=\"color: red\"\r\n (touchstart)=\"onTouchDescription('No-Validado', false)\" (touchend)=\"onUnTouchDescription('No-Validado')\"></i>\r\n <i *ngIf=\"!proceso?.respuestaProceso\" pTooltip=\"Sin validar\" tooltipPosition=\"top\" class=\"pi pi-user\" id=\"Sin-Validar\" style=\"color: gray\"\r\n (touchstart)=\"onTouchDescription('Sin-Validar', false)\" (touchend)=\"onUnTouchDescription('Sin-Validar')\"></i>\r\n </ng-container>\r\n <div class=\"buttons\">\r\n <button pButton icon=\"pi pi-external-link\" (click)=\"goToADO()\" pTooltip=\"Abrir\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-copy\" (click)=\"copyToClipboard(proceso.id)\" pTooltip=\"Copiar\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-refresh\" (click)=\"refreshIntegracion(proceso.id)\" pTooltip=\"Refrescar\" [disabled]=\"!proceso\"></button>\r\n </div>\r\n </div>\r\n <p class=\"result-ado\" *ngIf=\"proceso && !proceso.respuestaProceso && proceso.estado == 'PROCESANDO'\">Procesando</p>\r\n <p class=\"result-ado\" *ngIf=\"proceso && proceso.respuestaProceso && proceso.estado == 'TERMINADO'\">{{proceso.respuestaProceso.Detalle ?? proceso.respuestaProceso.Mensaje}}</p>\r\n </div>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'Table'\">\r\n <p-table [value]=\"values[i][j]\" [columns]=\"controls[i][j].config.columns\">\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n <button pButton pRipple icon=\"pi pi-plus\" (click)=\"addObjectArray(el)\"\r\n class=\"p-button-success\" [disabled]=\"controls[i][j].disabled === true\"></button>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\">\r\n {{col.label}}\r\n </th>\r\n <ng-container>\r\n <th></th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n <tr>\r\n <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n <ng-container *ngSwitchCase=\"'control'\">\r\n <sf-control [control]=\"extracControlFromTableElements(i, j, col)\" [label]=\"\"\r\n [value]=\"extracValueFromTableElements(i, j, rowIndex, col)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (setValue)=\"setValue($event, extracValueFromTableElements(i, j, rowIndex, col).scope, i, j)\"\r\n [showTempValue]=\"true\"\r\n >\r\n </sf-control>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <td>{{rowData[col.col]}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <td>{{rowData[col.col] | formatAddress: extracControlFromTableElements(i, j, col).separador }}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'currency:USD'\">\r\n <td>{{rowData[col.col] | currency: 'USD'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:yyyy-mm-dd'\">\r\n <td>{{rowData[col.col] | date: 'yyyy-mm-dd'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:dd/mm/yyyy'\">\r\n <td>{{rowData[col.col] | date: 'dd/MM/yyyy'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <td>\r\n <i *ngIf=\"rowData[col.col]\" class=\"pi pi-check\"></i>\r\n <i *ngIf=\"!rowData[col.col]\" class=\"pi pi-times\"></i>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container>\r\n <td>\r\n <button pButton pRipple type=\"button\"\r\n (click)=\"editRow(el, rowData, rowIndex)\" icon=\"pi pi-pencil\"\r\n class=\"p-button-rounded p-button-info mr-1\"></button>\r\n <button pButton pRipple type=\"button\" (click)=\"deleteRow(el, rowIndex)\" [disabled]=\"controls[i][j].disabled === true\"\r\n icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"></button>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'ArrayLayout'\">\r\n <div *ngFor=\"let arrayItem of getArrayItems(element.scope); let arrayIndex = index\" [ngClass]=\"element.classElements || 'flex align-items-center w-full'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"getControl(el,arrayIndex)\" [label]=\"el.label\"\r\n [value]=\"values[i][j] || getValueFromData(element,el,arrayIndex)\" (setValue)=\"setValue($event, el.scope, i, j,arrayIndex)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"\r\n (setDependencyValue)=\"setDependencyValue($event, i, j, arrayIndex)\"></sf-control>\r\n </ng-container>\r\n </div>\r\n <p-button *ngIf=\"element.deleteButton && !(element.deleteButton.hide?.index === arrayIndex)\" [icon]=\"element.deleteButton.icon\" [rounded]=\"element.deleteButton.rounded || false\" [text]=\"element.deleteButton.text || true\" [severity]=\"element.deleteButton.severity || 'danger'\" (click)=\"removeArrayItem(element, i, arrayIndex)\" \r\n [label]=\"element.deleteButton.label\" />\r\n </div>\r\n <div class=\"col-12\">\r\n <div *ngIf=\"element.addButton\" class=\"flex items-center justify-content-between mb-2\">\r\n <p-button [icon]=\"element.addButton.icon\" [label]=\"element.addButton.label\" (click)=\"addArrayItem(element, i)\" [severity]=\"element.addButton.severity || 'primary'\"/>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </p-fluid>\r\n</div>\r\n\r\n<!-- <p-toast *ngIf=\"isDialog\"></p-toast> -->\r\n", styles: [":not(.col-12) .label{display:flex;justify-content:center;align-items:center;padding-inline:.5rem;margin-bottom:15px;margin-top:20px;border-radius:13px;font-size:18px;font-size:inherit;background-color:var(--primary-color);text-align:center;color:var(--normal-text-color)}.pdf{display:flex;width:100%;height:80vh;& iframe{width:80%;margin-inline:10%}}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content;>*{margin-inline:4px}>div{display:flex;align-items:center;>*{margin-inline:4px}}}i.pi-user{font-size:2rem}.result-ado{min-height:1rem;text-align:center}sf-simulador{display:flow-root;width:80%;margin-inline:auto;margin-bottom:35px}sf-sign{display:block;margin-inline:auto;width:80%;& pdf-viewer{min-height:130vh!important;max-height:130vh!important}}.buttons{display:flex;justify-content:space-evenly}::ng-deep *{box-shadow:none}.frm-container ::ng-deep .p-inputtext:focus,.frm-container ::ng-deep .p-inputtext:active,.frm-container ::ng-deep .p-inputwrapper:focus,.frm-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.frm-container ::ng-deep :not(:disabled):active,.frm-container ::ng-deep :not(.p-disabled) .p-inputtext:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper-focus,.frm-container ::ng-deep .p-radiobutton-box .p-highlight,.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover{border-color:var(--button-color)}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{background:var(--button-color);border-color:var(--button-color)!important}@media screen and (max-width:765px){:not(.col-12) .label{height:fit-content}.field{margin-bottom:.5rem}.pdf>iframe{width:100%;margin-inline:0}sf-sign{width:100%;& pdf-viewer{min-height:60vh!important;max-height:120vh!important}}sf-simulador{display:block;width:100%;margin-inline:auto}.data-ado-container{text-align:center;.buttons{max-width:80vw;flex-direction:row}}.buttons{flex-direction:column;align-items:center}}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box .p-radiobutton-icon{background-color:#fff}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-range{background-color:var(--primary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}\n"], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6.Fluid, selector: "p-fluid" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i10.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: ControlComponent, selector: "sf-control", inputs: ["showTempValue", "control", "label", "value", "appendTo"], outputs: ["setValue", "sendObject", "addressClicked", "setDependencyValue"] }, { kind: "ngmodule", type: SfPdfsignModule }, { kind: "component", type: i6$1.SignComponent, selector: "sf-sign", inputs: ["idkatios", "tdoc", "ndoc", "idDocument", "typeDocument", "allowDownload"], outputs: ["stateDocument", "loading"] }, { kind: "ngmodule", type: SfSimuladorModule }, { kind: "component", type: i7$1.SfSimuladorComponent, selector: "sf-simulador", inputs: ["simulador", "otherToolTips", "labels"], outputs: ["simuladorChange", "enProceso"] }] });
|
|
2522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { uiEsquema: "uiEsquema", esquema: "esquema", data: "data", isDialog: "isDialog", isAddressDialog: "isAddressDialog", separador: "separador" }, host: { properties: { "style.--primary-color": "this.color", "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButton" } }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"controlsLoaded\" class=\"frm-container\">\r\n <ng-container *ngIf=\"isAddressDialog && currentAddress\">\r\n Direcci\u00F3n actual: {{currentAddress | formatAddress: separador}}\r\n <br>\r\n </ng-container>\r\n <br>\r\n <ng-container *ngIf=\"isAddressDialog\">\r\n Direcci\u00F3n nueva: {{newAddress | formatAddress: separador}}\r\n </ng-container>\r\n <p-fluid>\r\n <div *ngFor=\"let element of uiEsquema.elements; let i = index\" [class]=\"element?.class\" #a>\r\n <ng-container [ngSwitch]=\"element.type\" *ngIf=\"visible[i][0]\">\r\n <div class=\"label\" *ngSwitchCase=\"'Label'\" [style]=\"element?.style\">\r\n {{element?.label}}\r\n </div>\r\n <ng-container *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'Texto'\" [ngStyle]=\"{'height': '100%', 'margin-block': 'auto'}\">\r\n <p>{{el.label}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'VerticalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'PDF'\" class=\"pdf\">\r\n <iframe [src]=\"values[i][j]\" frameborder=\"0\" allow=\"geolocation *; camera *;\"></iframe>\r\n </div>\r\n <div *ngSwitchCase=\"'PDF-SIGN'\">\r\n <sf-sign [allowDownload]=\"true\" [idkatios]=\"idKatios\" [tdoc]=\"data.pdf.tdoc\" [ndoc]=\"data.pdf.ndoc\"\r\n [idDocument]=\"data.pdf.id\" [typeDocument]=\"data.pdf.idDoc\"\r\n (stateDocument)=\"onStateDocument($event)\"></sf-sign>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'SIMULADOR'\">\r\n <sf-simulador [simulador]=\"data\" [otherToolTips]=\"data.otherTooltips\"\r\n (simuladorChange)=\"onSimuladorChange($event)\" (enProceso)=\"emitLoadingForm($event)\"></sf-simulador>\r\n </ng-container>\r\n <div *ngSwitchCase=\"'ADO'\" class=\"buttons\">\r\n <p-button *ngIf=\"!data?.ADO?.dataProceso?.idProceso\" [ngStyle]=\"el?.ngStyle\" (click)=\"goToADO()\" label=\"Validar identidad\"></p-button>\r\n </div>\r\n <div *ngSwitchCase=\"'ADO'\">\r\n <div *ngIf=\"data?.ADO?.dataProceso?.idProceso\">\r\n <div class=\"data-ado-container\">\r\n <ng-container *ngIf=\"proceso\">\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === true\" pTooltip=\"Validado\" tooltipPosition=\"top\" id=\"Validado\" class=\"pi pi-user\" style=\"color: green\"\r\n (touchstart)=\"onTouchDescription('Validado', false)\" (touchend)=\"onUnTouchDescription('Validado')\"></i>\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === false\" pTooltip=\"No validado\" tooltipPosition=\"top\" id=\"No-Validado\" class=\"pi pi-user\" style=\"color: red\"\r\n (touchstart)=\"onTouchDescription('No-Validado', false)\" (touchend)=\"onUnTouchDescription('No-Validado')\"></i>\r\n <i *ngIf=\"!proceso?.respuestaProceso\" pTooltip=\"Sin validar\" tooltipPosition=\"top\" class=\"pi pi-user\" id=\"Sin-Validar\" style=\"color: gray\"\r\n (touchstart)=\"onTouchDescription('Sin-Validar', false)\" (touchend)=\"onUnTouchDescription('Sin-Validar')\"></i>\r\n </ng-container>\r\n <div class=\"buttons\">\r\n <button pButton icon=\"pi pi-external-link\" (click)=\"goToADO()\" pTooltip=\"Abrir\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-copy\" (click)=\"copyToClipboard(proceso.id)\" pTooltip=\"Copiar\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-refresh\" (click)=\"refreshIntegracion(proceso.id)\" pTooltip=\"Refrescar\" [disabled]=\"!proceso\"></button>\r\n </div>\r\n </div>\r\n <p class=\"result-ado\" *ngIf=\"proceso && !proceso.respuestaProceso && proceso.estado == 'PROCESANDO'\">Procesando</p>\r\n <p class=\"result-ado\" *ngIf=\"proceso && proceso.respuestaProceso && proceso.estado == 'TERMINADO'\">{{proceso.respuestaProceso.Detalle ?? proceso.respuestaProceso.Mensaje}}</p>\r\n </div>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'Table'\">\r\n <p-table [value]=\"values[i][j]\" [columns]=\"controls[i][j].config.columns\">\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n <button pButton pRipple icon=\"pi pi-plus\" (click)=\"addObjectArray(el)\"\r\n class=\"p-button-success\" [disabled]=\"controls[i][j].disabled === true\"></button>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\">\r\n {{col.label}}\r\n </th>\r\n <ng-container>\r\n <th></th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n <tr>\r\n <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n <ng-container *ngSwitchCase=\"'control'\">\r\n <sf-control [control]=\"extracControlFromTableElements(i, j, col)\" [label]=\"\"\r\n [value]=\"extracValueFromTableElements(i, j, rowIndex, col)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (setValue)=\"setValue($event, extracValueFromTableElements(i, j, rowIndex, col).scope, i, j)\"\r\n [showTempValue]=\"true\"\r\n >\r\n </sf-control>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <td>{{rowData[col.col]}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <td>{{rowData[col.col] | formatAddress: extracControlFromTableElements(i, j, col).separador }}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'currency:USD'\">\r\n <td>{{rowData[col.col] | currency: 'USD'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:yyyy-mm-dd'\">\r\n <td>{{rowData[col.col] | date: 'yyyy-mm-dd'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:dd/mm/yyyy'\">\r\n <td>{{rowData[col.col] | date: 'dd/MM/yyyy'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <td>\r\n <i *ngIf=\"rowData[col.col]\" class=\"pi pi-check\"></i>\r\n <i *ngIf=\"!rowData[col.col]\" class=\"pi pi-times\"></i>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container>\r\n <td>\r\n <button pButton pRipple type=\"button\"\r\n (click)=\"editRow(el, rowData, rowIndex)\" icon=\"pi pi-pencil\"\r\n class=\"p-button-rounded p-button-info mr-1\"></button>\r\n <button pButton pRipple type=\"button\" (click)=\"deleteRow(el, rowIndex)\" [disabled]=\"controls[i][j].disabled === true\"\r\n icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"></button>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'ArrayLayout'\">\r\n <div *ngFor=\"let arrayItem of getArrayItems(element.scope); let arrayIndex = index\" [ngClass]=\"element.classElements || 'flex align-items-center w-full'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"getControl(el,arrayIndex)\" [label]=\"el.label\"\r\n [value]=\"values[i][j] || getValueFromData(element,el,arrayIndex)\" (setValue)=\"setValue($event, el.scope, i, j,arrayIndex)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"\r\n (setDependencyValue)=\"setDependencyValue($event, i, j, arrayIndex)\"></sf-control>\r\n </ng-container>\r\n </div>\r\n <p-button *ngIf=\"element.deleteButton && !(element.deleteButton.hide?.index === arrayIndex)\" [icon]=\"element.deleteButton.icon\" [rounded]=\"element.deleteButton.rounded || false\" [text]=\"element.deleteButton.text || true\" [severity]=\"element.deleteButton.severity || 'danger'\" (click)=\"removeArrayItem(element, i, arrayIndex)\" \r\n [label]=\"element.deleteButton.label\" />\r\n </div>\r\n <div class=\"col-12\">\r\n <div *ngIf=\"element.addButton\" class=\"flex items-center justify-content-between mb-2\">\r\n <p-button [icon]=\"element.addButton.icon\" [label]=\"element.addButton.label\" (click)=\"addArrayItem(element, i)\" [severity]=\"element.addButton.severity || 'primary'\"/>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </p-fluid>\r\n</div>\r\n\r\n<!-- <p-toast *ngIf=\"isDialog\"></p-toast> -->\r\n", styles: [":not(.col-12) .label{display:flex;justify-content:center;align-items:center;padding-inline:.5rem;margin-bottom:15px;margin-top:20px;border-radius:13px;font-size:18px;font-size:inherit;background-color:var(--primary-color);text-align:center;color:var(--normal-text-color)}.pdf{display:flex;width:100%;height:80vh}.pdf iframe{width:80%;margin-inline:10%}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content}.data-ado-container>*{margin-inline:4px}.data-ado-container>div{display:flex;align-items:center}.data-ado-container>div>*{margin-inline:4px}i.pi-user{font-size:2rem}.result-ado{min-height:1rem;text-align:center}sf-simulador{display:flow-root;width:80%;margin-inline:auto;margin-bottom:35px}sf-sign{display:block;margin-inline:auto;width:80%}sf-sign pdf-viewer{min-height:130vh!important;max-height:130vh!important}.buttons{display:flex;justify-content:space-evenly}::ng-deep *{box-shadow:none}.frm-container ::ng-deep .p-inputtext:focus,.frm-container ::ng-deep .p-inputtext:active,.frm-container ::ng-deep .p-inputwrapper:focus,.frm-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.frm-container ::ng-deep :not(:disabled):active,.frm-container ::ng-deep :not(.p-disabled) .p-inputtext:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper-focus,.frm-container ::ng-deep .p-radiobutton-box .p-highlight,.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover{border-color:var(--button-color)}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{background:var(--button-color);border-color:var(--button-color)!important}@media screen and (max-width:765px){:not(.col-12) .label{height:fit-content}.field{margin-bottom:.5rem}.pdf>iframe{width:100%;margin-inline:0}sf-sign{width:100%}sf-sign pdf-viewer{min-height:60vh!important;max-height:120vh!important}sf-simulador{display:block;width:100%;margin-inline:auto}.data-ado-container{text-align:center}.data-ado-container .buttons{max-width:80vw;flex-direction:row}.buttons{flex-direction:column;align-items:center}}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box .p-radiobutton-icon{background-color:#fff}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-range{background-color:var(--primary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}\n"], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6.Fluid, selector: "p-fluid" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i10.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: ControlComponent, selector: "sf-control", inputs: ["showTempValue", "control", "label", "value", "appendTo"], outputs: ["setValue", "sendObject", "addressClicked", "setDependencyValue"] }, { kind: "ngmodule", type: SfPdfsignModule }, { kind: "component", type: i6$1.SignComponent, selector: "sf-sign", inputs: ["idkatios", "tdoc", "ndoc", "idDocument", "typeDocument", "allowDownload"], outputs: ["stateDocument", "loading"] }, { kind: "ngmodule", type: SfSimuladorModule }, { kind: "component", type: i7$1.SfSimuladorComponent, selector: "sf-simulador", inputs: ["simulador", "otherToolTips", "labels"], outputs: ["simuladorChange", "enProceso"] }] });
|
|
2519
2523
|
}
|
|
2520
2524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormComponent, decorators: [{
|
|
2521
2525
|
type: Component,
|
|
2522
|
-
args: [{ selector: 'app-form', imports: [Tooltip, CommonModule, FormsModule, FluidModule, ButtonModule, TableModule, ControlComponent, SfPdfsignModule, SfSimuladorModule], standalone: true, template: "<div *ngIf=\"controlsLoaded\" class=\"frm-container\">\r\n <ng-container *ngIf=\"isAddressDialog && currentAddress\">\r\n Direcci\u00F3n actual: {{currentAddress | formatAddress: separador}}\r\n <br>\r\n </ng-container>\r\n <br>\r\n <ng-container *ngIf=\"isAddressDialog\">\r\n Direcci\u00F3n nueva: {{newAddress | formatAddress: separador}}\r\n </ng-container>\r\n <p-fluid>\r\n <div *ngFor=\"let element of uiEsquema.elements; let i = index\" [class]=\"element?.class\" #a>\r\n <ng-container [ngSwitch]=\"element.type\" *ngIf=\"visible[i][0]\">\r\n <div class=\"label\" *ngSwitchCase=\"'Label'\" [style]=\"element?.style\">\r\n {{element?.label}}\r\n </div>\r\n <ng-container *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'Texto'\" [ngStyle]=\"{'height': '100%', 'margin-block': 'auto'}\">\r\n <p>{{el.label}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'VerticalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'PDF'\" class=\"pdf\">\r\n <iframe [src]=\"values[i][j]\" frameborder=\"0\" allow=\"geolocation *; camera *;\"></iframe>\r\n </div>\r\n <div *ngSwitchCase=\"'PDF-SIGN'\">\r\n <sf-sign [allowDownload]=\"true\" [idkatios]=\"idKatios\" [tdoc]=\"data.pdf.tdoc\" [ndoc]=\"data.pdf.ndoc\"\r\n [idDocument]=\"data.pdf.id\" [typeDocument]=\"data.pdf.idDoc\"\r\n (stateDocument)=\"onStateDocument($event)\"></sf-sign>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'SIMULADOR'\">\r\n <sf-simulador [simulador]=\"data\" [otherToolTips]=\"data.otherTooltips\"\r\n (simuladorChange)=\"onSimuladorChange($event)\" (enProceso)=\"emitLoadingForm($event)\"></sf-simulador>\r\n </ng-container>\r\n <div *ngSwitchCase=\"'ADO'\" class=\"buttons\">\r\n <p-button *ngIf=\"!data?.ADO?.dataProceso?.idProceso\" [ngStyle]=\"el?.ngStyle\" (click)=\"goToADO()\" label=\"Validar identidad\"></p-button>\r\n </div>\r\n <div *ngSwitchCase=\"'ADO'\">\r\n <div *ngIf=\"data?.ADO?.dataProceso?.idProceso\">\r\n <div class=\"data-ado-container\">\r\n <ng-container *ngIf=\"proceso\">\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === true\" pTooltip=\"Validado\" tooltipPosition=\"top\" id=\"Validado\" class=\"pi pi-user\" style=\"color: green\"\r\n (touchstart)=\"onTouchDescription('Validado', false)\" (touchend)=\"onUnTouchDescription('Validado')\"></i>\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === false\" pTooltip=\"No validado\" tooltipPosition=\"top\" id=\"No-Validado\" class=\"pi pi-user\" style=\"color: red\"\r\n (touchstart)=\"onTouchDescription('No-Validado', false)\" (touchend)=\"onUnTouchDescription('No-Validado')\"></i>\r\n <i *ngIf=\"!proceso?.respuestaProceso\" pTooltip=\"Sin validar\" tooltipPosition=\"top\" class=\"pi pi-user\" id=\"Sin-Validar\" style=\"color: gray\"\r\n (touchstart)=\"onTouchDescription('Sin-Validar', false)\" (touchend)=\"onUnTouchDescription('Sin-Validar')\"></i>\r\n </ng-container>\r\n <div class=\"buttons\">\r\n <button pButton icon=\"pi pi-external-link\" (click)=\"goToADO()\" pTooltip=\"Abrir\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-copy\" (click)=\"copyToClipboard(proceso.id)\" pTooltip=\"Copiar\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-refresh\" (click)=\"refreshIntegracion(proceso.id)\" pTooltip=\"Refrescar\" [disabled]=\"!proceso\"></button>\r\n </div>\r\n </div>\r\n <p class=\"result-ado\" *ngIf=\"proceso && !proceso.respuestaProceso && proceso.estado == 'PROCESANDO'\">Procesando</p>\r\n <p class=\"result-ado\" *ngIf=\"proceso && proceso.respuestaProceso && proceso.estado == 'TERMINADO'\">{{proceso.respuestaProceso.Detalle ?? proceso.respuestaProceso.Mensaje}}</p>\r\n </div>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'Table'\">\r\n <p-table [value]=\"values[i][j]\" [columns]=\"controls[i][j].config.columns\">\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n <button pButton pRipple icon=\"pi pi-plus\" (click)=\"addObjectArray(el)\"\r\n class=\"p-button-success\" [disabled]=\"controls[i][j].disabled === true\"></button>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\">\r\n {{col.label}}\r\n </th>\r\n <ng-container>\r\n <th></th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n <tr>\r\n <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n <ng-container *ngSwitchCase=\"'control'\">\r\n <sf-control [control]=\"extracControlFromTableElements(i, j, col)\" [label]=\"\"\r\n [value]=\"extracValueFromTableElements(i, j, rowIndex, col)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (setValue)=\"setValue($event, extracValueFromTableElements(i, j, rowIndex, col).scope, i, j)\"\r\n [showTempValue]=\"true\"\r\n >\r\n </sf-control>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <td>{{rowData[col.col]}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <td>{{rowData[col.col] | formatAddress: extracControlFromTableElements(i, j, col).separador }}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'currency:USD'\">\r\n <td>{{rowData[col.col] | currency: 'USD'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:yyyy-mm-dd'\">\r\n <td>{{rowData[col.col] | date: 'yyyy-mm-dd'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:dd/mm/yyyy'\">\r\n <td>{{rowData[col.col] | date: 'dd/MM/yyyy'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <td>\r\n <i *ngIf=\"rowData[col.col]\" class=\"pi pi-check\"></i>\r\n <i *ngIf=\"!rowData[col.col]\" class=\"pi pi-times\"></i>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container>\r\n <td>\r\n <button pButton pRipple type=\"button\"\r\n (click)=\"editRow(el, rowData, rowIndex)\" icon=\"pi pi-pencil\"\r\n class=\"p-button-rounded p-button-info mr-1\"></button>\r\n <button pButton pRipple type=\"button\" (click)=\"deleteRow(el, rowIndex)\" [disabled]=\"controls[i][j].disabled === true\"\r\n icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"></button>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'ArrayLayout'\">\r\n <div *ngFor=\"let arrayItem of getArrayItems(element.scope); let arrayIndex = index\" [ngClass]=\"element.classElements || 'flex align-items-center w-full'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"getControl(el,arrayIndex)\" [label]=\"el.label\"\r\n [value]=\"values[i][j] || getValueFromData(element,el,arrayIndex)\" (setValue)=\"setValue($event, el.scope, i, j,arrayIndex)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"\r\n (setDependencyValue)=\"setDependencyValue($event, i, j, arrayIndex)\"></sf-control>\r\n </ng-container>\r\n </div>\r\n <p-button *ngIf=\"element.deleteButton && !(element.deleteButton.hide?.index === arrayIndex)\" [icon]=\"element.deleteButton.icon\" [rounded]=\"element.deleteButton.rounded || false\" [text]=\"element.deleteButton.text || true\" [severity]=\"element.deleteButton.severity || 'danger'\" (click)=\"removeArrayItem(element, i, arrayIndex)\" \r\n [label]=\"element.deleteButton.label\" />\r\n </div>\r\n <div class=\"col-12\">\r\n <div *ngIf=\"element.addButton\" class=\"flex items-center justify-content-between mb-2\">\r\n <p-button [icon]=\"element.addButton.icon\" [label]=\"element.addButton.label\" (click)=\"addArrayItem(element, i)\" [severity]=\"element.addButton.severity || 'primary'\"/>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </p-fluid>\r\n</div>\r\n\r\n<!-- <p-toast *ngIf=\"isDialog\"></p-toast> -->\r\n", styles: [":not(.col-12) .label{display:flex;justify-content:center;align-items:center;padding-inline:.5rem;margin-bottom:15px;margin-top:20px;border-radius:13px;font-size:18px;font-size:inherit;background-color:var(--primary-color);text-align:center;color:var(--normal-text-color)}.pdf{display:flex;width:100%;height:80vh;& iframe{width:80%;margin-inline:10%}}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content;>*{margin-inline:4px}>div{display:flex;align-items:center;>*{margin-inline:4px}}}i.pi-user{font-size:2rem}.result-ado{min-height:1rem;text-align:center}sf-simulador{display:flow-root;width:80%;margin-inline:auto;margin-bottom:35px}sf-sign{display:block;margin-inline:auto;width:80%;& pdf-viewer{min-height:130vh!important;max-height:130vh!important}}.buttons{display:flex;justify-content:space-evenly}::ng-deep *{box-shadow:none}.frm-container ::ng-deep .p-inputtext:focus,.frm-container ::ng-deep .p-inputtext:active,.frm-container ::ng-deep .p-inputwrapper:focus,.frm-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.frm-container ::ng-deep :not(:disabled):active,.frm-container ::ng-deep :not(.p-disabled) .p-inputtext:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper-focus,.frm-container ::ng-deep .p-radiobutton-box .p-highlight,.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover{border-color:var(--button-color)}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{background:var(--button-color);border-color:var(--button-color)!important}@media screen and (max-width:765px){:not(.col-12) .label{height:fit-content}.field{margin-bottom:.5rem}.pdf>iframe{width:100%;margin-inline:0}sf-sign{width:100%;& pdf-viewer{min-height:60vh!important;max-height:120vh!important}}sf-simulador{display:block;width:100%;margin-inline:auto}.data-ado-container{text-align:center;.buttons{max-width:80vw;flex-direction:row}}.buttons{flex-direction:column;align-items:center}}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box .p-radiobutton-icon{background-color:#fff}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-range{background-color:var(--primary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}\n"] }]
|
|
2526
|
+
args: [{ selector: 'app-form', imports: [Tooltip, CommonModule, FormsModule, FluidModule, ButtonModule, TableModule, ControlComponent, SfPdfsignModule, SfSimuladorModule], standalone: true, template: "<div *ngIf=\"controlsLoaded\" class=\"frm-container\">\r\n <ng-container *ngIf=\"isAddressDialog && currentAddress\">\r\n Direcci\u00F3n actual: {{currentAddress | formatAddress: separador}}\r\n <br>\r\n </ng-container>\r\n <br>\r\n <ng-container *ngIf=\"isAddressDialog\">\r\n Direcci\u00F3n nueva: {{newAddress | formatAddress: separador}}\r\n </ng-container>\r\n <p-fluid>\r\n <div *ngFor=\"let element of uiEsquema.elements; let i = index\" [class]=\"element?.class\" #a>\r\n <ng-container [ngSwitch]=\"element.type\" *ngIf=\"visible[i][0]\">\r\n <div class=\"label\" *ngSwitchCase=\"'Label'\" [style]=\"element?.style\">\r\n {{element?.label}}\r\n </div>\r\n <ng-container *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'Texto'\" [ngStyle]=\"{'height': '100%', 'margin-block': 'auto'}\">\r\n <p>{{el.label}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'VerticalLayout'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"></sf-control>\r\n <div *ngSwitchCase=\"'PDF'\" class=\"pdf\">\r\n <iframe [src]=\"values[i][j]\" frameborder=\"0\" allow=\"geolocation *; camera *;\"></iframe>\r\n </div>\r\n <div *ngSwitchCase=\"'PDF-SIGN'\">\r\n <sf-sign [allowDownload]=\"true\" [idkatios]=\"idKatios\" [tdoc]=\"data.pdf.tdoc\" [ndoc]=\"data.pdf.ndoc\"\r\n [idDocument]=\"data.pdf.id\" [typeDocument]=\"data.pdf.idDoc\"\r\n (stateDocument)=\"onStateDocument($event)\"></sf-sign>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'SIMULADOR'\">\r\n <sf-simulador [simulador]=\"data\" [otherToolTips]=\"data.otherTooltips\"\r\n (simuladorChange)=\"onSimuladorChange($event)\" (enProceso)=\"emitLoadingForm($event)\"></sf-simulador>\r\n </ng-container>\r\n <div *ngSwitchCase=\"'ADO'\" class=\"buttons\">\r\n <p-button *ngIf=\"!data?.ADO?.dataProceso?.idProceso\" [ngStyle]=\"el?.ngStyle\" (click)=\"goToADO()\" label=\"Validar identidad\"></p-button>\r\n </div>\r\n <div *ngSwitchCase=\"'ADO'\">\r\n <div *ngIf=\"data?.ADO?.dataProceso?.idProceso\">\r\n <div class=\"data-ado-container\">\r\n <ng-container *ngIf=\"proceso\">\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === true\" pTooltip=\"Validado\" tooltipPosition=\"top\" id=\"Validado\" class=\"pi pi-user\" style=\"color: green\"\r\n (touchstart)=\"onTouchDescription('Validado', false)\" (touchend)=\"onUnTouchDescription('Validado')\"></i>\r\n <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === false\" pTooltip=\"No validado\" tooltipPosition=\"top\" id=\"No-Validado\" class=\"pi pi-user\" style=\"color: red\"\r\n (touchstart)=\"onTouchDescription('No-Validado', false)\" (touchend)=\"onUnTouchDescription('No-Validado')\"></i>\r\n <i *ngIf=\"!proceso?.respuestaProceso\" pTooltip=\"Sin validar\" tooltipPosition=\"top\" class=\"pi pi-user\" id=\"Sin-Validar\" style=\"color: gray\"\r\n (touchstart)=\"onTouchDescription('Sin-Validar', false)\" (touchend)=\"onUnTouchDescription('Sin-Validar')\"></i>\r\n </ng-container>\r\n <div class=\"buttons\">\r\n <button pButton icon=\"pi pi-external-link\" (click)=\"goToADO()\" pTooltip=\"Abrir\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-copy\" (click)=\"copyToClipboard(proceso.id)\" pTooltip=\"Copiar\" [disabled]=\"!proceso\"></button>\r\n <button pButton icon=\"pi pi-refresh\" (click)=\"refreshIntegracion(proceso.id)\" pTooltip=\"Refrescar\" [disabled]=\"!proceso\"></button>\r\n </div>\r\n </div>\r\n <p class=\"result-ado\" *ngIf=\"proceso && !proceso.respuestaProceso && proceso.estado == 'PROCESANDO'\">Procesando</p>\r\n <p class=\"result-ado\" *ngIf=\"proceso && proceso.respuestaProceso && proceso.estado == 'TERMINADO'\">{{proceso.respuestaProceso.Detalle ?? proceso.respuestaProceso.Mensaje}}</p>\r\n </div>\r\n </div>\r\n <ng-container *ngSwitchCase=\"'Table'\">\r\n <p-table [value]=\"values[i][j]\" [columns]=\"controls[i][j].config.columns\">\r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n <button pButton pRipple icon=\"pi pi-plus\" (click)=\"addObjectArray(el)\"\r\n class=\"p-button-success\" [disabled]=\"controls[i][j].disabled === true\"></button>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\">\r\n {{col.label}}\r\n </th>\r\n <ng-container>\r\n <th></th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n <tr>\r\n <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n <ng-container *ngSwitchCase=\"'control'\">\r\n <sf-control [control]=\"extracControlFromTableElements(i, j, col)\" [label]=\"\"\r\n [value]=\"extracValueFromTableElements(i, j, rowIndex, col)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (setValue)=\"setValue($event, extracValueFromTableElements(i, j, rowIndex, col).scope, i, j)\"\r\n [showTempValue]=\"true\"\r\n >\r\n </sf-control>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <td>{{rowData[col.col]}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'address'\">\r\n <td>{{rowData[col.col] | formatAddress: extracControlFromTableElements(i, j, col).separador }}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'currency:USD'\">\r\n <td>{{rowData[col.col] | currency: 'USD'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:yyyy-mm-dd'\">\r\n <td>{{rowData[col.col] | date: 'yyyy-mm-dd'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date:dd/mm/yyyy'\">\r\n <td>{{rowData[col.col] | date: 'dd/MM/yyyy'}}</td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <td>\r\n <i *ngIf=\"rowData[col.col]\" class=\"pi pi-check\"></i>\r\n <i *ngIf=\"!rowData[col.col]\" class=\"pi pi-times\"></i>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container>\r\n <td>\r\n <button pButton pRipple type=\"button\"\r\n (click)=\"editRow(el, rowData, rowIndex)\" icon=\"pi pi-pencil\"\r\n class=\"p-button-rounded p-button-info mr-1\"></button>\r\n <button pButton pRipple type=\"button\" (click)=\"deleteRow(el, rowIndex)\" [disabled]=\"controls[i][j].disabled === true\"\r\n icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"></button>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'ArrayLayout'\">\r\n <div *ngFor=\"let arrayItem of getArrayItems(element.scope); let arrayIndex = index\" [ngClass]=\"element.classElements || 'flex align-items-center w-full'\">\r\n <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\">\r\n <ng-container [ngSwitch]=\"el.type\">\r\n <sf-control *ngSwitchCase=\"'Control'\" [control]=\"getControl(el,arrayIndex)\" [label]=\"el.label\"\r\n [value]=\"values[i][j] || getValueFromData(element,el,arrayIndex)\" (setValue)=\"setValue($event, el.scope, i, j,arrayIndex)\"\r\n (sendNotification)=\"sendNotification($event)\"\r\n (sendObject)=\"applyValuesFromObject($event)\"\r\n (addressClicked)=\"openPopUpDireccion(el.scope)\"\r\n (setDependencyValue)=\"setDependencyValue($event, i, j, arrayIndex)\"></sf-control>\r\n </ng-container>\r\n </div>\r\n <p-button *ngIf=\"element.deleteButton && !(element.deleteButton.hide?.index === arrayIndex)\" [icon]=\"element.deleteButton.icon\" [rounded]=\"element.deleteButton.rounded || false\" [text]=\"element.deleteButton.text || true\" [severity]=\"element.deleteButton.severity || 'danger'\" (click)=\"removeArrayItem(element, i, arrayIndex)\" \r\n [label]=\"element.deleteButton.label\" />\r\n </div>\r\n <div class=\"col-12\">\r\n <div *ngIf=\"element.addButton\" class=\"flex items-center justify-content-between mb-2\">\r\n <p-button [icon]=\"element.addButton.icon\" [label]=\"element.addButton.label\" (click)=\"addArrayItem(element, i)\" [severity]=\"element.addButton.severity || 'primary'\"/>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </p-fluid>\r\n</div>\r\n\r\n<!-- <p-toast *ngIf=\"isDialog\"></p-toast> -->\r\n", styles: [":not(.col-12) .label{display:flex;justify-content:center;align-items:center;padding-inline:.5rem;margin-bottom:15px;margin-top:20px;border-radius:13px;font-size:18px;font-size:inherit;background-color:var(--primary-color);text-align:center;color:var(--normal-text-color)}.pdf{display:flex;width:100%;height:80vh}.pdf iframe{width:80%;margin-inline:10%}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content}.data-ado-container>*{margin-inline:4px}.data-ado-container>div{display:flex;align-items:center}.data-ado-container>div>*{margin-inline:4px}i.pi-user{font-size:2rem}.result-ado{min-height:1rem;text-align:center}sf-simulador{display:flow-root;width:80%;margin-inline:auto;margin-bottom:35px}sf-sign{display:block;margin-inline:auto;width:80%}sf-sign pdf-viewer{min-height:130vh!important;max-height:130vh!important}.buttons{display:flex;justify-content:space-evenly}::ng-deep *{box-shadow:none}.frm-container ::ng-deep .p-inputtext:focus,.frm-container ::ng-deep .p-inputtext:active,.frm-container ::ng-deep .p-inputwrapper:focus,.frm-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.frm-container ::ng-deep :not(:disabled):active,.frm-container ::ng-deep :not(.p-disabled) .p-inputtext:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper-focus,.frm-container ::ng-deep .p-radiobutton-box .p-highlight,.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover{border-color:var(--button-color)}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{background:var(--button-color);border-color:var(--button-color)!important}@media screen and (max-width:765px){:not(.col-12) .label{height:fit-content}.field{margin-bottom:.5rem}.pdf>iframe{width:100%;margin-inline:0}sf-sign{width:100%}sf-sign pdf-viewer{min-height:60vh!important;max-height:120vh!important}sf-simulador{display:block;width:100%;margin-inline:auto}.data-ado-container{text-align:center}.data-ado-container .buttons{max-width:80vw;flex-direction:row}.buttons{flex-direction:column;align-items:center}}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box .p-radiobutton-icon{background-color:#fff}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-range{background-color:var(--primary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}\n"] }]
|
|
2523
2527
|
}], ctorParameters: () => [{ type: SfCrudService }, { type: i2$1.DomSanitizer }, { type: StepService }, { type: i4.AdoService }, { type: i4.JWTService }], propDecorators: { color: [{
|
|
2524
2528
|
type: HostBinding,
|
|
2525
2529
|
args: ["style.--primary-color"]
|