orbiq-neural-ui-kit 1.1.30 → 1.1.31

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -8273,6 +8273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 class NeuralDialogComponent {
     dialog;
     viewContainerRef;
+    // ── Public API (sin cambios de compatibilidad) ──────────────────────────────
     openModel = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
     title = input(/* @ts-ignore */
@@ -8295,6 +8296,7 @@ class NeuralDialogComponent {
     ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
     bare = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []));
+    // Mantenidos por compatibilidad con el modo bare=false aunque ya no se usan en bare=true
     hasTitleSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
     hasActionsSlot = input(false, /* @ts-ignore */
@@ -8303,25 +8305,29 @@ class NeuralDialogComponent {
     ...(ngDevMode ? [{ debugName: "hasDefaultSlot" }] : /* istanbul ignore next */ []));
     dialogTemplate;
     dialogRef = null;
-    internalActionsState = {}; // track loading states
+    internalActionsState = {};
     constructor(dialog, viewContainerRef) {
         this.dialog = dialog;
         this.viewContainerRef = viewContainerRef;
         effect(() => {
             const isOpen = this.openModel();
-            if (isOpen && !this.dialogRef && this.dialogTemplate) {
-                this.openDialog();
-            }
-            else if (!isOpen && this.dialogRef) {
-                this.dialogRef.close();
-                this.dialogRef = null;
+            // El CDK Portal SOLO se gestiona en modo bare=false.
+            // En bare=true, el @if del template reacciona al signal directamente.
+            if (!this.bare()) {
+                if (isOpen && !this.dialogRef && this.dialogTemplate) {
+                    this.openDialog();
+                }
+                else if (!isOpen && this.dialogRef) {
+                    this.dialogRef.close();
+                    this.dialogRef = null;
+                }
             }
         });
     }
     openDialog() {
         this.dialogRef = this.dialog.open(this.dialogTemplate, {
             disableClose: !this.dismissible(),
-            backdropClass: 'bg-black-overlay-200', // To match Frappe UI 
+            backdropClass: 'bg-black-overlay-200',
             panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
             hasBackdrop: true,
             viewContainerRef: this.viewContainerRef,
@@ -8333,18 +8339,29 @@ class NeuralDialogComponent {
             }
         });
     }
+    /** Cierra el modal en modo bare=false (CDK) */
     close() {
-        if (this.dialogRef) {
+        if (this.bare()) {
+            // bare=true: simplemente cerramos el signal
+            this.openModel.set(false);
+        }
+        else if (this.dialogRef) {
             this.dialogRef.close();
         }
     }
+    /** Alias para cerrar desde el template bare=true (keydown.escape) */
+    closeBare() {
+        if (this.dismissible()) {
+            this.openModel.set(false);
+        }
+    }
     onContainerClick(event) {
         const target = event.target;
-        // Close if the click is on the scroll container or the flex wrapper (not inside the dialog card)
-        if (target.classList.contains('dialog-scroll-container') || target.classList.contains('min-h-screen')) {
-            if (this.dismissible()) {
-                this.close();
-            }
+        const isOverlay = target.classList.contains('dialog-scroll-container') ||
+            target.classList.contains('min-h-screen') ||
+            target.classList.contains('dialog-backdrop'); // clic en backdrop manual (bare=true)
+        if (isOverlay && this.dismissible()) {
+            this.close();
         }
     }
     ngOnDestroy() {
@@ -8352,6 +8369,7 @@ class NeuralDialogComponent {
             this.dialogRef.close();
         }
     }
+    // ── Computed ────────────────────────────────────────────────────────────────
     sizeClass = computed(() => {
         const map = {
             xs: 'max-w-xs',
@@ -8433,12 +8451,10 @@ class NeuralDialogComponent {
     reactiveActions = computed(() => {
         if (this.bare())
             return [];
-        return this.actions().map(action => {
-            return {
-                ...action,
-                loading: this.internalActionsState[action.label] || false
-            };
-        });
+        return this.actions().map(action => ({
+            ...action,
+            loading: this.internalActionsState[action.label] || false
+        }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "reactiveActions" }] : /* istanbul ignore next */ []));
     isSingleActionFullWidth = computed(() => {
@@ -8452,10 +8468,6 @@ class NeuralDialogComponent {
             return;
         }
         this.internalActionsState[action.label] = true;
-        // trigger change detection by recreating the reference since it's a signal reading internalState
-        // Or we could just use a separate mechanism. Let's mutate and trust Angular template binding if we update state.
-        // In signal components, we might need a signal for internalActionsState
-        // For now, let's just await
         try {
             await action.onClick({ close: () => this.close() });
         }
@@ -8465,13 +8477,26 @@ class NeuralDialogComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDialogComponent, isStandalone: true, selector: "neural-dialog", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSlot: { classPropertyName: "hasActionsSlot", publicName: "hasActionsSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
-    <ng-template #dialogTemplate>
-      <div 
-        class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+    <!--
+      MODO bare=true: Renderizado directo con @if.
+      Angular mantiene el árbol de vistas del componente padre, lo que permite que
+      <ng-content> proyecte correctamente los nodos del consumidor.
+      NOTA: El CDK Dialog Portal crea una EmbeddedView desconectada donde <ng-content>
+      no recibe proyección, resultando en height:0. Este modo evita ese bug.
+    -->
+    @if (bare() && openModel()) {
+      <div
+        class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container"
         (click)="onContainerClick($event)"
+        (keydown.escape)="closeBare()"
+        tabindex="-1"
       >
+        <!-- Backdrop manual con transición sincronizada -->
+        <div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
+
+        <!-- Contenedor posicionado -->
         <div
-          class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+          class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center"
           [class]="dialogPositionClasses()"
           [style]="dialogPositionStyles()"
         >
@@ -8479,9 +8504,33 @@ class NeuralDialogComponent {
             class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
             [class]="sizeClass()"
           >
-            @if (bare()) {
-              <ng-content></ng-content>
-            } @else {
+            <!-- ng-content proyecta correctamente aquí porque estamos en el árbol de vistas del padre -->
+            <ng-content></ng-content>
+          </div>
+        </div>
+      </div>
+    }
+
+    <!--
+      MODO bare=false: CDK Dialog Portal.
+      No usa <ng-content> — el contenido se genera desde @Input() (title, message, actions).
+      El CDK Portal funciona correctamente aquí porque no hay proyección de nodos externos.
+    -->
+    @if (!bare()) {
+      <ng-template #dialogTemplate>
+        <div
+          class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+          (click)="onContainerClick($event)"
+        >
+          <div
+            class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+            [class]="dialogPositionClasses()"
+            [style]="dialogPositionStyles()"
+          >
+            <div
+              class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
+              [class]="sizeClass()"
+            >
               <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
                 <div class="flex">
                   <div class="w-full flex-1">
@@ -8497,9 +8546,7 @@ class NeuralDialogComponent {
                             </div>
                           }
                           <header class="flex-1">
-                            @if (hasTitleSlot()) {
-                              <ng-content select="[title]"></ng-content>
-                            } @else if (title()) {
+                            @if (title()) {
                               <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
                                 {{ title() }}
                               </h3>
@@ -8514,9 +8561,7 @@ class NeuralDialogComponent {
                       </div>
                     }
 
-                    @if (hasDefaultSlot()) {
-                      <ng-content></ng-content>
-                    } @else if (message()) {
+                    @if (message()) {
                       <p class="text-p-base text-ink-gray-7">
                         {{ message() }}
                       </p>
@@ -8525,47 +8570,43 @@ class NeuralDialogComponent {
                 </div>
               </div>
 
-              @if (reactiveActions().length || hasActionsSlot()) {
+              @if (reactiveActions().length) {
                 <div class="px-4 pb-7 pt-4 sm:px-6">
-                  @if (hasActionsSlot()) {
-                    <ng-content select="[actions]"></ng-content>
-                  } @else {
-                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
-                      @for (action of reactiveActions(); track action.label) {
-                        <neural-button
-                          class="w-full sm:w-auto"
-                          [disabled]="action.disabled || false"
-                          [loading]="action.loading || false"
-                          [variant]="action.variant || 'solid'"
-                          [theme]="action.theme || 'gray'"
-                          (click)="onActionClick(action)"
-                        >
-                          {{ action.label }}
-                          @if (action.icon) {
-                            <span icon [class]="action.icon + ' size-4'"></span>
-                          }
-                        </neural-button>
-                      }
-                    </div>
-                  }
+                  <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
+                    @for (action of reactiveActions(); track action.label) {
+                      <neural-button
+                        class="w-full sm:w-auto"
+                        [disabled]="action.disabled || false"
+                        [loading]="action.loading || false"
+                        [variant]="action.variant || 'solid'"
+                        [theme]="action.theme || 'gray'"
+                        (click)="onActionClick(action)"
+                      >
+                        {{ action.label }}
+                        @if (action.icon) {
+                          <span icon [class]="action.icon + ' size-4'"></span>
+                        }
+                      </neural-button>
+                    }
+                  </div>
                 </div>
               }
-            }
-            
-            @if (showCloseButton() && !showHeader() && !bare()) {
-              <neural-button
-                class="absolute right-4 top-4 z-10"
-                variant="ghost"
-                label="Close"
-                (click)="close()"
-              >
-                <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-              </neural-button>
-            }
+
+              @if (showCloseButton() && !showHeader()) {
+                <neural-button
+                  class="absolute right-4 top-4 z-10"
+                  variant="ghost"
+                  label="Close"
+                  (click)="close()"
+                >
+                  <span icon class="lucide-x size-4 text-ink-gray-9"></span>
+                </neural-button>
+              }
+            </div>
           </div>
         </div>
-      </div>
-    </ng-template>
+      </ng-template>
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, decorators: [{
@@ -8575,13 +8616,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     standalone: true,
                     imports: [CommonModule, DialogModule, NeuralButtonComponent],
                     template: `
-    <ng-template #dialogTemplate>
-      <div 
-        class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+    <!--
+      MODO bare=true: Renderizado directo con @if.
+      Angular mantiene el árbol de vistas del componente padre, lo que permite que
+      <ng-content> proyecte correctamente los nodos del consumidor.
+      NOTA: El CDK Dialog Portal crea una EmbeddedView desconectada donde <ng-content>
+      no recibe proyección, resultando en height:0. Este modo evita ese bug.
+    -->
+    @if (bare() && openModel()) {
+      <div
+        class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container"
         (click)="onContainerClick($event)"
+        (keydown.escape)="closeBare()"
+        tabindex="-1"
       >
+        <!-- Backdrop manual con transición sincronizada -->
+        <div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
+
+        <!-- Contenedor posicionado -->
         <div
-          class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+          class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center"
           [class]="dialogPositionClasses()"
           [style]="dialogPositionStyles()"
         >
@@ -8589,9 +8643,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
             [class]="sizeClass()"
           >
-            @if (bare()) {
-              <ng-content></ng-content>
-            } @else {
+            <!-- ng-content proyecta correctamente aquí porque estamos en el árbol de vistas del padre -->
+            <ng-content></ng-content>
+          </div>
+        </div>
+      </div>
+    }
+
+    <!--
+      MODO bare=false: CDK Dialog Portal.
+      No usa <ng-content> — el contenido se genera desde @Input() (title, message, actions).
+      El CDK Portal funciona correctamente aquí porque no hay proyección de nodos externos.
+    -->
+    @if (!bare()) {
+      <ng-template #dialogTemplate>
+        <div
+          class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+          (click)="onContainerClick($event)"
+        >
+          <div
+            class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+            [class]="dialogPositionClasses()"
+            [style]="dialogPositionStyles()"
+          >
+            <div
+              class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
+              [class]="sizeClass()"
+            >
               <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
                 <div class="flex">
                   <div class="w-full flex-1">
@@ -8607,9 +8685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                             </div>
                           }
                           <header class="flex-1">
-                            @if (hasTitleSlot()) {
-                              <ng-content select="[title]"></ng-content>
-                            } @else if (title()) {
+                            @if (title()) {
                               <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
                                 {{ title() }}
                               </h3>
@@ -8624,9 +8700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                       </div>
                     }
 
-                    @if (hasDefaultSlot()) {
-                      <ng-content></ng-content>
-                    } @else if (message()) {
+                    @if (message()) {
                       <p class="text-p-base text-ink-gray-7">
                         {{ message() }}
                       </p>
@@ -8635,47 +8709,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 </div>
               </div>
 
-              @if (reactiveActions().length || hasActionsSlot()) {
+              @if (reactiveActions().length) {
                 <div class="px-4 pb-7 pt-4 sm:px-6">
-                  @if (hasActionsSlot()) {
-                    <ng-content select="[actions]"></ng-content>
-                  } @else {
-                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
-                      @for (action of reactiveActions(); track action.label) {
-                        <neural-button
-                          class="w-full sm:w-auto"
-                          [disabled]="action.disabled || false"
-                          [loading]="action.loading || false"
-                          [variant]="action.variant || 'solid'"
-                          [theme]="action.theme || 'gray'"
-                          (click)="onActionClick(action)"
-                        >
-                          {{ action.label }}
-                          @if (action.icon) {
-                            <span icon [class]="action.icon + ' size-4'"></span>
-                          }
-                        </neural-button>
-                      }
-                    </div>
-                  }
+                  <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
+                    @for (action of reactiveActions(); track action.label) {
+                      <neural-button
+                        class="w-full sm:w-auto"
+                        [disabled]="action.disabled || false"
+                        [loading]="action.loading || false"
+                        [variant]="action.variant || 'solid'"
+                        [theme]="action.theme || 'gray'"
+                        (click)="onActionClick(action)"
+                      >
+                        {{ action.label }}
+                        @if (action.icon) {
+                          <span icon [class]="action.icon + ' size-4'"></span>
+                        }
+                      </neural-button>
+                    }
+                  </div>
                 </div>
               }
-            }
-            
-            @if (showCloseButton() && !showHeader() && !bare()) {
-              <neural-button
-                class="absolute right-4 top-4 z-10"
-                variant="ghost"
-                label="Close"
-                (click)="close()"
-              >
-                <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-              </neural-button>
-            }
+
+              @if (showCloseButton() && !showHeader()) {
+                <neural-button
+                  class="absolute right-4 top-4 z-10"
+                  variant="ghost"
+                  label="Close"
+                  (click)="close()"
+                >
+                  <span icon class="lucide-x size-4 text-ink-gray-9"></span>
+                </neural-button>
+              }
+            </div>
           </div>
         </div>
-      </div>
-    </ng-template>
+      </ng-template>
+    }
   `
                 }]
         }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], dialogTemplate: [{