@solcre-org/core-ui 2.20.10 → 2.20.13

package/fesm2022/solcre-org-core-ui.mjs

@@ -7297,6 +7297,11 @@ class GenericModalComponent {
         const currentIndex = this.currentStepIndex();
         return currentIndex >= 0 ? steps[currentIndex] : null;
     });
+    currentTab = computed(() => {
+        const tabs = this.tabs();
+        const activeId = this.activeTabId();
+        return tabs.find(tab => tab.tabId === activeId) || null;
+    });
     showSaveButton = computed(() => {
         if (!this.hasSteps())
             return true;
@@ -8229,7 +8234,7 @@ class GenericModalComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericModalComponent, isStandalone: true, selector: "core-generic-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, customViewTemplate: { classPropertyName: "customViewTemplate", publicName: "customViewTemplate", isSignal: true, isRequired: false, transformFunction: null }, finalStepTemplate: { classPropertyName: "finalStepTemplate", publicName: "finalStepTemplate", isSignal: true, isRequired: false, transformFunction: null }, buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, customHasChanges: { classPropertyName: "customHasChanges", publicName: "customHasChanges", isSignal: true, isRequired: false, transformFunction: null }, stepValidationEnabled: { classPropertyName: "stepValidationEnabled", publicName: "stepValidationEnabled", isSignal: true, isRequired: false, transformFunction: null }, allowFreeNavigation: { classPropertyName: "allowFreeNavigation", publicName: "allowFreeNavigation", isSignal: true, isRequired: false, transformFunction: null }, autoMarkCompleted: { classPropertyName: "autoMarkCompleted", publicName: "autoMarkCompleted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", close: "close", modalData: "modalData" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData() || customTemplate()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        } @else if (hasSteps()) {\n          <core-generic-steps\n            [config]=\"stepsConfig()\">\n          </core-generic-steps>\n        }\n\n        @if (customTemplate()) {\n          <div class=\"c-entry-group\">\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: editedData(),\n                mode: mode(),\n                updateField: onFieldValueChange.bind(this),\n                save: onSave.bind(this),\n                close: onClose.bind(this),\n                activeTabId: activeTabId(),\n                onTabChange: onTabChange.bind(this),\n                getFieldErrors: getFieldErrors.bind(this),\n                validateAllFields: validateAllFields.bind(this),\n                hasErrors: hasErrors(),\n                setCustomHasChanges: setCustomHasChanges.bind(this)\n              }\"\n            ></ng-container>\n          </div> <!-- .c-entry-group -->\n        } @else if (editedData()) {\n          @if (mode() === ModalMode.VIEW) {\n            <core-data-list\n              [items]=\"dataListItems()\"\n              [data]=\"editedData()\"\n              [customTemplate]=\"customViewTemplate()\"\n              [emptyMessage]=\"'modal.noData'\"\n            ></core-data-list>\n          } @else {\n            @if (hasSteps() && currentStep()?.customTemplate) {\n                <!-- Renderizar template personalizado del step -->\n                <div class=\"c-entry-group\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"currentStep()!.customTemplate!\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: editedData(),\n                      mode: mode(),\n                      updateField: onFieldValueChange.bind(this),\n                      save: onSave.bind(this),\n                      close: onClose.bind(this),\n                      getFieldErrors: getFieldErrors.bind(this)\n                    }\"\n                  ></ng-container>\n                </div>\n              } @else {\n                <!-- Renderizar campos normales -->\n                <div class=\"c-entry-group\">\n                  @for (field of currentFields(); track field.key) {\n                    @if (getFieldConfig(field).visible) {\n                      <div\n                        coreDynamicField\n                        [field]=\"getFieldConfig(field)\"\n                        [value]=\"editedData()![field.key]\"\n                        [mode]=\"mode()\"\n                        [errors]=\"getFieldErrors(field.key)\"\n                        [rowData]=\"editedData()\"\n                        [formValue]=\"editedData()\"\n                        (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                        (onBlurEvent)=\"validateAllFields()\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                      ></div>\n                    }\n                  }\n                </div> <!-- .c-entry-group -->\n              }\n          }\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        @if (hasSteps()) {\n          <!-- Botones para navegaci\u00F3n de steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (currentStepIndex() > 0) {\n            <core-generic-button\n              [config]=\"prevStepButtonConfig()\"\n              (buttonClick)=\"goToPreviousStep()\">\n            </core-generic-button>\n          }\n          <core-generic-button\n            [config]=\"nextStepButtonConfig()\"\n            (buttonClick)=\"goToNextStep()\">\n          </core-generic-button>\n        } @else {\n          <!-- Botones normales para modales sin steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (mode() !== ModalMode.VIEW && showSaveButton()) {\n            <core-generic-button\n              [config]=\"defaultSaveButtonConfig()\"\n              (buttonClick)=\"onSave()\">\n            </core-generic-button>\n          }\n        }\n      }\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: GenericTabsComponent, selector: "nav[core-generic-tabs]", inputs: ["config", "activeTabId", "hasTabErrors"], outputs: ["tabClick", "tabChange"] }, { kind: "component", type: GenericStepsComponent, selector: "core-generic-steps", inputs: ["config", "useService", "instanceId"], outputs: ["stepClick", "stepChange", "serviceStepChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: DataListComponent, selector: "core-data-list", inputs: ["items", "fields", "data", "customTemplate", "showEmptyMessage", "emptyMessage", "cssClasses"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericModalComponent, isStandalone: true, selector: "core-generic-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, customViewTemplate: { classPropertyName: "customViewTemplate", publicName: "customViewTemplate", isSignal: true, isRequired: false, transformFunction: null }, finalStepTemplate: { classPropertyName: "finalStepTemplate", publicName: "finalStepTemplate", isSignal: true, isRequired: false, transformFunction: null }, buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, customHasChanges: { classPropertyName: "customHasChanges", publicName: "customHasChanges", isSignal: true, isRequired: false, transformFunction: null }, stepValidationEnabled: { classPropertyName: "stepValidationEnabled", publicName: "stepValidationEnabled", isSignal: true, isRequired: false, transformFunction: null }, allowFreeNavigation: { classPropertyName: "allowFreeNavigation", publicName: "allowFreeNavigation", isSignal: true, isRequired: false, transformFunction: null }, autoMarkCompleted: { classPropertyName: "autoMarkCompleted", publicName: "autoMarkCompleted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", close: "close", modalData: "modalData" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData() || customTemplate()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        } @else if (hasSteps()) {\n          <core-generic-steps\n            [config]=\"stepsConfig()\">\n          </core-generic-steps>\n        }\n\n        @if (customTemplate()) {\n          <div class=\"c-entry-group\">\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: editedData(),\n                mode: mode(),\n                updateField: onFieldValueChange.bind(this),\n                save: onSave.bind(this),\n                close: onClose.bind(this),\n                activeTabId: activeTabId(),\n                onTabChange: onTabChange.bind(this),\n                getFieldErrors: getFieldErrors.bind(this),\n                validateAllFields: validateAllFields.bind(this),\n                hasErrors: hasErrors(),\n                setCustomHasChanges: setCustomHasChanges.bind(this)\n              }\"\n            ></ng-container>\n          </div> <!-- .c-entry-group -->\n        } @else if (editedData()) {\n          @if (mode() === ModalMode.VIEW) {\n            <core-data-list\n              [items]=\"dataListItems()\"\n              [data]=\"editedData()\"\n              [customTemplate]=\"customViewTemplate()\"\n              [emptyMessage]=\"'modal.noData'\"\n            ></core-data-list>\n          } @else {\n            @if (hasSteps() && currentStep()?.customTemplate) {\n                <!-- Renderizar template personalizado del step -->\n                <div class=\"c-entry-group\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"currentStep()!.customTemplate!\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: editedData(),\n                      mode: mode(),\n                      updateField: onFieldValueChange.bind(this),\n                      save: onSave.bind(this),\n                      close: onClose.bind(this),\n                      getFieldErrors: getFieldErrors.bind(this)\n                    }\"\n                  ></ng-container>\n                </div>\n              } @else if (hasTabs() && currentTab()?.customTemplate) {\n                <!-- Renderizar template personalizado de la tab -->\n                <div class=\"c-entry-group\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"currentTab()!.customTemplate!\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: editedData(),\n                      mode: mode(),\n                      updateField: onFieldValueChange.bind(this),\n                      save: onSave.bind(this),\n                      close: onClose.bind(this),\n                      getFieldErrors: getFieldErrors.bind(this)\n                    }\"\n                  ></ng-container>\n                </div>\n              } @else {\n                <!-- Renderizar campos normales -->\n                <div class=\"c-entry-group\">\n                  @for (field of currentFields(); track field.key) {\n                    @if (getFieldConfig(field).visible) {\n                      <div\n                        coreDynamicField\n                        [field]=\"getFieldConfig(field)\"\n                        [value]=\"editedData()![field.key]\"\n                        [mode]=\"mode()\"\n                        [errors]=\"getFieldErrors(field.key)\"\n                        [rowData]=\"editedData()\"\n                        [formValue]=\"editedData()\"\n                        (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                        (onBlurEvent)=\"validateAllFields()\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                      ></div>\n                    }\n                  }\n                </div> <!-- .c-entry-group -->\n              }\n          }\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        @if (hasSteps()) {\n          <!-- Botones para navegaci\u00F3n de steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (currentStepIndex() > 0) {\n            <core-generic-button\n              [config]=\"prevStepButtonConfig()\"\n              (buttonClick)=\"goToPreviousStep()\">\n            </core-generic-button>\n          }\n          <core-generic-button\n            [config]=\"nextStepButtonConfig()\"\n            (buttonClick)=\"goToNextStep()\">\n          </core-generic-button>\n        } @else {\n          <!-- Botones normales para modales sin steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (mode() !== ModalMode.VIEW && showSaveButton()) {\n            <core-generic-button\n              [config]=\"defaultSaveButtonConfig()\"\n              (buttonClick)=\"onSave()\">\n            </core-generic-button>\n          }\n        }\n      }\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: GenericTabsComponent, selector: "nav[core-generic-tabs]", inputs: ["config", "activeTabId", "hasTabErrors"], outputs: ["tabClick", "tabChange"] }, { kind: "component", type: GenericStepsComponent, selector: "core-generic-steps", inputs: ["config", "useService", "instanceId"], outputs: ["stepClick", "stepChange", "serviceStepChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: DataListComponent, selector: "core-data-list", inputs: ["items", "fields", "data", "customTemplate", "showEmptyMessage", "emptyMessage", "cssClasses"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericModalComponent, decorators: [{
             type: Component,
@@ -8243,7 +8248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         GenericStepsComponent,
                         GenericButtonComponent,
                         DataListComponent,
-                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData() || customTemplate()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        } @else if (hasSteps()) {\n          <core-generic-steps\n            [config]=\"stepsConfig()\">\n          </core-generic-steps>\n        }\n\n        @if (customTemplate()) {\n          <div class=\"c-entry-group\">\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: editedData(),\n                mode: mode(),\n                updateField: onFieldValueChange.bind(this),\n                save: onSave.bind(this),\n                close: onClose.bind(this),\n                activeTabId: activeTabId(),\n                onTabChange: onTabChange.bind(this),\n                getFieldErrors: getFieldErrors.bind(this),\n                validateAllFields: validateAllFields.bind(this),\n                hasErrors: hasErrors(),\n                setCustomHasChanges: setCustomHasChanges.bind(this)\n              }\"\n            ></ng-container>\n          </div> <!-- .c-entry-group -->\n        } @else if (editedData()) {\n          @if (mode() === ModalMode.VIEW) {\n            <core-data-list\n              [items]=\"dataListItems()\"\n              [data]=\"editedData()\"\n              [customTemplate]=\"customViewTemplate()\"\n              [emptyMessage]=\"'modal.noData'\"\n            ></core-data-list>\n          } @else {\n            @if (hasSteps() && currentStep()?.customTemplate) {\n                <!-- Renderizar template personalizado del step -->\n                <div class=\"c-entry-group\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"currentStep()!.customTemplate!\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: editedData(),\n                      mode: mode(),\n                      updateField: onFieldValueChange.bind(this),\n                      save: onSave.bind(this),\n                      close: onClose.bind(this),\n                      getFieldErrors: getFieldErrors.bind(this)\n                    }\"\n                  ></ng-container>\n                </div>\n              } @else {\n                <!-- Renderizar campos normales -->\n                <div class=\"c-entry-group\">\n                  @for (field of currentFields(); track field.key) {\n                    @if (getFieldConfig(field).visible) {\n                      <div\n                        coreDynamicField\n                        [field]=\"getFieldConfig(field)\"\n                        [value]=\"editedData()![field.key]\"\n                        [mode]=\"mode()\"\n                        [errors]=\"getFieldErrors(field.key)\"\n                        [rowData]=\"editedData()\"\n                        [formValue]=\"editedData()\"\n                        (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                        (onBlurEvent)=\"validateAllFields()\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                      ></div>\n                    }\n                  }\n                </div> <!-- .c-entry-group -->\n              }\n          }\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        @if (hasSteps()) {\n          <!-- Botones para navegaci\u00F3n de steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (currentStepIndex() > 0) {\n            <core-generic-button\n              [config]=\"prevStepButtonConfig()\"\n              (buttonClick)=\"goToPreviousStep()\">\n            </core-generic-button>\n          }\n          <core-generic-button\n            [config]=\"nextStepButtonConfig()\"\n            (buttonClick)=\"goToNextStep()\">\n          </core-generic-button>\n        } @else {\n          <!-- Botones normales para modales sin steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (mode() !== ModalMode.VIEW && showSaveButton()) {\n            <core-generic-button\n              [config]=\"defaultSaveButtonConfig()\"\n              (buttonClick)=\"onSave()\">\n            </core-generic-button>\n          }\n        }\n      }\n    </div>\n  </div>\n</div>" }]
+                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData() || customTemplate()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        } @else if (hasSteps()) {\n          <core-generic-steps\n            [config]=\"stepsConfig()\">\n          </core-generic-steps>\n        }\n\n        @if (customTemplate()) {\n          <div class=\"c-entry-group\">\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: editedData(),\n                mode: mode(),\n                updateField: onFieldValueChange.bind(this),\n                save: onSave.bind(this),\n                close: onClose.bind(this),\n                activeTabId: activeTabId(),\n                onTabChange: onTabChange.bind(this),\n                getFieldErrors: getFieldErrors.bind(this),\n                validateAllFields: validateAllFields.bind(this),\n                hasErrors: hasErrors(),\n                setCustomHasChanges: setCustomHasChanges.bind(this)\n              }\"\n            ></ng-container>\n          </div> <!-- .c-entry-group -->\n        } @else if (editedData()) {\n          @if (mode() === ModalMode.VIEW) {\n            <core-data-list\n              [items]=\"dataListItems()\"\n              [data]=\"editedData()\"\n              [customTemplate]=\"customViewTemplate()\"\n              [emptyMessage]=\"'modal.noData'\"\n            ></core-data-list>\n          } @else {\n            @if (hasSteps() && currentStep()?.customTemplate) {\n                <!-- Renderizar template personalizado del step -->\n                <div class=\"c-entry-group\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"currentStep()!.customTemplate!\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: editedData(),\n                      mode: mode(),\n                      updateField: onFieldValueChange.bind(this),\n                      save: onSave.bind(this),\n                      close: onClose.bind(this),\n                      getFieldErrors: getFieldErrors.bind(this)\n                    }\"\n                  ></ng-container>\n                </div>\n              } @else if (hasTabs() && currentTab()?.customTemplate) {\n                <!-- Renderizar template personalizado de la tab -->\n                <div class=\"c-entry-group\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"currentTab()!.customTemplate!\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: editedData(),\n                      mode: mode(),\n                      updateField: onFieldValueChange.bind(this),\n                      save: onSave.bind(this),\n                      close: onClose.bind(this),\n                      getFieldErrors: getFieldErrors.bind(this)\n                    }\"\n                  ></ng-container>\n                </div>\n              } @else {\n                <!-- Renderizar campos normales -->\n                <div class=\"c-entry-group\">\n                  @for (field of currentFields(); track field.key) {\n                    @if (getFieldConfig(field).visible) {\n                      <div\n                        coreDynamicField\n                        [field]=\"getFieldConfig(field)\"\n                        [value]=\"editedData()![field.key]\"\n                        [mode]=\"mode()\"\n                        [errors]=\"getFieldErrors(field.key)\"\n                        [rowData]=\"editedData()\"\n                        [formValue]=\"editedData()\"\n                        (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                        (onBlurEvent)=\"validateAllFields()\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                      ></div>\n                    }\n                  }\n                </div> <!-- .c-entry-group -->\n              }\n          }\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        @if (hasSteps()) {\n          <!-- Botones para navegaci\u00F3n de steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (currentStepIndex() > 0) {\n            <core-generic-button\n              [config]=\"prevStepButtonConfig()\"\n              (buttonClick)=\"goToPreviousStep()\">\n            </core-generic-button>\n          }\n          <core-generic-button\n            [config]=\"nextStepButtonConfig()\"\n            (buttonClick)=\"goToNextStep()\">\n          </core-generic-button>\n        } @else {\n          <!-- Botones normales para modales sin steps -->\n          <core-generic-button\n            [config]=\"defaultCancelButtonConfig()\"\n            (buttonClick)=\"onClose()\">\n          </core-generic-button>\n          @if (mode() !== ModalMode.VIEW && showSaveButton()) {\n            <core-generic-button\n              [config]=\"defaultSaveButtonConfig()\"\n              (buttonClick)=\"onSave()\">\n            </core-generic-button>\n          }\n        }\n      }\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [] });
 
 class PaginationService {
@@ -13231,6 +13236,7 @@ class GenericTableComponent {
     activeFilterRemoved = output();
     activeFiltersCleared = output();
     dataRefreshed = output();
+    modalClosed = output();
     hasTabs = computed(() => this.modalTabs().length > 0);
     allModalFields = computed(() => {
         if (this.hasTabs()) {
@@ -14511,6 +14517,7 @@ class GenericTableComponent {
     }
     closeModal() {
         this.tableActionService.closeModal();
+        this.modalClosed.emit();
     }
     emitDataEvent(data, mode) {
         if (mode === ModalMode.CREATE) {
@@ -15450,7 +15457,7 @@ class GenericTableComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonText: { classPropertyName: "createButtonText", publicName: "createButtonText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, listSubTitle: { classPropertyName: "listSubTitle", publicName: "listSubTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", isSignal: true, isRequired: false, transformFunction: null }, showManualRefresh: { classPropertyName: "showManualRefresh", publicName: "showManualRefresh", isSignal: true, isRequired: false, transformFunction: null }, manualRefreshConfig: { classPropertyName: "manualRefreshConfig", publicName: "manualRefreshConfig", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonConfig: { classPropertyName: "refreshButtonConfig", publicName: "refreshButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, fixedActionsConfig: { classPropertyName: "fixedActionsConfig", publicName: "fixedActionsConfig", isSignal: true, isRequired: false, transformFunction: null }, deletedFilterKey: { classPropertyName: "deletedFilterKey", publicName: "deletedFilterKey", isSignal: true, isRequired: false, transformFunction: null }, scrollTable: { classPropertyName: "scrollTable", publicName: "scrollTable", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", dataRefreshed: "dataRefreshed", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "manualRefreshComponent", first: true, predicate: CoreManualRefreshComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\"\n  >\n  </core-active-filters>\n}\n<div\n  class=\"c-table\"\n  [class.c-table--scroll]=\"scrollTable()\"\n  [class.in-modal]=\"inModal()\"\n  [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\"\n>\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh\n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\"\n    >\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n          <!-- Todo: Tabla con row selection -->\n          <th class=\"select-column\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              (change)=\"masterToggle()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track $index) {\n          <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n            @if (isColumnSortable(column)) {\n              <button\n                class=\"c-table-order\"\n                tabindex=\"-1\"\n                [class.is-asc]=\"\n                  getColumnSortState(column) === SortDirection.ASC\n                \"\n                [class.is-desc]=\"\n                  getColumnSortState(column) === SortDirection.DESC\n                \"\n                [class.has-multiple-sorts]=\"\n                  isMultiColumnSortEnabled() &&\n                  getColumnSortPriority(column) !== null\n                \"\n                [title]=\"getSortButtonTitle(column)\"\n                (click)=\"onColumnHeaderClick(column)\"\n              >\n                {{ column.label | translate }}\n                <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n                <span class=\"c-table-order__controls\">\n                  <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n                  <span\n                    class=\"c-table-order__arrow--asc icon-arrow-down\"\n                  ></span>\n                </span>\n              </button>\n            } @else {\n              {{ column.label | translate }}\n            }\n          </th>\n        }\n        @if (\n          showActions() && (actions().length > 0 || customActions().length > 0)\n        ) {\n          <th class=\"u-align-right\">{{ \"table.actions\" | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n        <tr\n          [ngClass]=\"getRowClasses(row)\"\n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\"\n        >\n          @if (showSelection()) {\n            <!-- Todo: Tabla con row selection -->\n            <td class=\"select-column\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRow(row)\"\n              />\n            </td>\n          }\n          @for (column of columns(); track $index) {\n            <td\n              [attr.data-label]=\"column.label | translate\"\n              [ngClass]=\"[\n                column.align ? 'u-align-' + column.align : '',\n                getCellDisabledClasses(row, column),\n              ]\"\n              [class.is-editing]=\"isColumnEditable(column, row)\"\n              [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\"\n            >\n              @if (column.template) {\n                <!-- Todo: Ver qu\u00E9 es esto -->\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    column.template;\n                    context: { $implicit: row, column: column }\n                  \"\n                ></ng-container>\n              } @else if (isColumnEditable(column, row)) {\n                <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n                <div class=\"c-table__inline-edit\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  <div\n                    coreDynamicField\n                    [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                    [value]=\"getEditingValue(row, column)\"\n                    [mode]=\"ModalMode.EDIT\"\n                    [errors]=\"getCellErrors(row, column)\"\n                    [rowData]=\"row\"\n                    (valueChange)=\"onCellValueChange(row, column, $event)\"\n                    (onBlurEvent)=\"onCellBlur(row, column)\"\n                    (onEnterEvent)=\"onCellEnter(row, column)\"\n                  ></div>\n                </div>\n              } @else {\n                <div class=\"c-table__content\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  {{ getFormattedValue(row, column) }}\n                </div>\n              }\n            </td>\n          }\n\n          <!-- Actions-->\n\n          @if (\n            showActions() &&\n            (actions().length > 0 ||\n              customActions().length > 0 ||\n              expansionConfig()?.enabled)\n          ) {\n            <td class=\"u-align-right\">\n              <div class=\"c-table__actions\">\n                <core-dropdown\n                  [rowId]=\"row.getId()\"\n                  [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                  [extraCustomActions]=\"getVisibleCustomActions(row, true)\"\n                  [row]=\"row\"\n                  [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                  (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                  (customActionTriggered)=\"\n                    triggerCustomAction($event.action, $event.row)\n                  \"\n                  #dropdown\n                >\n                </core-dropdown>\n                @for (\n                  actionConfig of getVisibleDefaultActions(row, false);\n                  track actionConfig.action\n                ) {\n                  @if (hasPermission(actionConfig)) {\n                    @if (\n                      actionConfig.action === TableAction.VIEW ||\n                      actionConfig.action === TableAction.EDIT ||\n                      actionConfig.action === TableAction.DELETE ||\n                      actionConfig.action === TableAction.RECOVER\n                    ) {\n                      <core-generic-button\n                        [config]=\"\n                          getActionButtonConfig(\n                            actionConfig.action,\n                            actionConfig,\n                            row\n                          )\n                        \"\n                        (buttonClick)=\"\n                          onButtonClick($event, actionConfig.action, row)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n                @for (\n                  customAction of getVisibleCustomActions(row, false);\n                  track customAction.label || $index\n                ) {\n                  @if (hasPermission(customAction)) {\n                    @if (customAction.isSwitch && customAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"customAction.switchOptions\"\n                        [selectedValue]=\"\n                          customAction.switchValue\n                            ? customAction.switchValue(row)\n                            : null\n                        \"\n                        [ariaLabel]=\"\n                          customAction.switchAriaLabel || customAction.title\n                        \"\n                        (valueChange)=\"\n                          onCustomActionSwitchChange($event, customAction, row)\n                        \"\n                      >\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button\n                        [config]=\"\n                          getCustomActionButtonConfigForRow(customAction, row)\n                        \"\n                        (buttonClick)=\"onButtonClick($event, customAction, row)\"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @for (\n                  outsideAction of getOutsideFixedActionsForRow(row);\n                  track $index\n                ) {\n                  @if (\n                    outsideAction.type === \"table\" ||\n                    outsideAction.type === \"custom\"\n                      ? hasPermission(outsideAction.config)\n                      : true\n                  ) {\n                    <core-generic-button\n                      [config]=\"\n                        getOutsideFixedActionButtonConfig(outsideAction, row)\n                      \"\n                      (buttonClick)=\"\n                        onOutsideFixedActionClick($event, outsideAction, row)\n                      \"\n                    >\n                    </core-generic-button>\n                  }\n                }\n\n                @if (hasExtraActionsForRow(row)) {\n                  <core-generic-button\n                    [config]=\"getMoreActionsButtonConfig(row.getId())\"\n                    [data]=\"row\"\n                    (buttonClick)=\"onMoreActionsClick($event, row.getId())\"\n                    #dropdownTrigger\n                  >\n                  </core-generic-button>\n                }\n\n                @if (expansionConfig()?.enabled) {\n                  <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n                  <core-generic-button\n                    [config]=\"getExpandButtonConfig(row)\"\n                    (buttonClick)=\"onExpandButtonClick($event, row)\"\n                  >\n                  </core-generic-button>\n                }\n              </div>\n              <!-- .c-table__actions -->\n            </td>\n            <!-- td parent of .c-table__actions -->\n          }\n          <!-- @if (showActions() -->\n        </tr>\n        @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n          <!-- Todo: Ver que es esto -->\n          <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n            <td\n              [attr.colspan]=\"displayedColumns().length\"\n              class=\"c-table-dropdown__holder\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  expansionConfig()!.template;\n                  context: { $implicit: row }\n                \"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ \"table.noData\" | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n  <!-- Todo: Ver qu\u00E9 onda esto -->\n  <div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n  <core-generic-pagination\n    [tableId]=\"tableId\"\n    [isServerSide]=\"!!endpoint()\"\n    [showPagination]=\"shouldShowPagination()\"\n    [showPageSizeSelector]=\"shouldShowPageSizeSelector()\"\n  >\n  </core-generic-pagination>\n}\n\n<core-generic-modal\n  [isOpen]=\"tableActionService.getIsModalOpen()\"\n  [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\"\n  [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\"\n  [title]=\"tableActionService.getModalTitle()\"\n  [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\"\n  (close)=\"tableActionService.closeModal()\"\n  (modalData)=\"onModalData($event)\"\n>\n</core-generic-modal>\n\n<core-filter-modal\n  [isOpen]=\"isFilterModalOpen()\"\n  [filters]=\"modalFilters()\"\n  [currentFilterValues]=\"currentFilterValues()\"\n  (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\"\n  (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\"\n>\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide", "showPagination", "showPageSizeSelector"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }, { kind: "component", type: CoreManualRefreshComponent, selector: "core-manual-refresh", inputs: ["config", "refreshId"], outputs: ["onRefresh", "timestampUpdated"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonText: { classPropertyName: "createButtonText", publicName: "createButtonText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, listSubTitle: { classPropertyName: "listSubTitle", publicName: "listSubTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", isSignal: true, isRequired: false, transformFunction: null }, showManualRefresh: { classPropertyName: "showManualRefresh", publicName: "showManualRefresh", isSignal: true, isRequired: false, transformFunction: null }, manualRefreshConfig: { classPropertyName: "manualRefreshConfig", publicName: "manualRefreshConfig", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonConfig: { classPropertyName: "refreshButtonConfig", publicName: "refreshButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, fixedActionsConfig: { classPropertyName: "fixedActionsConfig", publicName: "fixedActionsConfig", isSignal: true, isRequired: false, transformFunction: null }, deletedFilterKey: { classPropertyName: "deletedFilterKey", publicName: "deletedFilterKey", isSignal: true, isRequired: false, transformFunction: null }, scrollTable: { classPropertyName: "scrollTable", publicName: "scrollTable", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", dataRefreshed: "dataRefreshed", modalClosed: "modalClosed", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "manualRefreshComponent", first: true, predicate: CoreManualRefreshComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\"\n  >\n  </core-active-filters>\n}\n<div\n  class=\"c-table\"\n  [class.c-table--scroll]=\"scrollTable()\"\n  [class.in-modal]=\"inModal()\"\n  [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\"\n>\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh\n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\"\n    >\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n          <!-- Todo: Tabla con row selection -->\n          <th class=\"select-column\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              (change)=\"masterToggle()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track $index) {\n          <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n            @if (isColumnSortable(column)) {\n              <button\n                class=\"c-table-order\"\n                tabindex=\"-1\"\n                [class.is-asc]=\"\n                  getColumnSortState(column) === SortDirection.ASC\n                \"\n                [class.is-desc]=\"\n                  getColumnSortState(column) === SortDirection.DESC\n                \"\n                [class.has-multiple-sorts]=\"\n                  isMultiColumnSortEnabled() &&\n                  getColumnSortPriority(column) !== null\n                \"\n                [title]=\"getSortButtonTitle(column)\"\n                (click)=\"onColumnHeaderClick(column)\"\n              >\n                {{ column.label | translate }}\n                <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n                <span class=\"c-table-order__controls\">\n                  <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n                  <span\n                    class=\"c-table-order__arrow--asc icon-arrow-down\"\n                  ></span>\n                </span>\n              </button>\n            } @else {\n              {{ column.label | translate }}\n            }\n          </th>\n        }\n        @if (\n          showActions() && (actions().length > 0 || customActions().length > 0)\n        ) {\n          <th class=\"u-align-right\">{{ \"table.actions\" | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n        <tr\n          [ngClass]=\"getRowClasses(row)\"\n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\"\n        >\n          @if (showSelection()) {\n            <!-- Todo: Tabla con row selection -->\n            <td class=\"select-column\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRow(row)\"\n              />\n            </td>\n          }\n          @for (column of columns(); track $index) {\n            <td\n              [attr.data-label]=\"column.label | translate\"\n              [ngClass]=\"[\n                column.align ? 'u-align-' + column.align : '',\n                getCellDisabledClasses(row, column),\n              ]\"\n              [class.is-editing]=\"isColumnEditable(column, row)\"\n              [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\"\n            >\n              @if (column.template) {\n                <!-- Todo: Ver qu\u00E9 es esto -->\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    column.template;\n                    context: { $implicit: row, column: column }\n                  \"\n                ></ng-container>\n              } @else if (isColumnEditable(column, row)) {\n                <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n                <div class=\"c-table__inline-edit\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  <div\n                    coreDynamicField\n                    [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                    [value]=\"getEditingValue(row, column)\"\n                    [mode]=\"ModalMode.EDIT\"\n                    [errors]=\"getCellErrors(row, column)\"\n                    [rowData]=\"row\"\n                    (valueChange)=\"onCellValueChange(row, column, $event)\"\n                    (onBlurEvent)=\"onCellBlur(row, column)\"\n                    (onEnterEvent)=\"onCellEnter(row, column)\"\n                  ></div>\n                </div>\n              } @else {\n                <div class=\"c-table__content\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  {{ getFormattedValue(row, column) }}\n                </div>\n              }\n            </td>\n          }\n\n          <!-- Actions-->\n\n          @if (\n            showActions() &&\n            (actions().length > 0 ||\n              customActions().length > 0 ||\n              expansionConfig()?.enabled)\n          ) {\n            <td class=\"u-align-right\">\n              <div class=\"c-table__actions\">\n                <core-dropdown\n                  [rowId]=\"row.getId()\"\n                  [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                  [extraCustomActions]=\"getVisibleCustomActions(row, true)\"\n                  [row]=\"row\"\n                  [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                  (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                  (customActionTriggered)=\"\n                    triggerCustomAction($event.action, $event.row)\n                  \"\n                  #dropdown\n                >\n                </core-dropdown>\n                @for (\n                  actionConfig of getVisibleDefaultActions(row, false);\n                  track actionConfig.action\n                ) {\n                  @if (hasPermission(actionConfig)) {\n                    @if (\n                      actionConfig.action === TableAction.VIEW ||\n                      actionConfig.action === TableAction.EDIT ||\n                      actionConfig.action === TableAction.DELETE ||\n                      actionConfig.action === TableAction.RECOVER\n                    ) {\n                      <core-generic-button\n                        [config]=\"\n                          getActionButtonConfig(\n                            actionConfig.action,\n                            actionConfig,\n                            row\n                          )\n                        \"\n                        (buttonClick)=\"\n                          onButtonClick($event, actionConfig.action, row)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n                @for (\n                  customAction of getVisibleCustomActions(row, false);\n                  track customAction.label || $index\n                ) {\n                  @if (hasPermission(customAction)) {\n                    @if (customAction.isSwitch && customAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"customAction.switchOptions\"\n                        [selectedValue]=\"\n                          customAction.switchValue\n                            ? customAction.switchValue(row)\n                            : null\n                        \"\n                        [ariaLabel]=\"\n                          customAction.switchAriaLabel || customAction.title\n                        \"\n                        (valueChange)=\"\n                          onCustomActionSwitchChange($event, customAction, row)\n                        \"\n                      >\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button\n                        [config]=\"\n                          getCustomActionButtonConfigForRow(customAction, row)\n                        \"\n                        (buttonClick)=\"onButtonClick($event, customAction, row)\"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @for (\n                  outsideAction of getOutsideFixedActionsForRow(row);\n                  track $index\n                ) {\n                  @if (\n                    outsideAction.type === \"table\" ||\n                    outsideAction.type === \"custom\"\n                      ? hasPermission(outsideAction.config)\n                      : true\n                  ) {\n                    <core-generic-button\n                      [config]=\"\n                        getOutsideFixedActionButtonConfig(outsideAction, row)\n                      \"\n                      (buttonClick)=\"\n                        onOutsideFixedActionClick($event, outsideAction, row)\n                      \"\n                    >\n                    </core-generic-button>\n                  }\n                }\n\n                @if (hasExtraActionsForRow(row)) {\n                  <core-generic-button\n                    [config]=\"getMoreActionsButtonConfig(row.getId())\"\n                    [data]=\"row\"\n                    (buttonClick)=\"onMoreActionsClick($event, row.getId())\"\n                    #dropdownTrigger\n                  >\n                  </core-generic-button>\n                }\n\n                @if (expansionConfig()?.enabled) {\n                  <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n                  <core-generic-button\n                    [config]=\"getExpandButtonConfig(row)\"\n                    (buttonClick)=\"onExpandButtonClick($event, row)\"\n                  >\n                  </core-generic-button>\n                }\n              </div>\n              <!-- .c-table__actions -->\n            </td>\n            <!-- td parent of .c-table__actions -->\n          }\n          <!-- @if (showActions() -->\n        </tr>\n        @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n          <!-- Todo: Ver que es esto -->\n          <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n            <td\n              [attr.colspan]=\"displayedColumns().length\"\n              class=\"c-table-dropdown__holder\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  expansionConfig()!.template;\n                  context: { $implicit: row }\n                \"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ \"table.noData\" | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n  <!-- Todo: Ver qu\u00E9 onda esto -->\n  <div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n  <core-generic-pagination\n    [tableId]=\"tableId\"\n    [isServerSide]=\"!!endpoint()\"\n    [showPagination]=\"shouldShowPagination()\"\n    [showPageSizeSelector]=\"shouldShowPageSizeSelector()\"\n  >\n  </core-generic-pagination>\n}\n\n<core-generic-modal\n  [isOpen]=\"tableActionService.getIsModalOpen()\"\n  [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\"\n  [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\"\n  [title]=\"tableActionService.getModalTitle()\"\n  [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\"\n  (close)=\"closeModal()\"\n  (modalData)=\"onModalData($event)\"\n>\n</core-generic-modal>\n\n<core-filter-modal\n  [isOpen]=\"isFilterModalOpen()\"\n  [filters]=\"modalFilters()\"\n  [currentFilterValues]=\"currentFilterValues()\"\n  (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\"\n  (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\"\n>\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide", "showPagination", "showPageSizeSelector"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }, { kind: "component", type: CoreManualRefreshComponent, selector: "core-manual-refresh", inputs: ["config", "refreshId"], outputs: ["onRefresh", "timestampUpdated"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -15467,7 +15474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CoreManualRefreshComponent,
                         GenericSwitchComponent,
                         FixedActionsMobileModalComponent,
-                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\"\n  >\n  </core-active-filters>\n}\n<div\n  class=\"c-table\"\n  [class.c-table--scroll]=\"scrollTable()\"\n  [class.in-modal]=\"inModal()\"\n  [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\"\n>\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh\n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\"\n    >\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n          <!-- Todo: Tabla con row selection -->\n          <th class=\"select-column\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              (change)=\"masterToggle()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track $index) {\n          <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n            @if (isColumnSortable(column)) {\n              <button\n                class=\"c-table-order\"\n                tabindex=\"-1\"\n                [class.is-asc]=\"\n                  getColumnSortState(column) === SortDirection.ASC\n                \"\n                [class.is-desc]=\"\n                  getColumnSortState(column) === SortDirection.DESC\n                \"\n                [class.has-multiple-sorts]=\"\n                  isMultiColumnSortEnabled() &&\n                  getColumnSortPriority(column) !== null\n                \"\n                [title]=\"getSortButtonTitle(column)\"\n                (click)=\"onColumnHeaderClick(column)\"\n              >\n                {{ column.label | translate }}\n                <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n                <span class=\"c-table-order__controls\">\n                  <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n                  <span\n                    class=\"c-table-order__arrow--asc icon-arrow-down\"\n                  ></span>\n                </span>\n              </button>\n            } @else {\n              {{ column.label | translate }}\n            }\n          </th>\n        }\n        @if (\n          showActions() && (actions().length > 0 || customActions().length > 0)\n        ) {\n          <th class=\"u-align-right\">{{ \"table.actions\" | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n        <tr\n          [ngClass]=\"getRowClasses(row)\"\n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\"\n        >\n          @if (showSelection()) {\n            <!-- Todo: Tabla con row selection -->\n            <td class=\"select-column\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRow(row)\"\n              />\n            </td>\n          }\n          @for (column of columns(); track $index) {\n            <td\n              [attr.data-label]=\"column.label | translate\"\n              [ngClass]=\"[\n                column.align ? 'u-align-' + column.align : '',\n                getCellDisabledClasses(row, column),\n              ]\"\n              [class.is-editing]=\"isColumnEditable(column, row)\"\n              [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\"\n            >\n              @if (column.template) {\n                <!-- Todo: Ver qu\u00E9 es esto -->\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    column.template;\n                    context: { $implicit: row, column: column }\n                  \"\n                ></ng-container>\n              } @else if (isColumnEditable(column, row)) {\n                <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n                <div class=\"c-table__inline-edit\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  <div\n                    coreDynamicField\n                    [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                    [value]=\"getEditingValue(row, column)\"\n                    [mode]=\"ModalMode.EDIT\"\n                    [errors]=\"getCellErrors(row, column)\"\n                    [rowData]=\"row\"\n                    (valueChange)=\"onCellValueChange(row, column, $event)\"\n                    (onBlurEvent)=\"onCellBlur(row, column)\"\n                    (onEnterEvent)=\"onCellEnter(row, column)\"\n                  ></div>\n                </div>\n              } @else {\n                <div class=\"c-table__content\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  {{ getFormattedValue(row, column) }}\n                </div>\n              }\n            </td>\n          }\n\n          <!-- Actions-->\n\n          @if (\n            showActions() &&\n            (actions().length > 0 ||\n              customActions().length > 0 ||\n              expansionConfig()?.enabled)\n          ) {\n            <td class=\"u-align-right\">\n              <div class=\"c-table__actions\">\n                <core-dropdown\n                  [rowId]=\"row.getId()\"\n                  [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                  [extraCustomActions]=\"getVisibleCustomActions(row, true)\"\n                  [row]=\"row\"\n                  [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                  (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                  (customActionTriggered)=\"\n                    triggerCustomAction($event.action, $event.row)\n                  \"\n                  #dropdown\n                >\n                </core-dropdown>\n                @for (\n                  actionConfig of getVisibleDefaultActions(row, false);\n                  track actionConfig.action\n                ) {\n                  @if (hasPermission(actionConfig)) {\n                    @if (\n                      actionConfig.action === TableAction.VIEW ||\n                      actionConfig.action === TableAction.EDIT ||\n                      actionConfig.action === TableAction.DELETE ||\n                      actionConfig.action === TableAction.RECOVER\n                    ) {\n                      <core-generic-button\n                        [config]=\"\n                          getActionButtonConfig(\n                            actionConfig.action,\n                            actionConfig,\n                            row\n                          )\n                        \"\n                        (buttonClick)=\"\n                          onButtonClick($event, actionConfig.action, row)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n                @for (\n                  customAction of getVisibleCustomActions(row, false);\n                  track customAction.label || $index\n                ) {\n                  @if (hasPermission(customAction)) {\n                    @if (customAction.isSwitch && customAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"customAction.switchOptions\"\n                        [selectedValue]=\"\n                          customAction.switchValue\n                            ? customAction.switchValue(row)\n                            : null\n                        \"\n                        [ariaLabel]=\"\n                          customAction.switchAriaLabel || customAction.title\n                        \"\n                        (valueChange)=\"\n                          onCustomActionSwitchChange($event, customAction, row)\n                        \"\n                      >\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button\n                        [config]=\"\n                          getCustomActionButtonConfigForRow(customAction, row)\n                        \"\n                        (buttonClick)=\"onButtonClick($event, customAction, row)\"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @for (\n                  outsideAction of getOutsideFixedActionsForRow(row);\n                  track $index\n                ) {\n                  @if (\n                    outsideAction.type === \"table\" ||\n                    outsideAction.type === \"custom\"\n                      ? hasPermission(outsideAction.config)\n                      : true\n                  ) {\n                    <core-generic-button\n                      [config]=\"\n                        getOutsideFixedActionButtonConfig(outsideAction, row)\n                      \"\n                      (buttonClick)=\"\n                        onOutsideFixedActionClick($event, outsideAction, row)\n                      \"\n                    >\n                    </core-generic-button>\n                  }\n                }\n\n                @if (hasExtraActionsForRow(row)) {\n                  <core-generic-button\n                    [config]=\"getMoreActionsButtonConfig(row.getId())\"\n                    [data]=\"row\"\n                    (buttonClick)=\"onMoreActionsClick($event, row.getId())\"\n                    #dropdownTrigger\n                  >\n                  </core-generic-button>\n                }\n\n                @if (expansionConfig()?.enabled) {\n                  <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n                  <core-generic-button\n                    [config]=\"getExpandButtonConfig(row)\"\n                    (buttonClick)=\"onExpandButtonClick($event, row)\"\n                  >\n                  </core-generic-button>\n                }\n              </div>\n              <!-- .c-table__actions -->\n            </td>\n            <!-- td parent of .c-table__actions -->\n          }\n          <!-- @if (showActions() -->\n        </tr>\n        @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n          <!-- Todo: Ver que es esto -->\n          <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n            <td\n              [attr.colspan]=\"displayedColumns().length\"\n              class=\"c-table-dropdown__holder\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  expansionConfig()!.template;\n                  context: { $implicit: row }\n                \"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ \"table.noData\" | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n  <!-- Todo: Ver qu\u00E9 onda esto -->\n  <div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n  <core-generic-pagination\n    [tableId]=\"tableId\"\n    [isServerSide]=\"!!endpoint()\"\n    [showPagination]=\"shouldShowPagination()\"\n    [showPageSizeSelector]=\"shouldShowPageSizeSelector()\"\n  >\n  </core-generic-pagination>\n}\n\n<core-generic-modal\n  [isOpen]=\"tableActionService.getIsModalOpen()\"\n  [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\"\n  [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\"\n  [title]=\"tableActionService.getModalTitle()\"\n  [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\"\n  (close)=\"tableActionService.closeModal()\"\n  (modalData)=\"onModalData($event)\"\n>\n</core-generic-modal>\n\n<core-filter-modal\n  [isOpen]=\"isFilterModalOpen()\"\n  [filters]=\"modalFilters()\"\n  [currentFilterValues]=\"currentFilterValues()\"\n  (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\"\n  (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\"\n>\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"] }]
+                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\"\n  >\n  </core-active-filters>\n}\n<div\n  class=\"c-table\"\n  [class.c-table--scroll]=\"scrollTable()\"\n  [class.in-modal]=\"inModal()\"\n  [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\"\n>\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh\n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\"\n    >\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n          <!-- Todo: Tabla con row selection -->\n          <th class=\"select-column\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              (change)=\"masterToggle()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track $index) {\n          <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n            @if (isColumnSortable(column)) {\n              <button\n                class=\"c-table-order\"\n                tabindex=\"-1\"\n                [class.is-asc]=\"\n                  getColumnSortState(column) === SortDirection.ASC\n                \"\n                [class.is-desc]=\"\n                  getColumnSortState(column) === SortDirection.DESC\n                \"\n                [class.has-multiple-sorts]=\"\n                  isMultiColumnSortEnabled() &&\n                  getColumnSortPriority(column) !== null\n                \"\n                [title]=\"getSortButtonTitle(column)\"\n                (click)=\"onColumnHeaderClick(column)\"\n              >\n                {{ column.label | translate }}\n                <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n                <span class=\"c-table-order__controls\">\n                  <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n                  <span\n                    class=\"c-table-order__arrow--asc icon-arrow-down\"\n                  ></span>\n                </span>\n              </button>\n            } @else {\n              {{ column.label | translate }}\n            }\n          </th>\n        }\n        @if (\n          showActions() && (actions().length > 0 || customActions().length > 0)\n        ) {\n          <th class=\"u-align-right\">{{ \"table.actions\" | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n        <tr\n          [ngClass]=\"getRowClasses(row)\"\n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\"\n        >\n          @if (showSelection()) {\n            <!-- Todo: Tabla con row selection -->\n            <td class=\"select-column\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRow(row)\"\n              />\n            </td>\n          }\n          @for (column of columns(); track $index) {\n            <td\n              [attr.data-label]=\"column.label | translate\"\n              [ngClass]=\"[\n                column.align ? 'u-align-' + column.align : '',\n                getCellDisabledClasses(row, column),\n              ]\"\n              [class.is-editing]=\"isColumnEditable(column, row)\"\n              [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\"\n            >\n              @if (column.template) {\n                <!-- Todo: Ver qu\u00E9 es esto -->\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    column.template;\n                    context: { $implicit: row, column: column }\n                  \"\n                ></ng-container>\n              } @else if (isColumnEditable(column, row)) {\n                <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n                <div class=\"c-table__inline-edit\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  <div\n                    coreDynamicField\n                    [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                    [value]=\"getEditingValue(row, column)\"\n                    [mode]=\"ModalMode.EDIT\"\n                    [errors]=\"getCellErrors(row, column)\"\n                    [rowData]=\"row\"\n                    (valueChange)=\"onCellValueChange(row, column, $event)\"\n                    (onBlurEvent)=\"onCellBlur(row, column)\"\n                    (onEnterEvent)=\"onCellEnter(row, column)\"\n                  ></div>\n                </div>\n              } @else {\n                <div class=\"c-table__content\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  {{ getFormattedValue(row, column) }}\n                </div>\n              }\n            </td>\n          }\n\n          <!-- Actions-->\n\n          @if (\n            showActions() &&\n            (actions().length > 0 ||\n              customActions().length > 0 ||\n              expansionConfig()?.enabled)\n          ) {\n            <td class=\"u-align-right\">\n              <div class=\"c-table__actions\">\n                <core-dropdown\n                  [rowId]=\"row.getId()\"\n                  [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                  [extraCustomActions]=\"getVisibleCustomActions(row, true)\"\n                  [row]=\"row\"\n                  [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                  (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                  (customActionTriggered)=\"\n                    triggerCustomAction($event.action, $event.row)\n                  \"\n                  #dropdown\n                >\n                </core-dropdown>\n                @for (\n                  actionConfig of getVisibleDefaultActions(row, false);\n                  track actionConfig.action\n                ) {\n                  @if (hasPermission(actionConfig)) {\n                    @if (\n                      actionConfig.action === TableAction.VIEW ||\n                      actionConfig.action === TableAction.EDIT ||\n                      actionConfig.action === TableAction.DELETE ||\n                      actionConfig.action === TableAction.RECOVER\n                    ) {\n                      <core-generic-button\n                        [config]=\"\n                          getActionButtonConfig(\n                            actionConfig.action,\n                            actionConfig,\n                            row\n                          )\n                        \"\n                        (buttonClick)=\"\n                          onButtonClick($event, actionConfig.action, row)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n                @for (\n                  customAction of getVisibleCustomActions(row, false);\n                  track customAction.label || $index\n                ) {\n                  @if (hasPermission(customAction)) {\n                    @if (customAction.isSwitch && customAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"customAction.switchOptions\"\n                        [selectedValue]=\"\n                          customAction.switchValue\n                            ? customAction.switchValue(row)\n                            : null\n                        \"\n                        [ariaLabel]=\"\n                          customAction.switchAriaLabel || customAction.title\n                        \"\n                        (valueChange)=\"\n                          onCustomActionSwitchChange($event, customAction, row)\n                        \"\n                      >\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button\n                        [config]=\"\n                          getCustomActionButtonConfigForRow(customAction, row)\n                        \"\n                        (buttonClick)=\"onButtonClick($event, customAction, row)\"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @for (\n                  outsideAction of getOutsideFixedActionsForRow(row);\n                  track $index\n                ) {\n                  @if (\n                    outsideAction.type === \"table\" ||\n                    outsideAction.type === \"custom\"\n                      ? hasPermission(outsideAction.config)\n                      : true\n                  ) {\n                    <core-generic-button\n                      [config]=\"\n                        getOutsideFixedActionButtonConfig(outsideAction, row)\n                      \"\n                      (buttonClick)=\"\n                        onOutsideFixedActionClick($event, outsideAction, row)\n                      \"\n                    >\n                    </core-generic-button>\n                  }\n                }\n\n                @if (hasExtraActionsForRow(row)) {\n                  <core-generic-button\n                    [config]=\"getMoreActionsButtonConfig(row.getId())\"\n                    [data]=\"row\"\n                    (buttonClick)=\"onMoreActionsClick($event, row.getId())\"\n                    #dropdownTrigger\n                  >\n                  </core-generic-button>\n                }\n\n                @if (expansionConfig()?.enabled) {\n                  <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n                  <core-generic-button\n                    [config]=\"getExpandButtonConfig(row)\"\n                    (buttonClick)=\"onExpandButtonClick($event, row)\"\n                  >\n                  </core-generic-button>\n                }\n              </div>\n              <!-- .c-table__actions -->\n            </td>\n            <!-- td parent of .c-table__actions -->\n          }\n          <!-- @if (showActions() -->\n        </tr>\n        @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n          <!-- Todo: Ver que es esto -->\n          <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n            <td\n              [attr.colspan]=\"displayedColumns().length\"\n              class=\"c-table-dropdown__holder\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  expansionConfig()!.template;\n                  context: { $implicit: row }\n                \"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ \"table.noData\" | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n  <!-- Todo: Ver qu\u00E9 onda esto -->\n  <div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n  <core-generic-pagination\n    [tableId]=\"tableId\"\n    [isServerSide]=\"!!endpoint()\"\n    [showPagination]=\"shouldShowPagination()\"\n    [showPageSizeSelector]=\"shouldShowPageSizeSelector()\"\n  >\n  </core-generic-pagination>\n}\n\n<core-generic-modal\n  [isOpen]=\"tableActionService.getIsModalOpen()\"\n  [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\"\n  [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\"\n  [title]=\"tableActionService.getModalTitle()\"\n  [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\"\n  (close)=\"closeModal()\"\n  (modalData)=\"onModalData($event)\"\n>\n</core-generic-modal>\n\n<core-filter-modal\n  [isOpen]=\"isFilterModalOpen()\"\n  [filters]=\"modalFilters()\"\n  [currentFilterValues]=\"currentFilterValues()\"\n  (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\"\n  (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\"\n>\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sentinel: [{
                 type: ViewChild,
                 args: ['sentinel', { static: false }]
@@ -17199,12 +17206,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.20.10',
+    full: '2.20.13',
     major: 2,
     minor: 20,
-    patch: 10,
-    timestamp: '2026-02-03T16:21:27.114Z',
-    buildDate: '3/2/2026'
+    patch: 13,
+    timestamp: '2026-02-06T12:08:17.601Z',
+    buildDate: '6/2/2026'
 };
 
 class MainNavComponent {
@@ -21844,6 +21851,9 @@ class GenericSchedulerComponent {
     eventClick = output();
     eventHover = output();
     eventLeave = output();
+    eventApprove = output();
+    eventReject = output();
+    eventCancel = output();
     todayClick = output();
     previousDay = output();
     nextDay = output();
@@ -21857,13 +21867,30 @@ class GenericSchedulerComponent {
     expandedDay = signal(null);
     timeUpdateInterval = null;
     mergedConfig = computed(() => ({ ...DEFAULT_SCHEDULER_CONFIG, ...this.config() }));
+    getNow() {
+        const now = new Date();
+        const cfg = this.mergedConfig();
+        if (cfg.timezone) {
+            const match = cfg.timezone.match(/gmt([+-]?\d+)/i);
+            if (match) {
+                const offset = parseInt(match[1], 10);
+                return new Date(now.getTime() + (offset * 3600000));
+            }
+        }
+        else {
+            // Use system timezone
+            const offsetMinutes = now.getTimezoneOffset();
+            return new Date(now.getTime() - (offsetMinutes * 60000));
+        }
+        return now;
+    }
     viewMode = computed(() => this.mergedConfig().viewMode || 'day');
     weekDays = computed(() => {
         if (this.viewMode() !== 'week')
             return [];
         const selected = this.selectedDate();
         const localeValue = this.locale();
-        const today = new Date();
+        const today = this.getNow();
         const dayOfWeek = selected.getUTCDay();
         const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
         const monday = new Date(Date.UTC(selected.getUTCFullYear(), selected.getUTCMonth(), selected.getUTCDate() + mondayOffset));
@@ -21888,7 +21915,7 @@ class GenericSchedulerComponent {
             return [];
         const selected = this.selectedDate();
         const localeValue = this.locale();
-        const today = new Date();
+        const today = this.getNow();
         const year = selected.getUTCFullYear();
         const month = selected.getUTCMonth();
         const firstDayOfMonth = new Date(Date.UTC(year, month, 1));
@@ -21913,7 +21940,7 @@ class GenericSchedulerComponent {
     });
     isToday = computed(() => {
         const selected = this.selectedDate();
-        const today = new Date();
+        const today = this.getNow();
         return selected.getUTCFullYear() === today.getUTCFullYear() &&
             selected.getUTCMonth() === today.getUTCMonth() &&
             selected.getUTCDate() === today.getUTCDate();
@@ -22023,9 +22050,9 @@ class GenericSchedulerComponent {
         this.timeSlots.set(slots);
     }
     startTimeUpdater() {
-        this.currentTime.set(new Date());
+        this.currentTime.set(this.getNow());
         this.timeUpdateInterval = setInterval(() => {
-            this.currentTime.set(new Date());
+            this.currentTime.set(this.getNow());
         }, 60000);
     }
     stopTimeUpdater() {
@@ -22063,7 +22090,7 @@ class GenericSchedulerComponent {
         return slotMinutes >= startMinutes && slotMinutes < endMinutes;
     }
     isSlotDisabled(columnId, slot) {
-        const now = new Date();
+        const now = this.getNow();
         const selected = this.selectedDate();
         const dateStr = selected.toISOString().split('T')[0];
         if (this.disabledDates().includes(dateStr)) {
@@ -22204,7 +22231,7 @@ class GenericSchedulerComponent {
         if (this.isDayDisabled(dayDate)) {
             return true;
         }
-        const now = new Date();
+        const now = this.getNow();
         const todayUTC = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
         const dayUTC = Date.UTC(dayDate.getUTCFullYear(), dayDate.getUTCMonth(), dayDate.getUTCDate());
         if (dayUTC < todayUTC) {
@@ -22278,8 +22305,17 @@ class GenericSchedulerComponent {
         const dayNum = day.getUTCDate();
         return `${weekday}\n${dayNum}`;
     }
+    onApproveClick(event, column) {
+        this.eventApprove.emit({ event, column });
+    }
+    onRejectClick(event, column) {
+        this.eventReject.emit({ event, column });
+    }
+    onCancelClick(event, column) {
+        this.eventCancel.emit({ event, column });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSchedulerComponent, isStandalone: true, selector: "core-generic-scheduler", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showTimeColumn: { classPropertyName: "showTimeColumn", publicName: "showTimeColumn", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, emptySlotLabel: { classPropertyName: "emptySlotLabel", publicName: "emptySlotLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledSlotLabel: { classPropertyName: "disabledSlotLabel", publicName: "disabledSlotLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClick: "slotClick", eventClick: "eventClick", eventHover: "eventHover", eventLeave: "eventLeave", todayClick: "todayClick", previousDay: "previousDay", nextDay: "nextDay", previousWeek: "previousWeek", nextWeek: "nextWeek", previousMonth: "previousMonth", nextMonth: "nextMonth", viewModeChange: "viewModeChange" }, host: { properties: { "class.c-bookings-grid--weekly": "viewMode() === \"week\"", "style.--cols": "columns().length" }, classAttribute: "c-bookings-grid c-bookings-card" }, ngImport: i0, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n      (click)=\"onPrevious()\"\n    ></button>\n    <span>{{ formattedDate() }}</span>\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n      (click)=\"onNext()\"\n    ></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'day'\"\n      (click)=\"setViewMode('day')\"\n    >\n      {{ dayLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'week'\"\n      (click)=\"setViewMode('week')\"\n    >\n      {{ weekLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\"\n    >\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper\"\n  [style.--cols]=\"columns().length\"\n  style=\"position: relative\"\n>\n  @if (isToday() && currentTimePosition() !== null) {\n  <div\n    class=\"c-bookings-grid__current-time-line\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n      slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      >\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onSlotClick(column.id, slot)\"\n      >\n        {{ emptySlotLabel() }}\n      </button>\n      } } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n\n        @if (event.canCancel) {\n        <button\n          class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button\n            class=\"c-icon-btn--fill context:success icon-check\"\n            title=\"Aprobar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          } @if (event.canReject) {\n          <button\n            class=\"c-icon-btn--fill context:error icon-cross\"\n            title=\"Rechazar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n  [style.--cols]=\"7\"\n  style=\"position: relative\"\n>\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div\n    class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n    [style.--day-index]=\"currentTimeDayIndex()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div\n    class=\"c-bookings-grid__col\"\n    [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n  >\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span\n          class=\"c-bookings-grid__day-number\"\n          [class.is-today]=\"day.isToday\"\n          >{{ day.dayNumber }}</span\n        >\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      ></button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"\n      ></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div\n      class=\"c-bookings-grid__month-cell\"\n      [class.is-today]=\"day.isToday\"\n      [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \"\n      [class.is-disabled]=\"isDayDisabled(day.date)\"\n      (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n    >\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div\n          class=\"c-bookings-grid__more-events\"\n          (click)=\"openDayPopover(day.date, $event)\"\n        >\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n          }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n          }}</span>\n        </div>\n        <button\n          class=\"c-bookings-grid__popover-close\"\n          (click)=\"closeDayPopover()\"\n        >\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSchedulerComponent, isStandalone: true, selector: "core-generic-scheduler", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showTimeColumn: { classPropertyName: "showTimeColumn", publicName: "showTimeColumn", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, emptySlotLabel: { classPropertyName: "emptySlotLabel", publicName: "emptySlotLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledSlotLabel: { classPropertyName: "disabledSlotLabel", publicName: "disabledSlotLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClick: "slotClick", eventClick: "eventClick", eventHover: "eventHover", eventLeave: "eventLeave", eventApprove: "eventApprove", eventReject: "eventReject", eventCancel: "eventCancel", todayClick: "todayClick", previousDay: "previousDay", nextDay: "nextDay", previousWeek: "previousWeek", nextWeek: "nextWeek", previousMonth: "previousMonth", nextMonth: "nextMonth", viewModeChange: "viewModeChange" }, host: { properties: { "class.c-bookings-grid--weekly": "viewMode() === \"week\"", "style.--cols": "columns().length" }, classAttribute: "c-bookings-grid c-bookings-card" }, ngImport: i0, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\" (click)=\"onPrevious()\"></button>\n    <span>{{ formattedDate() }}</span>\n    <button class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\" (click)=\"onNext()\"></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'day'\" (click)=\"setViewMode('day')\">\n      {{ dayLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'week'\" (click)=\"setViewMode('week')\">\n      {{ weekLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\">\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div class=\"c-bookings-grid__wrapper\" [style.--cols]=\"columns().length\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (isToday() && currentTimePosition() !== null) {\n  <div class=\"c-bookings-grid__current-time-line\" [style.--time-position-rem]=\"currentTimePosition()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n      slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled [title]=\"disabledSlotLabel()\">\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\" (click)=\"onSlotClick(column.id, slot)\">\n        {{ emptySlotLabel() }}\n      </button>\n      } } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n\n        @if (event.canCancel) {\n        <button class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation(); onCancelClick(event, column)\">\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if (event.canApprove || event.canReject) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button class=\"c-icon-btn--fill context:success icon-check\" title=\"Aprobar\"\n            [style.width.rem]=\"event.canApproveHeightRem\" [style.height.rem]=\"event.canApproveHeightRem\"\n            (click)=\"$event.stopPropagation(); onApproveClick(event, column)\"></button>\n          } @if (event.canReject) {\n          <button class=\"c-icon-btn--fill context:error icon-cross\" title=\"Rechazar\"\n            [style.width.rem]=\"event.canRejectHeightRem\" [style.height.rem]=\"event.canRejectHeightRem\"\n            (click)=\"$event.stopPropagation(); onRejectClick(event, column)\"></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\" [style.--cols]=\"7\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\" [style.--day-index]=\"currentTimeDayIndex()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div class=\"c-bookings-grid__col\" [class.c-bookings-grid__col--weekend]=\"day.isWeekend\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span class=\"c-bookings-grid__day-number\" [class.is-today]=\"day.isToday\">{{ day.dayNumber }}</span>\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled\n        [title]=\"disabledSlotLabel()\"></button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div class=\"c-bookings-grid__month-cell\" [class.is-today]=\"day.isToday\" [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \" [class.is-disabled]=\"isDayDisabled(day.date)\" (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\">\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div class=\"c-bookings-grid__month-event\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div class=\"c-bookings-grid__more-events\" (click)=\"openDayPopover(day.date, $event)\">\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n            }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n            }}</span>\n        </div>\n        <button class=\"c-bookings-grid__popover-close\" (click)=\"closeDayPopover()\">\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\" [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\" [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}.c-bookings-grid__row{height:calc(var(--row-height-rem, 4) * 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSchedulerComponent, decorators: [{
             type: Component,
@@ -22287,7 +22323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         'class': 'c-bookings-grid c-bookings-card',
                         '[class.c-bookings-grid--weekly]': 'viewMode() === "week"',
                         '[style.--cols]': 'columns().length'
-                    }, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n      (click)=\"onPrevious()\"\n    ></button>\n    <span>{{ formattedDate() }}</span>\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n      (click)=\"onNext()\"\n    ></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'day'\"\n      (click)=\"setViewMode('day')\"\n    >\n      {{ dayLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'week'\"\n      (click)=\"setViewMode('week')\"\n    >\n      {{ weekLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\"\n    >\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper\"\n  [style.--cols]=\"columns().length\"\n  style=\"position: relative\"\n>\n  @if (isToday() && currentTimePosition() !== null) {\n  <div\n    class=\"c-bookings-grid__current-time-line\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n      slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      >\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onSlotClick(column.id, slot)\"\n      >\n        {{ emptySlotLabel() }}\n      </button>\n      } } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n\n        @if (event.canCancel) {\n        <button\n          class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button\n            class=\"c-icon-btn--fill context:success icon-check\"\n            title=\"Aprobar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          } @if (event.canReject) {\n          <button\n            class=\"c-icon-btn--fill context:error icon-cross\"\n            title=\"Rechazar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n  [style.--cols]=\"7\"\n  style=\"position: relative\"\n>\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div\n    class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n    [style.--day-index]=\"currentTimeDayIndex()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div\n    class=\"c-bookings-grid__col\"\n    [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n  >\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span\n          class=\"c-bookings-grid__day-number\"\n          [class.is-today]=\"day.isToday\"\n          >{{ day.dayNumber }}</span\n        >\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      ></button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"\n      ></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div\n      class=\"c-bookings-grid__month-cell\"\n      [class.is-today]=\"day.isToday\"\n      [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \"\n      [class.is-disabled]=\"isDayDisabled(day.date)\"\n      (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n    >\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div\n          class=\"c-bookings-grid__more-events\"\n          (click)=\"openDayPopover(day.date, $event)\"\n        >\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n          }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n          }}</span>\n        </div>\n        <button\n          class=\"c-bookings-grid__popover-close\"\n          (click)=\"closeDayPopover()\"\n        >\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"] }]
+                    }, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\" (click)=\"onPrevious()\"></button>\n    <span>{{ formattedDate() }}</span>\n    <button class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\" (click)=\"onNext()\"></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'day'\" (click)=\"setViewMode('day')\">\n      {{ dayLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'week'\" (click)=\"setViewMode('week')\">\n      {{ weekLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\">\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div class=\"c-bookings-grid__wrapper\" [style.--cols]=\"columns().length\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (isToday() && currentTimePosition() !== null) {\n  <div class=\"c-bookings-grid__current-time-line\" [style.--time-position-rem]=\"currentTimePosition()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n      slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled [title]=\"disabledSlotLabel()\">\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\" (click)=\"onSlotClick(column.id, slot)\">\n        {{ emptySlotLabel() }}\n      </button>\n      } } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n\n        @if (event.canCancel) {\n        <button class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation(); onCancelClick(event, column)\">\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if (event.canApprove || event.canReject) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button class=\"c-icon-btn--fill context:success icon-check\" title=\"Aprobar\"\n            [style.width.rem]=\"event.canApproveHeightRem\" [style.height.rem]=\"event.canApproveHeightRem\"\n            (click)=\"$event.stopPropagation(); onApproveClick(event, column)\"></button>\n          } @if (event.canReject) {\n          <button class=\"c-icon-btn--fill context:error icon-cross\" title=\"Rechazar\"\n            [style.width.rem]=\"event.canRejectHeightRem\" [style.height.rem]=\"event.canRejectHeightRem\"\n            (click)=\"$event.stopPropagation(); onRejectClick(event, column)\"></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\" [style.--cols]=\"7\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\" [style.--day-index]=\"currentTimeDayIndex()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div class=\"c-bookings-grid__col\" [class.c-bookings-grid__col--weekend]=\"day.isWeekend\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span class=\"c-bookings-grid__day-number\" [class.is-today]=\"day.isToday\">{{ day.dayNumber }}</span>\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled\n        [title]=\"disabledSlotLabel()\"></button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div class=\"c-bookings-grid__month-cell\" [class.is-today]=\"day.isToday\" [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \" [class.is-disabled]=\"isDayDisabled(day.date)\" (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\">\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div class=\"c-bookings-grid__month-event\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div class=\"c-bookings-grid__more-events\" (click)=\"openDayPopover(day.date, $event)\">\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n            }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n            }}</span>\n        </div>\n        <button class=\"c-bookings-grid__popover-close\" (click)=\"closeDayPopover()\">\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\" [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\" [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}.c-bookings-grid__row{height:calc(var(--row-height-rem, 4) * 1rem)}\n"] }]
         }] });
 
 class CacheBustingInterceptor {