ln-20-lib-components 0.0.40 → 0.0.42

package/fesm2022/{ln-20-lib-components-ln-20-lib-components-B5izPne0.mjs → ln-20-lib-components-ln-20-lib-components-B_OhDfJy.mjs}

@@ -135,6 +135,9 @@ class CustomInputComponent {
     output = output();
     onChange = (_value) => { };
     constructor() { }
+    control = computed(() => this.controlData().control);
+    controlValue = computed(() => this.control().value);
+    hasControlValue = computed(() => this.controlValue() !== null && this.controlValue() !== undefined);
     writeValue(value) {
         if (value !== this.controlData().control.value) {
             this.controlData().control.setValue(value, { emitEvent: false });
@@ -164,13 +167,6 @@ class CustomInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    // setDisabledState(isDisabled: boolean): void {
-    //   if (isDisabled) {
-    //     this.controlData().control.disable()
-    //   } else {
-    //     this.controlData().control.enable()
-    //   }
-    // }
     generateUniqueId(baseString) {
         const timestamp = new Date().getTime();
         const random = Math.random().toString(36).substring(2, 8);
@@ -277,7 +273,7 @@ class CustomInputComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CustomInputComponent),
                 multi: true
-            }], ngImport: i0, template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.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: CheckboxModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.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: SelectModule }, { kind: "component", type: i4.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: ToggleButtonModule }, { kind: "component", type: i5.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.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: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: DisabledContainerComponent, selector: "lib-disabled-container", inputs: ["disabled"], outputs: ["disabledChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], ngImport: i0, template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && !hasControlValue()) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.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: CheckboxModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.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: SelectModule }, { kind: "component", type: i4.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: ToggleButtonModule }, { kind: "component", type: i5.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.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: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: DisabledContainerComponent, selector: "lib-disabled-container", inputs: ["disabled"], outputs: ["disabledChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, decorators: [{
             type: Component,
@@ -300,7 +296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CustomInputComponent),
                             multi: true
-                        }], template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"] }]
+                        }], template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && !hasControlValue()) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"] }]
         }], ctorParameters: () => [] });
 
 class FormChildComponent {
@@ -2202,6 +2198,11 @@ class TableNgEditService {
         return controls;
     });
     searchFormGroup = signal(new FormGroup({}));
+    _cellTableNgData = signal(undefined);
+    cellTableNgData = this._cellTableNgData.asReadonly();
+    setCellTableNgData(cellTableNgData) {
+        this._cellTableNgData.set(cellTableNgData);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, providedIn: 'root' });
 }
@@ -2440,7 +2441,7 @@ class TableNgService {
     //#endregion
     //#region Selection
     async openModalManagementSelectedItems(selectedItems, config) {
-        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-CHuW-NSi.mjs');
+        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-95e_4wqx.mjs');
         let configSelectedItems = config;
         if (config) {
             configSelectedItems = structuredClone(config);
@@ -2559,6 +2560,7 @@ class TableNgComponent {
     tableNgEditService = inject(TableNgEditService);
     dialogService = inject(CustomDialogService);
     data = model.required();
+    totalRows = computed(() => this.data().length);
     // Loading state management
     loadingTimeout = null;
     isLoading = signal(false);
@@ -2649,6 +2651,10 @@ class TableNgComponent {
     }
     ngOnInit() {
         this.tableNgService.setInitialValue([...this.data()]);
+        const cellTableNgData = this.editConfig()?.cellEditConfig?.defaultTableNgData;
+        if (cellTableNgData) {
+            this.tableNgEditService.setCellTableNgData(cellTableNgData);
+        }
     }
     ngOnDestroy() {
         // Limpiar el timeout al destruir el componente
@@ -3021,14 +3027,21 @@ class TableNgComponent {
     });
     addRow() {
         const editConfig = this.editConfig();
+        const templateRow = this.tableNgEditService.cellTableNgData();
         // Si es modo cell y hay defaultTableNgData configurado, agregar la fila directamente
-        if (editConfig?.type === 'cell' && editConfig?.cellEditConfig?.defaultTableNgData) {
-            const newRow = this.editConfig()?.cellEditConfig?.defaultTableNgData;
-            if (newRow) {
-                this.data.update(currentData => [...currentData, newRow]);
-                this.outputChangeData.emit(this.data());
-                return;
-            }
+        if (editConfig?.type === 'cell' && templateRow) {
+            const id = `${(this.totalRows() + 1).toString()}-${generateId()}`;
+            const rowDataId = `${id}-${generateId()}`;
+            // templateRow es siempre la misma referencia (defaultTableNgData): hay que clonar para que
+            // cada fila nueva sea independiente y no comparta el mismo objeto con las demás.
+            const newRow = {
+                ...templateRow,
+                id,
+                rowData: { ...structuredClone(templateRow.rowData), id: rowDataId }
+            };
+            this.data.update(currentData => [...currentData, newRow]);
+            this.outputChangeData.emit(this.data());
+            return;
         }
         // Comportamiento original para modo row o cuando no hay defaultTableNgData
         this.outputAddRow.emit(this.data());
@@ -3555,4 +3568,4 @@ de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
  */
 
 export { AminatedContainerComponent as A, BaseDialogComponent as B, DisabledContainerComponent as D, ETypeInput as E, FormComponent as F, HttpMessageComponent as H, InlineInputComponent as I, LibComponentsService as L, SpeedDialComponent as S, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b, SpeedDialService as c, SpeedDialNgComponent as d };
-//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-B5izPne0.mjs.map
+//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-B_OhDfJy.mjs.map