@solcre-org/core-ui 2.11.10 → 2.11.11

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

@@ -8944,6 +8944,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 
+class SidebarCustomModalService {
+    isOpen = signal(false);
+    currentConfig = signal(null);
+    componentRef = null;
+    viewContainerRef = null;
+    getIsOpen() {
+        return this.isOpen;
+    }
+    getCurrentConfig() {
+        return this.currentConfig;
+    }
+    setViewContainerRef(vcr) {
+        this.viewContainerRef = vcr;
+    }
+    openComponentModal(component, data, config) {
+        this.closeModal();
+        const modalConfig = {
+            component,
+            data,
+            closeOnBackdrop: config?.closeOnBackdrop ?? true,
+            customClass: config?.customClass,
+            onClose: config?.onClose
+        };
+        this.currentConfig.set(modalConfig);
+        this.isOpen.set(true);
+        if (this.viewContainerRef && component) {
+            this.componentRef = this.viewContainerRef.createComponent(component);
+            if (data) {
+                Object.keys(data).forEach(key => {
+                    if (this.componentRef?.instance.hasOwnProperty(key)) {
+                        this.componentRef.instance[key] = data[key];
+                    }
+                });
+            }
+            if (this.componentRef.instance.modalClosed) {
+                this.componentRef.instance.modalClosed.subscribe(() => {
+                    this.closeModal();
+                });
+            }
+        }
+    }
+    openTemplateModal(template, data, config) {
+        this.closeModal();
+        const modalConfig = {
+            template,
+            data,
+            closeOnBackdrop: config?.closeOnBackdrop ?? true,
+            customClass: config?.customClass,
+            onClose: config?.onClose
+        };
+        this.currentConfig.set(modalConfig);
+        this.isOpen.set(true);
+    }
+    closeModal() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        const config = this.currentConfig();
+        if (config?.onClose) {
+            config.onClose();
+        }
+        this.isOpen.set(false);
+        this.currentConfig.set(null);
+    }
+    onBackdropClick() {
+        const config = this.currentConfig();
+        if (config?.closeOnBackdrop !== false) {
+            this.closeModal();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarCustomModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarCustomModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarCustomModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class SidebarTemplateRegistryService {
     templates = new Map();
     registerTemplate(key, template) {
@@ -8976,6 +9057,7 @@ class GenericSidebarComponent {
     templateRegistry = inject(SidebarTemplateRegistryService);
     alertService = inject(AlertService);
     mobileModalService = inject(SidebarMobileModalService);
+    customModalService = inject(SidebarCustomModalService);
     config = input(null);
     position = input(SidebarPosition.LEFT);
     customTemplate = input(null);
@@ -9164,6 +9246,18 @@ class GenericSidebarComponent {
         }
         return true;
     }
+    openCustomComponentModal(component, data, config) {
+        this.customModalService.openComponentModal(component, data, config);
+    }
+    openCustomTemplateModal(template, data, config) {
+        this.customModalService.openTemplateModal(template, data, config);
+    }
+    closeCustomModal() {
+        this.customModalService.closeModal();
+    }
+    get isCustomModalOpen() {
+        return this.customModalService.getIsOpen();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSidebarComponent, isStandalone: true, selector: "core-generic-sidebar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked", subItemClicked: "subItemClicked" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "sidebarContentTemplate", first: true, predicate: ["sidebarContentTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if(getConfig() && hasValidConfiguration() && shouldRenderSidebar()) {\n\n  @if(getConfig()?.backButton) {\n      <button class=\"c-back-link\" (click)=\"getConfig()?.backButton?.action()\">\n        <span class=\"icon-arrow-left\"></span>\n        @if(getConfig()?.backButton?.labelNeedsTranslation && getConfig()?.backButton?.label) {\n          {{ getConfig()!.backButton!.label | translate }}\n        } @else if(getConfig()?.backButton?.label) {\n          {{ getConfig()!.backButton!.label }}\n        }\n      </button>\n    }\n\n  @if (shouldShowMobileVersion()) {\n    \n    @if (getMobileType() === SidebarMobileType.SELECT) {\n      <div class=\"c-sidebar-mobile\">\n        <label class=\"c-entry-input\">\n          <select (change)=\"onMobileSelectChange($event)\">\n            <option value=\"\">Seleccionar...</option>\n            @for(item of getConfig()?.items || []; track item.id) {\n              @if(item.children && item.children.length > 0) {\n                <optgroup [label]=\"item.label\">\n                  @for(subItem of item.children; track subItem.id) {\n                    <option [disabled]=\"subItem.disabled\" [value]=\"subItem.id\">\n                      {{ subItem.label }}\n                    </option>\n                  }\n                </optgroup>\n              } @else {\n                <option [disabled]=\"item.disabled\" [value]=\"item.id\">\n                  {{ item.label }}\n                </option>\n              }\n            }\n          </select>\n          <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n        </label>\n      </div>\n    }\n\n    @if (getMobileType() === SidebarMobileType.SCROLL) {\n      <div class=\"c-sidebar-mobile c-sidebar-mobile--scroll\">\n        <nav class=\"c-sidenav c-sidenav--mobile-scroll\">\n          @if(getConfig()?.title) {\n            <p class=\"c-sidenav__heading u-heading u-fz--300\">\n              <strong>\n                @if(shouldTranslateTitle()) {\n                  {{ getTitleDisplay() | translate }}\n                } @else {\n                  {{ getTitleDisplay() }}\n                }\n              </strong>\n            </p>\n          }\n          \n          <ul class=\"c-sidenav__list c-sidenav__list--scrollable\">\n            @for(item of getScrollableItems(); track item.id) {\n              <li class=\"c-sidenav__item\">\n                @if(item.children && item.children.length > 0) {\n                  <a class=\"c-sidenav__link\">{{ item.label }}</a>\n                  <ul class=\"c-sidenav__sublist\">\n                    @for(subItem of item.children; track subItem.id) {\n                      <li class=\"c-sidenav__subitem\">\n                        <a class=\"c-sidenav__sublink\"\n                           [class.is-disabled]=\"subItem.disabled\"\n                           [class.is-active]=\"subItem.active\"\n                           (click)=\"onSubItemClick(subItem)\">\n                          {{ subItem.label }}\n                        </a>\n                      </li>\n                    }\n                  </ul>\n                } @else {\n                  <a class=\"c-sidenav__link\"\n                     [class.is-disabled]=\"item.disabled\"\n                     [class.is-active]=\"item.active\"\n                     (click)=\"onItemClick(item)\">\n                    @if(item.icon) {\n                      <span [ngClass]=\"item.icon | coreIconCompat\"></span>\n                    }\n                    {{ item.label }}\n                  </a>\n                }\n              </li>\n            }\n          </ul>\n        </nav>\n      </div>\n    }\n\n    @if (getMobileType() === SidebarMobileType.MODAL) {\n      <!-- El modal se renderiza desde el componente layout usando el servicio -->\n      <!-- No renderizamos nada aqu\u00ED para ocultar completamente el sidebar -->\n    }\n  }\n\n  @if (shouldShowDesktopVersion()) {\n    <nav class=\"c-sidenav\" style=\"--_layout-padd-y: calc(var(--space-y) * 1.8);\">\n      \n      @if(getConfig()?.title) {\n        <p class=\"c-sidenav__heading u-heading u-fz--300\">\n          <strong>\n            @if(shouldTranslateTitle()) {\n              {{ getTitleDisplay() | translate }}\n            } @else {\n              {{ getTitleDisplay() }}\n            }\n          </strong>\n        </p>\n      }\n      \n      @if(shouldUseCustomTemplate()) {\n        <ng-container \n          [ngTemplateOutlet]=\"getActiveTemplate()\" \n          [ngTemplateOutletContext]=\"{\n            $implicit: getConfig(),\n            config: getConfig(),\n            position: position(),\n            onItemClick: onItemClick.bind(this),\n            onSubItemClick: onSubItemClick.bind(this)\n          }\">\n        </ng-container>\n      } @else {\n        <ul class=\"c-sidenav__list\">\n          @for(item of getConfig()?.items || []; track item.id) {\n            <li class=\"c-sidenav__item\">\n              @if(item.children && item.children.length > 0) {\n                <a class=\"c-sidenav__link\">{{ item.label }}</a>\n                <ul class=\"c-sidenav__sublist\">\n                  @for(subItem of item.children; track subItem.id) {\n                    <li class=\"c-sidenav__subitem\">\n                      <a class=\"c-sidenav__sublink\"\n                         [class.is-disabled]=\"subItem.disabled\"\n                         [class.is-active]=\"subItem.active\"\n                         (click)=\"onSubItemClick(subItem)\">\n                        {{ subItem.label }}\n                      </a>\n                    </li>\n                  }\n                </ul>\n              } @else {\n                <a class=\"c-sidenav__link\"\n                   [class.is-disabled]=\"item.disabled\"\n                   [class.is-active]=\"item.active\"\n                   (click)=\"onItemClick(item)\">\n                  @if(item.icon) {\n                    <span [ngClass]=\"item.icon | coreIconCompat\"></span>\n                  }\n                  {{ item.label }}\n                </a>\n              }\n            </li>\n          }\n        </ul>\n      }\n    </nav>\n  }\n} \n\n<ng-template #sidebarContentTemplate>\n  <nav class=\"c-sidenav c-sidenav--modal\">\n    @if(shouldUseCustomTemplate()) {\n      <ng-container \n        [ngTemplateOutlet]=\"getActiveTemplate()\" \n        [ngTemplateOutletContext]=\"{\n          $implicit: getConfig(),\n          config: getConfig(),\n          position: position(),\n          onItemClick: onItemClick.bind(this),\n          onSubItemClick: onSubItemClick.bind(this)\n        }\">\n      </ng-container>\n    } @else {\n      <ul class=\"c-sidenav__list\">\n        @for(item of getConfig()?.items || []; track item.id) {\n          <li class=\"c-sidenav__item\">\n            @if(item.children && item.children.length > 0) {\n              <a class=\"c-sidenav__link\">{{ item.label }}</a>\n              <ul class=\"c-sidenav__sublist\">\n                @for(subItem of item.children; track subItem.id) {\n                  <li class=\"c-sidenav__subitem\">\n                    <a class=\"c-sidenav__sublink\"\n                       [class.is-disabled]=\"subItem.disabled\"\n                       [class.is-active]=\"subItem.active\"\n                       (click)=\"onSubItemClick(subItem); modalService.closeModal()\">\n                      {{ subItem.label }}\n                    </a>\n                  </li>\n                }\n              </ul>\n            } @else {\n              <a class=\"c-sidenav__link\"\n                 [class.is-disabled]=\"item.disabled\"\n                 [class.is-active]=\"item.active\"\n                 (click)=\"onItemClick(item); modalService.closeModal()\">\n                @if(item.icon) {\n                  <span [ngClass]=\"item.icon | coreIconCompat\"></span>\n                }\n                {{ item.label }}\n              </a>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </nav>\n</ng-template>", styles: [""], 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: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
 }
@@ -9632,12 +9726,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.11.10',
+    full: '2.11.11',
     major: 2,
     minor: 11,
-    patch: 10,
-    timestamp: '2025-08-21T17:53:24.856Z',
-    buildDate: '21/8/2025'
+    patch: 11,
+    timestamp: '2025-08-22T09:08:34.107Z',
+    buildDate: '22/8/2025'
 };
 
 class MainNavComponent {
@@ -9981,6 +10075,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class SidebarCustomModalComponent {
+    modalService = inject(SidebarCustomModalService);
+    dynamicComponent;
+    ngOnInit() {
+        setTimeout(() => {
+            this.modalService.setViewContainerRef(this.dynamicComponent);
+        });
+    }
+    ngOnDestroy() {
+        this.modalService.closeModal();
+    }
+    getCurrentConfig() {
+        return this.modalService.getCurrentConfig()();
+    }
+    getModalClasses() {
+        const config = this.getCurrentConfig();
+        const classes = [];
+        if (config?.customClass) {
+            classes.push(config.customClass);
+        }
+        return classes.join(' ');
+    }
+    onBackdropClick(event) {
+        this.modalService.onBackdropClick();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarCustomModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SidebarCustomModalComponent, isStandalone: true, selector: "core-sidebar-custom-modal", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    @if(modalService.getIsOpen()()) {
+      <ng-container #dynamicComponent></ng-container>
+          
+        @if(getCurrentConfig()?.template) {
+        <ng-container 
+            *ngTemplateOutlet="getCurrentConfig()!.template!; context: { $implicit: getCurrentConfig()?.data }">
+        </ng-container>
+        }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SidebarCustomModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'core-sidebar-custom-modal',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if(modalService.getIsOpen()()) {
+      <ng-container #dynamicComponent></ng-container>
+          
+        @if(getCurrentConfig()?.template) {
+        <ng-container 
+            *ngTemplateOutlet="getCurrentConfig()!.template!; context: { $implicit: getCurrentConfig()?.data }">
+        </ng-container>
+        }
+    }
+  `,
+                }]
+        }], propDecorators: { dynamicComponent: [{
+                type: ViewChild,
+                args: ['dynamicComponent', { read: ViewContainerRef }]
+            }] } });
+
 class LayoutComponent {
     navItems = input([]);
     bottomNavItems = input([]);
@@ -10151,7 +10306,7 @@ class LayoutComponent {
         this.onLogout.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        class=\"o-layout__header\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        class=\"o-layout__header\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -10161,8 +10316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CommonModule,
                         ConfirmationDialogComponent,
                         GenericSidebarComponent,
-                        GenericModalComponent
-                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        class=\"o-layout__header\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- ! Refactor: End -->" }]
+                        GenericModalComponent,
+                        SidebarCustomModalComponent
+                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        class=\"o-layout__header\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- ! Refactor: End -->" }]
         }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]