ln-20-lib-components 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ln-20-lib-components-selected-items-management.component-CH9UC-8E.mjs +86 -0
- package/fesm2022/ln-20-lib-components-selected-items-management.component-CH9UC-8E.mjs.map +1 -0
- package/fesm2022/ln-20-lib-components-selected-items-management.component-CrgtLkUn.mjs +86 -0
- package/fesm2022/ln-20-lib-components-selected-items-management.component-CrgtLkUn.mjs.map +1 -0
- package/fesm2022/ln-20-lib-components.mjs +26 -37
- package/fesm2022/ln-20-lib-components.mjs.map +1 -1
- package/lib/components/origin/disabled-container/disabled-container.component.d.ts +1 -1
- package/lib/components/origin/form/components/custom-input/custom-input.component.d.ts +1 -1
- package/lib/components/origin/form/components/form-child/form-child.component.d.ts +1 -1
- package/lib/components/origin/form/components/inline-input/inline-input.component.d.ts +1 -1
- package/lib/components/origin/form/form.component.d.ts +1 -1
- package/lib/components/origin/http-message/http-message.component.d.ts +1 -1
- package/lib/components/prime-ng/badge/badge-ng.component.d.ts +1 -1
- package/lib/components/prime-ng/button-ng/button-ng.component.d.ts +1 -1
- package/lib/components/prime-ng/table-ng/components/selected-items-management/selected-items-management.component.d.ts +1 -1
- package/lib/components/prime-ng/table-ng/table-ng.component.d.ts +2 -2
- package/lib/components/prime-ng/toolbar-ng/toolbar-ng.component.d.ts +1 -1
- package/ln-20-lib-components-0.0.12.tgz +0 -0
- package/ln-20-lib-components-0.0.13.tgz +0 -0
- package/package.json +1 -1
- package/lib/components/origin/aminated-container/aminated-container.component.d.ts +0 -6
|
@@ -117,11 +117,11 @@ var ETypeInput;
|
|
|
117
117
|
class DisabledContainerComponent {
|
|
118
118
|
disabled = model(false);
|
|
119
119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DisabledContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: DisabledContainerComponent, isStandalone: true, selector: "
|
|
120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: DisabledContainerComponent, isStandalone: true, selector: "lib-disabled-container", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, ngImport: i0, template: "<fieldset [disabled]=\"disabled()\" class=\"disabled-container\">\r\n <ng-content></ng-content>\r\n</fieldset>\r\n", styles: [".disabled-container{border:none;margin:0;padding:0;min-width:0}.disabled-container:disabled{opacity:.6;cursor:not-allowed}.disabled-container:disabled *{pointer-events:none}\n"] });
|
|
121
121
|
}
|
|
122
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DisabledContainerComponent, decorators: [{
|
|
123
123
|
type: Component,
|
|
124
|
-
args: [{ selector: '
|
|
124
|
+
args: [{ selector: 'lib-disabled-container', imports: [], template: "<fieldset [disabled]=\"disabled()\" class=\"disabled-container\">\r\n <ng-content></ng-content>\r\n</fieldset>\r\n", styles: [".disabled-container{border:none;margin:0;padding:0;min-width:0}.disabled-container:disabled{opacity:.6;cursor:not-allowed}.disabled-container:disabled *{pointer-events:none}\n"] }]
|
|
125
125
|
}] });
|
|
126
126
|
|
|
127
127
|
class CustomInputComponent {
|
|
@@ -173,15 +173,15 @@ class CustomInputComponent {
|
|
|
173
173
|
this.output.emit(this.controlData());
|
|
174
174
|
}
|
|
175
175
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CustomInputComponent, isStandalone: true, selector: "
|
|
176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CustomInputComponent, isStandalone: true, selector: "lib-custom-input", inputs: { controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { output: "output" }, providers: [{
|
|
177
177
|
provide: NG_VALUE_ACCESSOR,
|
|
178
178
|
useExisting: forwardRef(() => CustomInputComponent),
|
|
179
179
|
multi: true
|
|
180
|
-
}], 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<div class=\"flex flex-col gap-1 \">\r\n <app-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) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n 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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n }\r\n @case (inputTypesEnum.DATE) {\r\n <app-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 </app-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 @case (inputTypesEnum.PASSWORD) {\r\n <div class=\"relative\">\r\n <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\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 <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.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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [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 </app-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 ' + 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 ' + 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 .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 .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 .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 .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 .dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext,:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6}\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: "app-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 });
|
|
180
|
+
}], 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<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) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n 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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\" [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 @case (inputTypesEnum.PASSWORD) {\r\n <div class=\"relative\">\r\n <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\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 <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.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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [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 ' + 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 ' + 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 .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 .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 .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 .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 .dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext,:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6}\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 });
|
|
181
181
|
}
|
|
182
182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, decorators: [{
|
|
183
183
|
type: Component,
|
|
184
|
-
args: [{ selector: '
|
|
184
|
+
args: [{ selector: 'lib-custom-input', imports: [
|
|
185
185
|
ReactiveFormsModule,
|
|
186
186
|
IftaLabelModule,
|
|
187
187
|
NgClass,
|
|
@@ -200,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
200
200
|
provide: NG_VALUE_ACCESSOR,
|
|
201
201
|
useExisting: forwardRef(() => CustomInputComponent),
|
|
202
202
|
multi: true
|
|
203
|
-
}], 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<div class=\"flex flex-col gap-1 \">\r\n <app-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) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n 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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n }\r\n @case (inputTypesEnum.DATE) {\r\n <app-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 </app-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 @case (inputTypesEnum.PASSWORD) {\r\n <div class=\"relative\">\r\n <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\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 <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.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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [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 </app-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 ' + 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 ' + 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 .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 .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 .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 .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 .dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext,:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6}\n"] }]
|
|
203
|
+
}], 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<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) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n 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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\" [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 @case (inputTypesEnum.PASSWORD) {\r\n <div class=\"relative\">\r\n <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\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 <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.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 [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [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 ' + 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 ' + 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 .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 .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 .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 .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 .dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext,:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6}\n"] }]
|
|
204
204
|
}], ctorParameters: () => [] });
|
|
205
205
|
|
|
206
206
|
class FormChildComponent {
|
|
@@ -216,15 +216,15 @@ class FormChildComponent {
|
|
|
216
216
|
controlConfig.selectConfig?.change?.(controlConfig);
|
|
217
217
|
}
|
|
218
218
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormChildComponent, isStandalone: true, selector: "
|
|
219
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormChildComponent, isStandalone: true, selector: "lib-form-child", inputs: { controlsData: { classPropertyName: "controlsData", publicName: "controlsData", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "@let controls = controlsData();\r\n\r\n<form\r\n [formGroup]=\"formGroup()\"\r\n (submit)=\"submit()\"\r\n autocomplete=\"off\"\r\n class=\"grid grid-cols-12 gap-3\"\r\n>\r\n @for (controlData of controls; track controlData.controlName) {\r\n <div\r\n class=\"flex flex-col w-full\"\r\n [ngClass]=\"{\r\n 'col-span-1': !controlData.colSpan,\r\n 'col-span-2': controlData.colSpan === 2,\r\n 'col-span-3': controlData.colSpan === 3,\r\n 'col-span-4': controlData.colSpan === 4,\r\n 'col-span-5': controlData.colSpan === 5,\r\n 'col-span-6': controlData.colSpan === 6,\r\n 'col-span-7': controlData.colSpan === 7,\r\n 'col-span-8': controlData.colSpan === 8,\r\n 'col-span-9': controlData.colSpan === 9,\r\n 'col-span-10': controlData.colSpan === 10,\r\n 'col-span-11': controlData.colSpan === 11,\r\n 'col-span-12': controlData.colSpan === 12,\r\n }\"\r\n >\r\n <lib-custom-input\r\n [id]=\"controlData.controlName\"\r\n [controlData]=\"controlData\"\r\n [formControlName]=\"controlData.controlName\"\r\n class=\"w-full\"\r\n (output)=\"onSelectChange($event)\"\r\n >\r\n </lib-custom-input>\r\n </div>\r\n }\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CustomInputComponent, selector: "lib-custom-input", inputs: ["controlData"], outputs: ["output"] }] });
|
|
220
220
|
}
|
|
221
221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormChildComponent, decorators: [{
|
|
222
222
|
type: Component,
|
|
223
|
-
args: [{ selector: '
|
|
223
|
+
args: [{ selector: 'lib-form-child', imports: [
|
|
224
224
|
ReactiveFormsModule,
|
|
225
225
|
CommonModule,
|
|
226
226
|
CustomInputComponent
|
|
227
|
-
], template: "@let controls = controlsData();\r\n\r\n<form\r\n [formGroup]=\"formGroup()\"\r\n (submit)=\"submit()\"\r\n autocomplete=\"off\"\r\n class=\"grid grid-cols-12 gap-3\"\r\n>\r\n @for (controlData of controls; track controlData.controlName) {\r\n <div\r\n class=\"flex flex-col w-full\"\r\n [ngClass]=\"{\r\n 'col-span-1': !controlData.colSpan,\r\n 'col-span-2': controlData.colSpan === 2,\r\n 'col-span-3': controlData.colSpan === 3,\r\n 'col-span-4': controlData.colSpan === 4,\r\n 'col-span-5': controlData.colSpan === 5,\r\n 'col-span-6': controlData.colSpan === 6,\r\n 'col-span-7': controlData.colSpan === 7,\r\n 'col-span-8': controlData.colSpan === 8,\r\n 'col-span-9': controlData.colSpan === 9,\r\n 'col-span-10': controlData.colSpan === 10,\r\n 'col-span-11': controlData.colSpan === 11,\r\n 'col-span-12': controlData.colSpan === 12,\r\n }\"\r\n >\r\n <
|
|
227
|
+
], template: "@let controls = controlsData();\r\n\r\n<form\r\n [formGroup]=\"formGroup()\"\r\n (submit)=\"submit()\"\r\n autocomplete=\"off\"\r\n class=\"grid grid-cols-12 gap-3\"\r\n>\r\n @for (controlData of controls; track controlData.controlName) {\r\n <div\r\n class=\"flex flex-col w-full\"\r\n [ngClass]=\"{\r\n 'col-span-1': !controlData.colSpan,\r\n 'col-span-2': controlData.colSpan === 2,\r\n 'col-span-3': controlData.colSpan === 3,\r\n 'col-span-4': controlData.colSpan === 4,\r\n 'col-span-5': controlData.colSpan === 5,\r\n 'col-span-6': controlData.colSpan === 6,\r\n 'col-span-7': controlData.colSpan === 7,\r\n 'col-span-8': controlData.colSpan === 8,\r\n 'col-span-9': controlData.colSpan === 9,\r\n 'col-span-10': controlData.colSpan === 10,\r\n 'col-span-11': controlData.colSpan === 11,\r\n 'col-span-12': controlData.colSpan === 12,\r\n }\"\r\n >\r\n <lib-custom-input\r\n [id]=\"controlData.controlName\"\r\n [controlData]=\"controlData\"\r\n [formControlName]=\"controlData.controlName\"\r\n class=\"w-full\"\r\n (output)=\"onSelectChange($event)\"\r\n >\r\n </lib-custom-input>\r\n </div>\r\n }\r\n</form>\r\n" }]
|
|
228
228
|
}], ctorParameters: () => [] });
|
|
229
229
|
|
|
230
230
|
class HttpMessageComponent {
|
|
@@ -241,11 +241,11 @@ class HttpMessageComponent {
|
|
|
241
241
|
return message?.type === 'success';
|
|
242
242
|
}
|
|
243
243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HttpMessageComponent, isStandalone: true, selector: "
|
|
244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HttpMessageComponent, isStandalone: true, selector: "lib-http-message", inputs: { httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { httpMessage: "httpMessageChange" }, ngImport: i0, template: "@if (httpMessage()) {\r\n @if (isError) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n aria-label=\"Cerrar mensaje de error\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (isSuccess) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [""] });
|
|
245
245
|
}
|
|
246
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, decorators: [{
|
|
247
247
|
type: Component,
|
|
248
|
-
args: [{ selector: '
|
|
248
|
+
args: [{ selector: 'lib-http-message', imports: [], template: "@if (httpMessage()) {\r\n @if (isError) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n aria-label=\"Cerrar mensaje de error\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (isSuccess) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n}\r\n" }]
|
|
249
249
|
}] });
|
|
250
250
|
|
|
251
251
|
class FormComponent {
|
|
@@ -311,15 +311,15 @@ class FormComponent {
|
|
|
311
311
|
this.httpMessage.set(undefined);
|
|
312
312
|
}
|
|
313
313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormComponent, isStandalone: true, selector: "
|
|
314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormComponent, isStandalone: true, selector: "lib-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange", httpMessage: "httpMessageChange", formSubmit: "formSubmit", formChanges: "formChanges", formChangesDebounced: "formChangesDebounced" }, ngImport: i0, template: "<div class=\"w-full p-2 rounded-lg\" [style.backgroundColor]=\"formConfig()?.backgroundColor || 'transparent'\">\r\n <lib-form-child [controlsData]=\"controls()\" [formGroup]=\"formGroup()\" (formSubmit)=\"submit($event)\">\r\n </lib-form-child>\r\n @if (httpMessage()) {\r\n <lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormChildComponent, selector: "lib-form-child", inputs: ["controlsData", "formGroup"], outputs: ["formSubmit"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
315
315
|
}
|
|
316
316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, decorators: [{
|
|
317
317
|
type: Component,
|
|
318
|
-
args: [{ selector: '
|
|
318
|
+
args: [{ selector: 'lib-form', imports: [
|
|
319
319
|
ReactiveFormsModule,
|
|
320
320
|
FormChildComponent,
|
|
321
321
|
HttpMessageComponent
|
|
322
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full p-2 rounded-lg\" [style.backgroundColor]=\"formConfig()?.backgroundColor || 'transparent'\">\r\n <
|
|
322
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full p-2 rounded-lg\" [style.backgroundColor]=\"formConfig()?.backgroundColor || 'transparent'\">\r\n <lib-form-child [controlsData]=\"controls()\" [formGroup]=\"formGroup()\" (formSubmit)=\"submit($event)\">\r\n </lib-form-child>\r\n @if (httpMessage()) {\r\n <lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n }\r\n</div>" }]
|
|
323
323
|
}], ctorParameters: () => [] });
|
|
324
324
|
|
|
325
325
|
class InlineInputComponent {
|
|
@@ -626,7 +626,7 @@ class InlineInputComponent {
|
|
|
626
626
|
}
|
|
627
627
|
}
|
|
628
628
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
629
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InlineInputComponent, isStandalone: true, selector: "
|
|
629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InlineInputComponent, isStandalone: true, selector: "lib-inline-input", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outputValue: "outputValue", outputBlur: "outputBlur", outputDebounced: "outputDebounced" }, providers: [
|
|
630
630
|
{
|
|
631
631
|
provide: NG_VALUE_ACCESSOR,
|
|
632
632
|
useExisting: forwardRef(() => InlineInputComponent),
|
|
@@ -636,7 +636,7 @@ class InlineInputComponent {
|
|
|
636
636
|
}
|
|
637
637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, decorators: [{
|
|
638
638
|
type: Component,
|
|
639
|
-
args: [{ selector: '
|
|
639
|
+
args: [{ selector: 'lib-inline-input', standalone: true, imports: [
|
|
640
640
|
FormsModule,
|
|
641
641
|
InputTextModule,
|
|
642
642
|
DatePickerModule,
|
|
@@ -736,11 +736,11 @@ class ButtonNgComponent {
|
|
|
736
736
|
this.onClick.emit();
|
|
737
737
|
}
|
|
738
738
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
739
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonNgComponent, isStandalone: true, selector: "
|
|
739
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonNgComponent, isStandalone: true, selector: "lib-button-ng", inputs: { buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonConfig: "buttonConfigChange", onClick: "onClick" }, providers: [AppButtonNgService], ngImport: i0, template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n <div\r\n [ngClass]=\"{\r\n 'full-width-button': config.fullWidth,\r\n 'full-height-button': config.fullHeight,\r\n 'cursor-pointer': this.onClick\r\n }\"\r\n [class]=\"config.class ?? ''\"\r\n >\r\n <p-button\r\n [label]=\"config.hasTemplate ? undefined : label\"\r\n [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n [loading]=\"config.loading || false\"\r\n [disabled]=\"config.disabled || false\"\r\n [rounded]=\"config.rounded || false\"\r\n [raised]=\"config.raised || false\"\r\n [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n [badge]=\"config.badge\"\r\n (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n [size]=\"config?.size\"\r\n pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n [iconPos]=\"config?.iconPos ?? 'left'\"\r\n [ngClass]=\"{\r\n 'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n 'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n 'no-hover-template': config.hasTemplate\r\n }\"\r\n [outlined]=\"config.outlined || false\"\r\n [text]=\"config.text || false\"\r\n >\r\n @if (config.hasTemplate) {\r\n <ng-content></ng-content>\r\n }\r\n </p-button>\r\n </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "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"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
740
740
|
}
|
|
741
741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, decorators: [{
|
|
742
742
|
type: Component,
|
|
743
|
-
args: [{ selector: '
|
|
743
|
+
args: [{ selector: 'lib-button-ng', imports: [
|
|
744
744
|
ButtonModule,
|
|
745
745
|
TooltipModule,
|
|
746
746
|
CommonModule
|
|
@@ -1219,16 +1219,6 @@ class PrimeNgUtil {
|
|
|
1219
1219
|
}
|
|
1220
1220
|
}
|
|
1221
1221
|
|
|
1222
|
-
class AminatedContainerComponent {
|
|
1223
|
-
isLoading = true;
|
|
1224
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AminatedContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AminatedContainerComponent, isStandalone: true, selector: "app-aminated-container", ngImport: i0, template: "<div class=\"fade-in-container\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-container{animation:fadeIn .8s ease-out forwards;opacity:0;transform:translateY(10px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1226
|
-
}
|
|
1227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AminatedContainerComponent, decorators: [{
|
|
1228
|
-
type: Component,
|
|
1229
|
-
args: [{ selector: 'app-aminated-container', imports: [CommonModule], template: "<div class=\"fade-in-container\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-container{animation:fadeIn .8s ease-out forwards;opacity:0;transform:translateY(10px)}\n"] }]
|
|
1230
|
-
}] });
|
|
1231
|
-
|
|
1232
1222
|
class BadgeNgComponent {
|
|
1233
1223
|
config = model.required();
|
|
1234
1224
|
get value() {
|
|
@@ -1244,20 +1234,20 @@ class BadgeNgComponent {
|
|
|
1244
1234
|
return this.config().fullWidth ?? true;
|
|
1245
1235
|
}
|
|
1246
1236
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: BadgeNgComponent, isStandalone: true, selector: "
|
|
1237
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: BadgeNgComponent, isStandalone: true, selector: "lib-badge-ng", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0, template: "<p-badge\r\n [style]=\"{\r\n textAlign: 'center',\r\n width: fullWidth ? '100%' : 'auto'\r\n }\"\r\n [value]=\"value\"\r\n [severity]=\"severity\"\r\n [badgeSize]=\"badgeSize\"\r\n/>\r\n", dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
|
|
1248
1238
|
}
|
|
1249
1239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeNgComponent, decorators: [{
|
|
1250
1240
|
type: Component,
|
|
1251
|
-
args: [{ selector: '
|
|
1241
|
+
args: [{ selector: 'lib-badge-ng', imports: [BadgeModule], template: "<p-badge\r\n [style]=\"{\r\n textAlign: 'center',\r\n width: fullWidth ? '100%' : 'auto'\r\n }\"\r\n [value]=\"value\"\r\n [severity]=\"severity\"\r\n [badgeSize]=\"badgeSize\"\r\n/>\r\n" }]
|
|
1252
1242
|
}] });
|
|
1253
1243
|
|
|
1254
1244
|
class ToolbarNgComponent {
|
|
1255
1245
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToolbarNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ToolbarNgComponent, isStandalone: true, selector: "
|
|
1246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ToolbarNgComponent, isStandalone: true, selector: "lib-toolbar-ng", ngImport: i0, template: "<p-toolbar class=\"border-0 bg-transparent\">\r\n <ng-template pTemplate=\"start\">\r\n <ng-content select=\"[toolbarStart]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"center\">\r\n <ng-content select=\"[toolbarCenter]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"end\">\r\n <ng-content select=\"[toolbarEnd]\"></ng-content>\r\n </ng-template>\r\n</p-toolbar>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i1$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
|
|
1257
1247
|
}
|
|
1258
1248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToolbarNgComponent, decorators: [{
|
|
1259
1249
|
type: Component,
|
|
1260
|
-
args: [{ selector: '
|
|
1250
|
+
args: [{ selector: 'lib-toolbar-ng', imports: [
|
|
1261
1251
|
ToolbarModule
|
|
1262
1252
|
], template: "<p-toolbar class=\"border-0 bg-transparent\">\r\n <ng-template pTemplate=\"start\">\r\n <ng-content select=\"[toolbarStart]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"center\">\r\n <ng-content select=\"[toolbarCenter]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"end\">\r\n <ng-content select=\"[toolbarEnd]\"></ng-content>\r\n </ng-template>\r\n</p-toolbar>\r\n" }]
|
|
1263
1253
|
}] });
|
|
@@ -1526,7 +1516,7 @@ class TableNgService {
|
|
|
1526
1516
|
//#endregion
|
|
1527
1517
|
//#region Selection
|
|
1528
1518
|
async openModalManagementSelectedItems(selectedItems, config) {
|
|
1529
|
-
const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-
|
|
1519
|
+
const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-CrgtLkUn.mjs');
|
|
1530
1520
|
let configSelectedItems = config;
|
|
1531
1521
|
if (config) {
|
|
1532
1522
|
configSelectedItems = structuredClone(config);
|
|
@@ -2460,11 +2450,11 @@ class TableNgComponent {
|
|
|
2460
2450
|
return this.config()?.pdfConfig?.isEnabled ?? false;
|
|
2461
2451
|
});
|
|
2462
2452
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2463
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "app-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<app-aminated-container>\r\n <div class=\"p-datatable-wrapper\">\r\n @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n <div class=\"table-title-container\">\r\n <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n </div>\r\n }\r\n @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n <app-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n <div class=\"flex gap-2\" toolbarStart>\r\n @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n <app-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n (formSubmit)=\"submitGlobalSearch($event)\"></app-form>\r\n }\r\n @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n <app-button-ng class=\"animate__animated animate__fadeIn\"\r\n [buttonConfig]=\"advancedIdentifierFiltersButton()\"></app-button-ng>\r\n }\r\n @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n <app-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></app-button-ng>\r\n }\r\n </div>\r\n <div class=\"flex gap-2\" toolbarEnd>\r\n @if (toolbarButtons().length > 0) {\r\n @for (button of toolbarButtons(); track $index) {\r\n <app-button-ng [buttonConfig]=\"button\"></app-button-ng>\r\n }\r\n }\r\n @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n <app-button-ng [buttonConfig]=\"addRowButton()\"></app-button-ng>\r\n }\r\n @if (enableExcelButton()) {\r\n <app-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></app-button-ng>\r\n }\r\n @if (enablePdfButton()) {\r\n <app-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></app-button-ng>\r\n }\r\n </div>\r\n </app-toolbar-ng>\r\n }\r\n <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n [editMode]=\"editType\" [totalRecords]=\"\r\n lazyLoadingConfig?.isEnabled\r\n ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n : data().length\r\n \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n [currentPageReportTemplate]=\"'custom-page-report'\" selectionPageOnly=\"true\"\r\n dataKey=\"id\" class=\"w-full\">\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n </th>\r\n }\r\n @if (selectionTableConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n <p-tableHeaderCheckbox />\r\n </th>\r\n }\r\n\r\n @if (selectedColumns) {\r\n @for (column of columns; track $index) {\r\n <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(\r\n frozenColumnConfigByKey?.[column.field]\r\n ),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ column.field | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"column.field\" />\r\n }\r\n @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(column.field),\r\n }\" [type]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n 'text'\r\n \" [matchMode]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.matchMode\r\n \" [showMatchModes]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showMatchModes ?? false\r\n \" [showOperator]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showOperator ?? false\r\n \" [showAddButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showAddButton ?? false\r\n \" [showApplyButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showApplyButton ?? false\r\n \" [showClearButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showClearButton ?? false\r\n \">\r\n @if (\r\n filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <app-inline-input \r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\" \r\n (outputDebounced)=\"onFilter($event)\"\r\n [(ngModel)]=\"advancedFiltersValues()[column.field]\" \r\n [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }@else {\r\n @for (key of keys(); track $index) {\r\n <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ key | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"key\" />\r\n }\r\n @if (filterConfigByKey?.[key]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(key),\r\n }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n @if (\r\n filterConfigByKey?.[key]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <!-- <app-custom-advanced-filter filter\r\n [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n (formChanges)=\"formChanges($event, filter, key)\"\r\n [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n <app-inline-input (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\" [(ngModel)]=\"advancedFiltersValues()[key]\" [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }\r\n\r\n @if (editType === 'cell' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n @if (editType === 'row' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td [attr.colspan]=\"totalColumns()\">\r\n @if (isLoading()) {\r\n <!-- Estado de carga -->\r\n <div class=\"p-8 text-center\">\r\n <div class=\"flex flex-col items-center justify-center gap-4\">\r\n <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n <p class=\"text-gray-600 text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n } @else if (timeoutExpired()) {\r\n <!-- Timeout expirado sin datos -->\r\n <div class=\"p-8 text-center text-gray-500\">\r\n <div class=\"flex flex-col items-center justify-center gap-3\">\r\n <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n <p class=\"text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n @if (hasRecords()) {\r\n @if (editEnabled) {\r\n @switch (editType) {\r\n @case ('cell') {\r\n <ng-template #body let-item let-editing=\"editing\">\r\n <tr class=\"p-datatable-row p-selectable-row\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ?? 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n {{ item.rowData[key] }}\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n }\r\n @if (editType === 'cell' && editEnabled) {\r\n <td class=\"px-2 py-1 text-center\">\r\n <div class=\"flex justify-center items-center gap-2\">\r\n <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-button-ng>\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n @case ('row') {\r\n <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n \r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ?? 'USD' : item?.currencyTypeCellConfig?.[column.field]?.locale ?? 'es-CO' }} \r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n <span class=\"text-red-500 italic text-xs\">{{\r\n rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n </div>\r\n }\r\n @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[key]?.name) {\r\n {{ item.rowData[key]?.name }}\r\n } @else {\r\n {{ item.rowData[key] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n <td>\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @if(!editing){\r\n <app-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n (onClick)=\"onRowEditInit(item)\"></app-button-ng>\r\n @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-button-ng>\r\n }\r\n }\r\n @if(editing){\r\n @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n <app-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n (onClick)=\"onEditSaveWithErrors()\"></app-button-ng>\r\n }\r\n @else {\r\n <app-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n (onClick)=\"onRowEditSave(item)\"></app-button-ng>\r\n }\r\n <app-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n (onClick)=\"onRowEditCancel(item, ri)\"></app-button-ng>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n } @else {\r\n\r\n <ng-template #body let-item let-expanded=\"expanded\">\r\n <tr class=\"p-datatable-row p-selectable-row\"\r\n [ngClass]=\"{\r\n 'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n 'skeleton-row': item.isLoading\r\n }\"\r\n (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" \r\n [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <app-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n [pRowToggler]=\"item\"></app-button-ng>\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @if (selectionTableConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" \r\n alignFrozen=\"left\" \r\n pFrozenColumn \r\n class=\"shadow-lg\" \r\n [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @for (key of keys(); track $index) {\r\n @if (isThatItemInTheProductSelection(key)) {\r\n <td [id]=\"key\" class=\"p-datatable-cell\" \r\n [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n alignFrozen=\"right\" pFrozenColumn\r\n [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n 'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n 'skeleton-cell': item.isLoading\r\n }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n @if (item.isLoading) {\r\n <div class=\"skeleton-content\"></div>\r\n } @else {\r\n @if (item.rowDataButtons?.[key]) {\r\n <div class=\"flex gap-4 w-full justify-center items-center\">\r\n @for (btn of item.rowDataButtons[key]; track $index) {\r\n @if (btn) {\r\n <app-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></app-button-ng>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (item.typeCell?.[key]) {\r\n @case (ETypeInput.IMAGE) {\r\n <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n }\r\n @case (ETypeInput.DATE) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n }\r\n @case (ETypeInput.DATETIME_LOCAL) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n }\r\n @case (ETypeInput.CURRENCY) {\r\n {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n }\r\n @case (ETypeInput.BADGE) {\r\n <app-badge-ng [config]=\"item.rowData[key]\"></app-badge-ng>\r\n }\r\n @case (ETypeInput.COMPONENT) {\r\n <ng-container *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n }\r\n @default {\r\n @if (isDate(item.rowData[key])) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n } @else if (typeof item.rowData[key] === \"string\") {\r\n {{ item.rowData[key] }}\r\n } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n {{ item.rowData[key].name }}\r\n } @else if(typeof item.rowData[key] === \"number\") {\r\n <p class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n </p>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n\r\n <ng-template #footer>\r\n @if (footerEnabled) {\r\n @for (row of footerRows; track $index) {\r\n <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n @for (cell of row; track $index) {\r\n <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n applyPipe(cell.value,\r\n cell.pipeConfig) }}</td>\r\n\r\n }\r\n </tr>\r\n }\r\n\r\n }\r\n </ng-template>\r\n <ng-template #expandedrow let-item>\r\n <tr>\r\n <td colspan=\"100%\">\r\n <div class=\"p-datatable-row-expansion\">\r\n <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n @if (showBottomToolbar()) {\r\n <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n <app-toolbar-ng>\r\n @if (showManagementSelectionConfig()) {\r\n <div toolbarStart\r\n class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n <span class=\"font-medium text-gray-700\">Has seleccionado</span>\r\n <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n <span class=\"font-semibold text-gray-900\">{{\r\n totalItemsSelected().toLocaleString()\r\n }}</span>\r\n </div>\r\n <span class=\"text-sm text-gray-600\">registros</span>\r\n <app-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></app-button-ng>\r\n </div>\r\n }\r\n </app-toolbar-ng>\r\n </div>\r\n }\r\n </div>\r\n @if (httpMessage()) {\r\n <app-http-message [(httpMessage)]=\"httpMessage\"></app-http-message>\r\n }\r\n</app-aminated-container>", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "app-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "app-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "app-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "app-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: AminatedContainerComponent, selector: "app-aminated-container" }, { kind: "component", type: BadgeNgComponent, selector: "app-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "app-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2453
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<div class=\"p-datatable-wrapper\">\r\n @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n <div class=\"table-title-container\">\r\n <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n </div>\r\n }\r\n @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n <div class=\"flex gap-2\" toolbarStart>\r\n @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n }\r\n @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n }\r\n @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n }\r\n </div>\r\n <div class=\"flex gap-2\" toolbarEnd>\r\n @if (toolbarButtons().length > 0) {\r\n @for (button of toolbarButtons(); track $index) {\r\n <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n }\r\n }\r\n @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n }\r\n @if (enableExcelButton()) {\r\n <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n }\r\n @if (enablePdfButton()) {\r\n <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n }\r\n </div>\r\n </lib-toolbar-ng>\r\n }\r\n <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n [editMode]=\"editType\" [totalRecords]=\"\r\n lazyLoadingConfig?.isEnabled\r\n ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n : data().length\r\n \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n [currentPageReportTemplate]=\"'custom-page-report'\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n </th>\r\n }\r\n @if (selectionTableConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n <p-tableHeaderCheckbox />\r\n </th>\r\n }\r\n\r\n @if (selectedColumns) {\r\n @for (column of columns; track $index) {\r\n <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(\r\n frozenColumnConfigByKey?.[column.field]\r\n ),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ column.field | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"column.field\" />\r\n }\r\n @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(column.field),\r\n }\" [type]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n 'text'\r\n \" [matchMode]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.matchMode\r\n \" [showMatchModes]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showMatchModes ?? false\r\n \" [showOperator]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showOperator ?? false\r\n \" [showAddButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showAddButton ?? false\r\n \" [showApplyButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showApplyButton ?? false\r\n \" [showClearButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showClearButton ?? false\r\n \">\r\n @if (\r\n filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }@else {\r\n @for (key of keys(); track $index) {\r\n <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ key | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"key\" />\r\n }\r\n @if (filterConfigByKey?.[key]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(key),\r\n }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n @if (\r\n filterConfigByKey?.[key]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <!-- <app-custom-advanced-filter filter\r\n [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n (formChanges)=\"formChanges($event, filter, key)\"\r\n [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }\r\n\r\n @if (editType === 'cell' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n @if (editType === 'row' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td [attr.colspan]=\"totalColumns()\">\r\n @if (isLoading()) {\r\n <!-- Estado de carga -->\r\n <div class=\"p-8 text-center\">\r\n <div class=\"flex flex-col items-center justify-center gap-4\">\r\n <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n <p class=\"text-gray-600 text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n } @else if (timeoutExpired()) {\r\n <!-- Timeout expirado sin datos -->\r\n <div class=\"p-8 text-center text-gray-500\">\r\n <div class=\"flex flex-col items-center justify-center gap-3\">\r\n <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n <p class=\"text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n @if (hasRecords()) {\r\n @if (editEnabled) {\r\n @switch (editType) {\r\n @case ('cell') {\r\n <ng-template #body let-item let-editing=\"editing\">\r\n <tr class=\"p-datatable-row p-selectable-row\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n {{ item.rowData[key] }}\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n }\r\n @if (editType === 'cell' && editEnabled) {\r\n <td class=\"px-2 py-1 text-center\">\r\n <div class=\"flex justify-center items-center gap-2\">\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n @case ('row') {\r\n <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' : item?.currencyTypeCellConfig?.[column.field]?.locale ?? 'es-CO' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n <span class=\"text-red-500 italic text-xs\">{{\r\n rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n </div>\r\n }\r\n @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[key]?.name) {\r\n {{ item.rowData[key]?.name }}\r\n } @else {\r\n {{ item.rowData[key] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n <td>\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @if(!editing){\r\n <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n }\r\n }\r\n @if(editing){\r\n @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n }\r\n @else {\r\n <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n }\r\n <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n } @else {\r\n\r\n <ng-template #body let-item let-expanded=\"expanded\">\r\n <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n 'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n 'skeleton-row': item.isLoading\r\n }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n [pRowToggler]=\"item\"></lib-button-ng>\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @if (selectionTableConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @for (key of keys(); track $index) {\r\n @if (isThatItemInTheProductSelection(key)) {\r\n <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n 'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n 'skeleton-cell': item.isLoading\r\n }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n @if (item.isLoading) {\r\n <div class=\"skeleton-content\"></div>\r\n } @else {\r\n @if (item.rowDataButtons?.[key]) {\r\n <div class=\"flex gap-4 w-full justify-center items-center\">\r\n @for (btn of item.rowDataButtons[key]; track $index) {\r\n @if (btn) {\r\n <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (item.typeCell?.[key]) {\r\n @case (ETypeInput.IMAGE) {\r\n <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n }\r\n @case (ETypeInput.DATE) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n }\r\n @case (ETypeInput.DATETIME_LOCAL) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n }\r\n @case (ETypeInput.CURRENCY) {\r\n {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n }\r\n @case (ETypeInput.BADGE) {\r\n <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n }\r\n @case (ETypeInput.COMPONENT) {\r\n <ng-container\r\n *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n }\r\n @default {\r\n @if (isDate(item.rowData[key])) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n } @else if (typeof item.rowData[key] === \"string\") {\r\n {{ item.rowData[key] }}\r\n } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n {{ item.rowData[key].name }}\r\n } @else if(typeof item.rowData[key] === \"number\") {\r\n <p class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n </p>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n\r\n <ng-template #footer>\r\n @if (footerEnabled) {\r\n @for (row of footerRows; track $index) {\r\n <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n @for (cell of row; track $index) {\r\n <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n applyPipe(cell.value,\r\n cell.pipeConfig) }}</td>\r\n\r\n }\r\n </tr>\r\n }\r\n\r\n }\r\n </ng-template>\r\n <ng-template #expandedrow let-item>\r\n <tr>\r\n <td colspan=\"100%\">\r\n <div class=\"p-datatable-row-expansion\">\r\n <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n @if (showBottomToolbar()) {\r\n <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n <lib-toolbar-ng>\r\n @if (showManagementSelectionConfig()) {\r\n <div toolbarStart\r\n class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n <span class=\"font-medium text-gray-700\">Has seleccionado</span>\r\n <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n <span class=\"font-semibold text-gray-900\">{{\r\n totalItemsSelected().toLocaleString()\r\n }}</span>\r\n </div>\r\n <span class=\"text-sm text-gray-600\">registros</span>\r\n <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n </div>\r\n }\r\n </lib-toolbar-ng>\r\n </div>\r\n }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2464
2454
|
}
|
|
2465
2455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
|
|
2466
2456
|
type: Component,
|
|
2467
|
-
args: [{ selector: '
|
|
2457
|
+
args: [{ selector: 'lib-table-ng', imports: [
|
|
2468
2458
|
CommonModule,
|
|
2469
2459
|
TableModule,
|
|
2470
2460
|
ButtonNgComponent,
|
|
@@ -2473,10 +2463,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
2473
2463
|
KeyToDisplayNamePipe,
|
|
2474
2464
|
FormsModule,
|
|
2475
2465
|
InlineInputComponent,
|
|
2476
|
-
AminatedContainerComponent,
|
|
2477
2466
|
BadgeNgComponent,
|
|
2478
2467
|
HttpMessageComponent
|
|
2479
|
-
], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<app-aminated-container>\r\n <div class=\"p-datatable-wrapper\">\r\n @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n <div class=\"table-title-container\">\r\n <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n </div>\r\n }\r\n @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n <app-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n <div class=\"flex gap-2\" toolbarStart>\r\n @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n <app-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n (formSubmit)=\"submitGlobalSearch($event)\"></app-form>\r\n }\r\n @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n <app-button-ng class=\"animate__animated animate__fadeIn\"\r\n [buttonConfig]=\"advancedIdentifierFiltersButton()\"></app-button-ng>\r\n }\r\n @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n <app-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></app-button-ng>\r\n }\r\n </div>\r\n <div class=\"flex gap-2\" toolbarEnd>\r\n @if (toolbarButtons().length > 0) {\r\n @for (button of toolbarButtons(); track $index) {\r\n <app-button-ng [buttonConfig]=\"button\"></app-button-ng>\r\n }\r\n }\r\n @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n <app-button-ng [buttonConfig]=\"addRowButton()\"></app-button-ng>\r\n }\r\n @if (enableExcelButton()) {\r\n <app-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></app-button-ng>\r\n }\r\n @if (enablePdfButton()) {\r\n <app-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></app-button-ng>\r\n }\r\n </div>\r\n </app-toolbar-ng>\r\n }\r\n <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n [editMode]=\"editType\" [totalRecords]=\"\r\n lazyLoadingConfig?.isEnabled\r\n ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n : data().length\r\n \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n [currentPageReportTemplate]=\"'custom-page-report'\" selectionPageOnly=\"true\"\r\n dataKey=\"id\" class=\"w-full\">\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n </th>\r\n }\r\n @if (selectionTableConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n <p-tableHeaderCheckbox />\r\n </th>\r\n }\r\n\r\n @if (selectedColumns) {\r\n @for (column of columns; track $index) {\r\n <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(\r\n frozenColumnConfigByKey?.[column.field]\r\n ),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ column.field | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"column.field\" />\r\n }\r\n @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(column.field),\r\n }\" [type]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n 'text'\r\n \" [matchMode]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.matchMode\r\n \" [showMatchModes]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showMatchModes ?? false\r\n \" [showOperator]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showOperator ?? false\r\n \" [showAddButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showAddButton ?? false\r\n \" [showApplyButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showApplyButton ?? false\r\n \" [showClearButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showClearButton ?? false\r\n \">\r\n @if (\r\n filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <app-inline-input \r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\" \r\n (outputDebounced)=\"onFilter($event)\"\r\n [(ngModel)]=\"advancedFiltersValues()[column.field]\" \r\n [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }@else {\r\n @for (key of keys(); track $index) {\r\n <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ key | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"key\" />\r\n }\r\n @if (filterConfigByKey?.[key]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(key),\r\n }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n @if (\r\n filterConfigByKey?.[key]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <!-- <app-custom-advanced-filter filter\r\n [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n (formChanges)=\"formChanges($event, filter, key)\"\r\n [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n <app-inline-input (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\" [(ngModel)]=\"advancedFiltersValues()[key]\" [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }\r\n\r\n @if (editType === 'cell' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n @if (editType === 'row' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td [attr.colspan]=\"totalColumns()\">\r\n @if (isLoading()) {\r\n <!-- Estado de carga -->\r\n <div class=\"p-8 text-center\">\r\n <div class=\"flex flex-col items-center justify-center gap-4\">\r\n <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n <p class=\"text-gray-600 text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n } @else if (timeoutExpired()) {\r\n <!-- Timeout expirado sin datos -->\r\n <div class=\"p-8 text-center text-gray-500\">\r\n <div class=\"flex flex-col items-center justify-center gap-3\">\r\n <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n <p class=\"text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n @if (hasRecords()) {\r\n @if (editEnabled) {\r\n @switch (editType) {\r\n @case ('cell') {\r\n <ng-template #body let-item let-editing=\"editing\">\r\n <tr class=\"p-datatable-row p-selectable-row\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ?? 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n {{ item.rowData[key] }}\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n }\r\n @if (editType === 'cell' && editEnabled) {\r\n <td class=\"px-2 py-1 text-center\">\r\n <div class=\"flex justify-center items-center gap-2\">\r\n <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-button-ng>\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n @case ('row') {\r\n <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n \r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ?? 'USD' : item?.currencyTypeCellConfig?.[column.field]?.locale ?? 'es-CO' }} \r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n <span class=\"text-red-500 italic text-xs\">{{\r\n rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </app-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n </div>\r\n }\r\n @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[key]?.name) {\r\n {{ item.rowData[key]?.name }}\r\n } @else {\r\n {{ item.rowData[key] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n <td>\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @if(!editing){\r\n <app-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n (onClick)=\"onRowEditInit(item)\"></app-button-ng>\r\n @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-button-ng>\r\n }\r\n }\r\n @if(editing){\r\n @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n <app-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n (onClick)=\"onEditSaveWithErrors()\"></app-button-ng>\r\n }\r\n @else {\r\n <app-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n (onClick)=\"onRowEditSave(item)\"></app-button-ng>\r\n }\r\n <app-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n (onClick)=\"onRowEditCancel(item, ri)\"></app-button-ng>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n } @else {\r\n\r\n <ng-template #body let-item let-expanded=\"expanded\">\r\n <tr class=\"p-datatable-row p-selectable-row\"\r\n [ngClass]=\"{\r\n 'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n 'skeleton-row': item.isLoading\r\n }\"\r\n (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" \r\n [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <app-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n [pRowToggler]=\"item\"></app-button-ng>\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @if (selectionTableConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" \r\n alignFrozen=\"left\" \r\n pFrozenColumn \r\n class=\"shadow-lg\" \r\n [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @for (key of keys(); track $index) {\r\n @if (isThatItemInTheProductSelection(key)) {\r\n <td [id]=\"key\" class=\"p-datatable-cell\" \r\n [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n alignFrozen=\"right\" pFrozenColumn\r\n [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n 'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n 'skeleton-cell': item.isLoading\r\n }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n @if (item.isLoading) {\r\n <div class=\"skeleton-content\"></div>\r\n } @else {\r\n @if (item.rowDataButtons?.[key]) {\r\n <div class=\"flex gap-4 w-full justify-center items-center\">\r\n @for (btn of item.rowDataButtons[key]; track $index) {\r\n @if (btn) {\r\n <app-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></app-button-ng>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (item.typeCell?.[key]) {\r\n @case (ETypeInput.IMAGE) {\r\n <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n }\r\n @case (ETypeInput.DATE) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n }\r\n @case (ETypeInput.DATETIME_LOCAL) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n }\r\n @case (ETypeInput.CURRENCY) {\r\n {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n }\r\n @case (ETypeInput.BADGE) {\r\n <app-badge-ng [config]=\"item.rowData[key]\"></app-badge-ng>\r\n }\r\n @case (ETypeInput.COMPONENT) {\r\n <ng-container *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n }\r\n @default {\r\n @if (isDate(item.rowData[key])) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n } @else if (typeof item.rowData[key] === \"string\") {\r\n {{ item.rowData[key] }}\r\n } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n {{ item.rowData[key].name }}\r\n } @else if(typeof item.rowData[key] === \"number\") {\r\n <p class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n </p>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n\r\n <ng-template #footer>\r\n @if (footerEnabled) {\r\n @for (row of footerRows; track $index) {\r\n <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n @for (cell of row; track $index) {\r\n <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n applyPipe(cell.value,\r\n cell.pipeConfig) }}</td>\r\n\r\n }\r\n </tr>\r\n }\r\n\r\n }\r\n </ng-template>\r\n <ng-template #expandedrow let-item>\r\n <tr>\r\n <td colspan=\"100%\">\r\n <div class=\"p-datatable-row-expansion\">\r\n <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n @if (showBottomToolbar()) {\r\n <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n <app-toolbar-ng>\r\n @if (showManagementSelectionConfig()) {\r\n <div toolbarStart\r\n class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n <span class=\"font-medium text-gray-700\">Has seleccionado</span>\r\n <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n <span class=\"font-semibold text-gray-900\">{{\r\n totalItemsSelected().toLocaleString()\r\n }}</span>\r\n </div>\r\n <span class=\"text-sm text-gray-600\">registros</span>\r\n <app-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></app-button-ng>\r\n </div>\r\n }\r\n </app-toolbar-ng>\r\n </div>\r\n }\r\n </div>\r\n @if (httpMessage()) {\r\n <app-http-message [(httpMessage)]=\"httpMessage\"></app-http-message>\r\n }\r\n</app-aminated-container>", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
2468
|
+
], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<div class=\"p-datatable-wrapper\">\r\n @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n <div class=\"table-title-container\">\r\n <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n </div>\r\n }\r\n @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n <div class=\"flex gap-2\" toolbarStart>\r\n @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n }\r\n @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n }\r\n @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n }\r\n </div>\r\n <div class=\"flex gap-2\" toolbarEnd>\r\n @if (toolbarButtons().length > 0) {\r\n @for (button of toolbarButtons(); track $index) {\r\n <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n }\r\n }\r\n @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n }\r\n @if (enableExcelButton()) {\r\n <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n }\r\n @if (enablePdfButton()) {\r\n <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n }\r\n </div>\r\n </lib-toolbar-ng>\r\n }\r\n <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n [editMode]=\"editType\" [totalRecords]=\"\r\n lazyLoadingConfig?.isEnabled\r\n ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n : data().length\r\n \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n [currentPageReportTemplate]=\"'custom-page-report'\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n </th>\r\n }\r\n @if (selectionTableConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n <p-tableHeaderCheckbox />\r\n </th>\r\n }\r\n\r\n @if (selectedColumns) {\r\n @for (column of columns; track $index) {\r\n <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(\r\n frozenColumnConfigByKey?.[column.field]\r\n ),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ column.field | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"column.field\" />\r\n }\r\n @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(column.field),\r\n }\" [type]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n 'text'\r\n \" [matchMode]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.matchMode\r\n \" [showMatchModes]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showMatchModes ?? false\r\n \" [showOperator]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showOperator ?? false\r\n \" [showAddButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showAddButton ?? false\r\n \" [showApplyButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showApplyButton ?? false\r\n \" [showClearButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showClearButton ?? false\r\n \">\r\n @if (\r\n filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }@else {\r\n @for (key of keys(); track $index) {\r\n <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ key | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"key\" />\r\n }\r\n @if (filterConfigByKey?.[key]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(key),\r\n }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n @if (\r\n filterConfigByKey?.[key]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <!-- <app-custom-advanced-filter filter\r\n [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n (formChanges)=\"formChanges($event, filter, key)\"\r\n [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }\r\n\r\n @if (editType === 'cell' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n @if (editType === 'row' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td [attr.colspan]=\"totalColumns()\">\r\n @if (isLoading()) {\r\n <!-- Estado de carga -->\r\n <div class=\"p-8 text-center\">\r\n <div class=\"flex flex-col items-center justify-center gap-4\">\r\n <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n <p class=\"text-gray-600 text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n } @else if (timeoutExpired()) {\r\n <!-- Timeout expirado sin datos -->\r\n <div class=\"p-8 text-center text-gray-500\">\r\n <div class=\"flex flex-col items-center justify-center gap-3\">\r\n <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n <p class=\"text-lg\">{{ '' }}</p>\r\n </div>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n @if (hasRecords()) {\r\n @if (editEnabled) {\r\n @switch (editType) {\r\n @case ('cell') {\r\n <ng-template #body let-item let-editing=\"editing\">\r\n <tr class=\"p-datatable-row p-selectable-row\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n {{ item.rowData[key] }}\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n }\r\n @if (editType === 'cell' && editEnabled) {\r\n <td class=\"px-2 py-1 text-center\">\r\n <div class=\"flex justify-center items-center gap-2\">\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n @case ('row') {\r\n <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' : item?.currencyTypeCellConfig?.[column.field]?.locale ?? 'es-CO' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n <span class=\"text-red-500 italic text-xs\">{{\r\n rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n </div>\r\n }\r\n @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[key]?.name) {\r\n {{ item.rowData[key]?.name }}\r\n } @else {\r\n {{ item.rowData[key] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n <td>\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @if(!editing){\r\n <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n }\r\n }\r\n @if(editing){\r\n @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n }\r\n @else {\r\n <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n }\r\n <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n } @else {\r\n\r\n <ng-template #body let-item let-expanded=\"expanded\">\r\n <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n 'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n 'skeleton-row': item.isLoading\r\n }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n [pRowToggler]=\"item\"></lib-button-ng>\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @if (selectionTableConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @for (key of keys(); track $index) {\r\n @if (isThatItemInTheProductSelection(key)) {\r\n <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n 'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n 'skeleton-cell': item.isLoading\r\n }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n @if (item.isLoading) {\r\n <div class=\"skeleton-content\"></div>\r\n } @else {\r\n @if (item.rowDataButtons?.[key]) {\r\n <div class=\"flex gap-4 w-full justify-center items-center\">\r\n @for (btn of item.rowDataButtons[key]; track $index) {\r\n @if (btn) {\r\n <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (item.typeCell?.[key]) {\r\n @case (ETypeInput.IMAGE) {\r\n <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n }\r\n @case (ETypeInput.DATE) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n }\r\n @case (ETypeInput.DATETIME_LOCAL) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n }\r\n @case (ETypeInput.CURRENCY) {\r\n {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n }\r\n @case (ETypeInput.BADGE) {\r\n <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n }\r\n @case (ETypeInput.COMPONENT) {\r\n <ng-container\r\n *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n }\r\n @default {\r\n @if (isDate(item.rowData[key])) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n } @else if (typeof item.rowData[key] === \"string\") {\r\n {{ item.rowData[key] }}\r\n } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n {{ item.rowData[key].name }}\r\n } @else if(typeof item.rowData[key] === \"number\") {\r\n <p class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n </p>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n\r\n <ng-template #footer>\r\n @if (footerEnabled) {\r\n @for (row of footerRows; track $index) {\r\n <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n @for (cell of row; track $index) {\r\n <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n applyPipe(cell.value,\r\n cell.pipeConfig) }}</td>\r\n\r\n }\r\n </tr>\r\n }\r\n\r\n }\r\n </ng-template>\r\n <ng-template #expandedrow let-item>\r\n <tr>\r\n <td colspan=\"100%\">\r\n <div class=\"p-datatable-row-expansion\">\r\n <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n @if (showBottomToolbar()) {\r\n <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n <lib-toolbar-ng>\r\n @if (showManagementSelectionConfig()) {\r\n <div toolbarStart\r\n class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n <span class=\"font-medium text-gray-700\">Has seleccionado</span>\r\n <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n <span class=\"font-semibold text-gray-900\">{{\r\n totalItemsSelected().toLocaleString()\r\n }}</span>\r\n </div>\r\n <span class=\"text-sm text-gray-600\">registros</span>\r\n <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n </div>\r\n }\r\n </lib-toolbar-ng>\r\n </div>\r\n }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
2480
2469
|
}], ctorParameters: () => [], propDecorators: { dt: [{
|
|
2481
2470
|
type: ViewChild,
|
|
2482
2471
|
args: ['dt']
|