sf-crud 13.2.45 → 13.2.46

package/fesm2022/sf-crud.mjs

@@ -1892,6 +1892,7 @@ class Shema {
     eraseOnDisable;
     dependency;
     step;
+    sendFormatDate;
 }
 class ShemaConfig {
     calendar;
@@ -2369,7 +2370,14 @@ class ControlComponent {
     sendValue() {
         if (this.control.type == "string" && this.value == "" && this.control.config?.allowEmpty == false)
             this.value = null;
+        if (this.control.type == "date" && this.control.formatMoment && this.control.sendFormatDate) {
+            const valueToFormat = this.value ? moment(this.value).format(this.control.formatMoment) : null;
+            this.setValue.emit(valueToFormat);
+            this.sendDependencyValue(valueToFormat);
+            return;
+        }
         this.setValue.emit(this.value);
+        this.sendDependencyValue(this.value);
     }
     onDropdownChange(event) {
         this.sendValue();
@@ -2433,6 +2441,7 @@ class ControlComponent {
                         optionValue: this.control.config.optionValueExtra
                     });
                 }
+                this.sendDependencyValue(event.value ? event.value : event);
                 break;
         }
     }
@@ -2653,14 +2662,30 @@ class ControlComponent {
             return item[expr] !== undefined ? item[expr] : '';
         });
     }
+    sendDependencyValue(data) {
+        if (this.control.dependency && this.setDependencyValue) {
+            if (typeof (data) !== "object") {
+                this.setDependencyValue.emit({ data: data, scope: this.control.dependency.scope });
+            }
+            else if (typeof (this.control.dependency) === "object") {
+                this.setDependencyValue.emit({ data: data[this.control.dependency.value], scope: this.control.dependency.scope });
+            }
+            else if (Array.isArray(this.control.dependency)) {
+                const array = this.control.dependency;
+                array.forEach((d) => {
+                    this.setDependencyValue.emit({ data: data[d.value], scope: d.scope });
+                });
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ControlComponent, deps: [{ token: GeneralService }, { token: SfCrudService }, { token: i0.ChangeDetectorRef }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ControlComponent, isStandalone: true, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo", showCssClass: "showCssClass", environment: "environment", context: "context", disabled: "disabled" }, 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\">\r\n    <p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p>\r\n</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    [class.show]=\"showCssClass\">\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 || disabled\" [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 || disabled\">\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 || disabled\" 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 || disabled\" 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\"\r\n                    [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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"onDropdownChange($event)\"\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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" (onChange)=\"sendValueFromObject($event)\"\r\n                    [optionLabel]=\"control.config.optionLabel\" appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 || disabled\" (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)\" [minLength]=\"1\"\r\n                    (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || disabled\" [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\" [referenceImage]=\"control.config?.previewImage\" (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 || disabled\"></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 || disabled\"\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 [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\"\r\n                    yearRange=\"1900:2035\" [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\"\r\n                    [disabled]=\"control.disabled || disabled\" [showOnFocus]=\"control.hide\"\r\n                    [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\" [showIcon]=\"control.showIcon || false\"\r\n                    (onSelect)=\"onChangeDate()\" (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\"\r\n                    class=\"p-0\"></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\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\" [prefix]=\"control.currency || '$ '\"\r\n                    [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal'\">\r\n                <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percentage'\">\r\n                <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    (onInput)=\"sendValue()\" [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 2\" [locale]=\"control.locale || undefined\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 *ngSwitchCase=\"'incremental'\">\r\n                <p-inputnumber [(ngModel)]=\"value\" [showButtons]=\"true\" buttonLayout=\"horizontal\" inputId=\"horizontal\"\r\n                    spinnerMode=\"horizontal\" [step]=\"control.step || 1\" [mode]=\"control.mode || 'currency'\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"\r\n                    (ngModelChange)=\"value = $event; sendValue()\">\r\n                    <ng-template #incrementbuttonicon>\r\n                        <span class=\"pi pi-plus\"></span>\r\n                    </ng-template>\r\n                    <ng-template #decrementbuttonicon>\r\n                        <span class=\"pi pi-minus\"></span>\r\n                    </ng-template>\r\n                </p-inputnumber>\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\" [referenceImage]=\"control.config?.previewImage\"\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\"\r\n                    (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'group'\">\r\n                <p-selectbutton [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" \r\n                    [disabled]=\"control.disabled || disabled\" [optionLabel]=\"control.config.optionLabel\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\"></p-selectbutton>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", 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.show ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container.show ::ng-deep .p-component,.control-container.show ::ng-deep .p-component *{border-radius:6px}.control-container.show ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container.show ::ng-deep .p-inputtext:focus,.control-container.show ::ng-deep .p-inputtext:active,.control-container.show ::ng-deep .p-inputwrapper:focus,.control-container.show ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container.show ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container.show ::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.show ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container.show ::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.show ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container.show ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container.show ::ng-deep .p-button.p-button-danger,.control-container.show ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container.show ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container.show ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container.show ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container.show ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container.show ::ng-deep .p-datepicker{padding:0}.control-container.show ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container.show ::ng-deep .p-datepicker-month,.control-container.show ::ng-deep .p-datepicker-month:focus,.control-container.show ::ng-deep .p-datepicker-year:focus,.control-container.show ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.show .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$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i7$1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i8$1.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i8.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: i9.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", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i12$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: i7.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", "referenceImage"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i14.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: i15.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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: i16.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: i17.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: i18.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i19.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ControlComponent, isStandalone: true, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo", showCssClass: "showCssClass", environment: "environment", context: "context", disabled: "disabled" }, 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\">\r\n    <p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p>\r\n</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    [class.show]=\"showCssClass\">\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 || disabled\" [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 || disabled\">\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 || disabled\" 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 || disabled\" 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\"\r\n                    [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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"onDropdownChange($event)\"\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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" (onChange)=\"sendValueFromObject($event)\"\r\n                    [optionLabel]=\"control.config.optionLabel\" appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 || disabled\" (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)\" [minLength]=\"1\"\r\n                    (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || disabled\" [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\" [referenceImage]=\"control.config?.previewImage\" (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 || disabled\"></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 || disabled\"\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 [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\"\r\n                    yearRange=\"1900:2035\" [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\"\r\n                    [disabled]=\"control.disabled || disabled\" [showOnFocus]=\"control.showOnFocus || control.hide || false\"\r\n                    [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\" [showIcon]=\"control.showIcon || false\"\r\n                    (onSelect)=\"onChangeDate()\" (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\"\r\n                    class=\"p-0\"></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\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\" [prefix]=\"control.currency || '$ '\"\r\n                    [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal'\">\r\n                <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percentage'\">\r\n                <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    (onInput)=\"sendValue()\" [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 2\" [locale]=\"control.locale || undefined\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 *ngSwitchCase=\"'incremental'\">\r\n                <p-inputnumber [(ngModel)]=\"value\" [showButtons]=\"true\" buttonLayout=\"horizontal\" inputId=\"horizontal\"\r\n                    spinnerMode=\"horizontal\" [step]=\"control.step || 1\" [mode]=\"control.mode || 'currency'\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"\r\n                    (ngModelChange)=\"value = $event; sendValue()\">\r\n                    <ng-template #incrementbuttonicon>\r\n                        <span class=\"pi pi-plus\"></span>\r\n                    </ng-template>\r\n                    <ng-template #decrementbuttonicon>\r\n                        <span class=\"pi pi-minus\"></span>\r\n                    </ng-template>\r\n                </p-inputnumber>\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\" [referenceImage]=\"control.config?.previewImage\"\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\"\r\n                    (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'group'\">\r\n                <p-selectbutton [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" \r\n                    [disabled]=\"control.disabled || disabled\" [optionLabel]=\"control.config.optionLabel\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\"></p-selectbutton>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", 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.show ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container.show ::ng-deep .p-component,.control-container.show ::ng-deep .p-component *{border-radius:6px}.control-container.show ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container.show ::ng-deep .p-inputtext:focus,.control-container.show ::ng-deep .p-inputtext:active,.control-container.show ::ng-deep .p-inputwrapper:focus,.control-container.show ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container.show ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container.show ::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.show ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container.show ::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.show ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container.show ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container.show ::ng-deep .p-button.p-button-danger,.control-container.show ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container.show ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container.show ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container.show ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container.show ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container.show ::ng-deep .p-datepicker{padding:0}.control-container.show ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container.show ::ng-deep .p-datepicker-month,.control-container.show ::ng-deep .p-datepicker-month:focus,.control-container.show ::ng-deep .p-datepicker-year:focus,.control-container.show ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.show .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$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i7$1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i8$1.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i8.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: i9.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", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i12$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: i7.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", "referenceImage"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i14.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: i15.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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: i16.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: i17.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: i18.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i19.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sf-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule,
                         InputTextModule, TextareaModule, InputMaskModule, SelectModule, MultiSelectModule, AutoCompleteModule, ButtonModule, FileUploadComponent,
-                        DatePickerModule, InputNumberModule, InputSwitchModule, CheckboxModule, InputGroupModule, InputGroupAddonModule, TooltipModule, SelectButton], standalone: true, template: "<ng-container *ngIf=\"showTempValue\">\r\n    <p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p>\r\n</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    [class.show]=\"showCssClass\">\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 || disabled\" [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 || disabled\">\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 || disabled\" 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 || disabled\" 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\"\r\n                    [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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"onDropdownChange($event)\"\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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" (onChange)=\"sendValueFromObject($event)\"\r\n                    [optionLabel]=\"control.config.optionLabel\" appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 || disabled\" (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)\" [minLength]=\"1\"\r\n                    (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || disabled\" [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\" [referenceImage]=\"control.config?.previewImage\" (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 || disabled\"></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 || disabled\"\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 [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\"\r\n                    yearRange=\"1900:2035\" [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\"\r\n                    [disabled]=\"control.disabled || disabled\" [showOnFocus]=\"control.hide\"\r\n                    [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\" [showIcon]=\"control.showIcon || false\"\r\n                    (onSelect)=\"onChangeDate()\" (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\"\r\n                    class=\"p-0\"></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\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\" [prefix]=\"control.currency || '$ '\"\r\n                    [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal'\">\r\n                <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percentage'\">\r\n                <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    (onInput)=\"sendValue()\" [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 2\" [locale]=\"control.locale || undefined\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 *ngSwitchCase=\"'incremental'\">\r\n                <p-inputnumber [(ngModel)]=\"value\" [showButtons]=\"true\" buttonLayout=\"horizontal\" inputId=\"horizontal\"\r\n                    spinnerMode=\"horizontal\" [step]=\"control.step || 1\" [mode]=\"control.mode || 'currency'\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"\r\n                    (ngModelChange)=\"value = $event; sendValue()\">\r\n                    <ng-template #incrementbuttonicon>\r\n                        <span class=\"pi pi-plus\"></span>\r\n                    </ng-template>\r\n                    <ng-template #decrementbuttonicon>\r\n                        <span class=\"pi pi-minus\"></span>\r\n                    </ng-template>\r\n                </p-inputnumber>\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\" [referenceImage]=\"control.config?.previewImage\"\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\"\r\n                    (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'group'\">\r\n                <p-selectbutton [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" \r\n                    [disabled]=\"control.disabled || disabled\" [optionLabel]=\"control.config.optionLabel\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\"></p-selectbutton>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", 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.show ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container.show ::ng-deep .p-component,.control-container.show ::ng-deep .p-component *{border-radius:6px}.control-container.show ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container.show ::ng-deep .p-inputtext:focus,.control-container.show ::ng-deep .p-inputtext:active,.control-container.show ::ng-deep .p-inputwrapper:focus,.control-container.show ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container.show ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container.show ::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.show ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container.show ::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.show ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container.show ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container.show ::ng-deep .p-button.p-button-danger,.control-container.show ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container.show ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container.show ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container.show ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container.show ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container.show ::ng-deep .p-datepicker{padding:0}.control-container.show ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container.show ::ng-deep .p-datepicker-month,.control-container.show ::ng-deep .p-datepicker-month:focus,.control-container.show ::ng-deep .p-datepicker-year:focus,.control-container.show ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.show .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"] }]
+                        DatePickerModule, InputNumberModule, InputSwitchModule, CheckboxModule, InputGroupModule, InputGroupAddonModule, TooltipModule, SelectButton], standalone: true, template: "<ng-container *ngIf=\"showTempValue\">\r\n    <p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p>\r\n</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    [class.show]=\"showCssClass\">\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 || disabled\" [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 || disabled\">\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 || disabled\" 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 || disabled\" 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\"\r\n                    [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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"onDropdownChange($event)\"\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 || disabled\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" (onChange)=\"sendValueFromObject($event)\"\r\n                    [optionLabel]=\"control.config.optionLabel\" appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 || disabled\" (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)\" [minLength]=\"1\"\r\n                    (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || disabled\" [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\" [referenceImage]=\"control.config?.previewImage\" (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 || disabled\"></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 || disabled\"\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 [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\"\r\n                    yearRange=\"1900:2035\" [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\"\r\n                    [disabled]=\"control.disabled || disabled\" [showOnFocus]=\"control.showOnFocus || control.hide || false\"\r\n                    [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\" [showIcon]=\"control.showIcon || false\"\r\n                    (onSelect)=\"onChangeDate()\" (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\"\r\n                    class=\"p-0\"></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\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\" [prefix]=\"control.currency || '$ '\"\r\n                    [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal'\">\r\n                <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percentage'\">\r\n                <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    (onInput)=\"sendValue()\" [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 2\" [locale]=\"control.locale || undefined\"\r\n                    [disabled]=\"control.disabled || disabled\"></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 *ngSwitchCase=\"'incremental'\">\r\n                <p-inputnumber [(ngModel)]=\"value\" [showButtons]=\"true\" buttonLayout=\"horizontal\" inputId=\"horizontal\"\r\n                    spinnerMode=\"horizontal\" [step]=\"control.step || 1\" [mode]=\"control.mode || 'currency'\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || disabled\"\r\n                    (ngModelChange)=\"value = $event; sendValue()\">\r\n                    <ng-template #incrementbuttonicon>\r\n                        <span class=\"pi pi-plus\"></span>\r\n                    </ng-template>\r\n                    <ng-template #decrementbuttonicon>\r\n                        <span class=\"pi pi-minus\"></span>\r\n                    </ng-template>\r\n                </p-inputnumber>\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\" [referenceImage]=\"control.config?.previewImage\"\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\"\r\n                    (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'group'\">\r\n                <p-selectbutton [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" \r\n                    [disabled]=\"control.disabled || disabled\" [optionLabel]=\"control.config.optionLabel\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\"></p-selectbutton>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", 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.show ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container.show ::ng-deep .p-component,.control-container.show ::ng-deep .p-component *{border-radius:6px}.control-container.show ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container.show ::ng-deep .p-inputtext:focus,.control-container.show ::ng-deep .p-inputtext:active,.control-container.show ::ng-deep .p-inputwrapper:focus,.control-container.show ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container.show ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container.show ::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.show ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container.show ::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.show ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container.show ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container.show ::ng-deep .p-button.p-button-danger,.control-container.show ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container.show ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container.show ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container.show ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container.show ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container.show ::ng-deep .p-datepicker{padding:0}.control-container.show ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container.show ::ng-deep .p-datepicker-month,.control-container.show ::ng-deep .p-datepicker-month:focus,.control-container.show ::ng-deep .p-datepicker-year:focus,.control-container.show ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.show .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"] }]
         }], ctorParameters: () => [{ type: GeneralService }, { type: SfCrudService }, { type: i0.ChangeDetectorRef }, { type: NotificationService }], propDecorators: { showTempValue: [{
                 type: Input
             }], control: [{