orbiq-neural-ui-kit 1.2.56 → 1.2.58

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

@@ -14774,25 +14774,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], appIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "appIcon", required: true }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], menuOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOptions", required: false }] }] } });
 
 class NeuralAppLauncherComponent {
+    router;
     openModel = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
     modules = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
-    handleModuleClick() {
-        this.openModel.set(false);
+    path = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    constructor(router) {
+        this.router = router;
+        // Reset path when modal closes
+        effect(() => {
+            if (!this.openModel()) {
+                setTimeout(() => this.path.set([]), 200); // delay reset to allow close animation
+            }
+        });
+    }
+    currentParent = computed(() => {
+        const p = this.path();
+        return p.length > 0 ? p[p.length - 1] : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentParent" }] : /* istanbul ignore next */ []));
+    currentModules = computed(() => {
+        const parent = this.currentParent();
+        return parent ? (parent.children || []) : this.modules();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentModules" }] : /* istanbul ignore next */ []));
+    handleModuleClick(module) {
+        if (module.children && module.children.length > 0) {
+            // Drill down
+            this.path.update(p => [...p, module]);
+        }
+        else if (module.route) {
+            // Navigate and close
+            this.openModel.set(false);
+            this.router.navigate([module.route]);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAppLauncherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    goBack() {
+        this.path.update(p => p.slice(0, -1));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAppLauncherComponent, deps: [{ token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralAppLauncherComponent, isStandalone: true, selector: "neural-app-launcher", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, modules: { classPropertyName: "modules", publicName: "modules", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, ngImport: i0, template: `
     <neural-dialog [(openModel)]="openModel" size="4xl" [hasTitleSlot]="true" [hasDefaultSlot]="true">
-      <span title>Módulos de la Plataforma</span>
+      <span title class="flex items-center gap-2">
+        @if (path().length > 0) {
+          <neural-button variant="ghost" [iconOnly]="true" icon="lucide-arrow-left" (clicked)="goBack()" class="-ml-2"></neural-button>
+          <span>{{ currentParent()?.label }}</span>
+        } @else {
+          <span>Módulos de la Plataforma</span>
+        }
+      </span>
       
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
-        @for (module of modules(); track module.id) {
+      <!-- We add a simple animation key to force re-render/animation on the grid when path changes -->
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 content-start gap-4 p-4 min-h-[400px] animate-in fade-in slide-in-from-bottom-2 duration-200" [attr.data-level]="path().length">
+        @for (module of currentModules(); track module.id) {
           <div 
             class="flex flex-col items-center justify-center p-4 rounded-xl border border-outline-gray-2 hover:shadow-md transition-all cursor-pointer bg-surface-base group" 
             [ngClass]="module.colorClass"
-            [routerLink]="module.route"
-            (click)="handleModuleClick()"
+            (click)="handleModuleClick(module)"
           >
             <div class="group-hover:scale-110 transition-transform flex items-center justify-center">
               <i [class]="module.icon" class="size-8 text-ink-gray-7 group-hover:text-ink-gray-9 transition-colors"></i>
@@ -14805,25 +14845,32 @@ class NeuralAppLauncherComponent {
         }
       </div>
     </neural-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly", "shape"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAppLauncherComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-app-launcher',
                     standalone: true,
-                    imports: [CommonModule, RouterModule, NeuralDialogComponent],
+                    imports: [CommonModule, RouterModule, NeuralDialogComponent, NeuralButtonComponent],
                     template: `
     <neural-dialog [(openModel)]="openModel" size="4xl" [hasTitleSlot]="true" [hasDefaultSlot]="true">
-      <span title>Módulos de la Plataforma</span>
+      <span title class="flex items-center gap-2">
+        @if (path().length > 0) {
+          <neural-button variant="ghost" [iconOnly]="true" icon="lucide-arrow-left" (clicked)="goBack()" class="-ml-2"></neural-button>
+          <span>{{ currentParent()?.label }}</span>
+        } @else {
+          <span>Módulos de la Plataforma</span>
+        }
+      </span>
       
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
-        @for (module of modules(); track module.id) {
+      <!-- We add a simple animation key to force re-render/animation on the grid when path changes -->
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 content-start gap-4 p-4 min-h-[400px] animate-in fade-in slide-in-from-bottom-2 duration-200" [attr.data-level]="path().length">
+        @for (module of currentModules(); track module.id) {
           <div 
             class="flex flex-col items-center justify-center p-4 rounded-xl border border-outline-gray-2 hover:shadow-md transition-all cursor-pointer bg-surface-base group" 
             [ngClass]="module.colorClass"
-            [routerLink]="module.route"
-            (click)="handleModuleClick()"
+            (click)="handleModuleClick(module)"
           >
             <div class="group-hover:scale-110 transition-transform flex items-center justify-center">
               <i [class]="module.icon" class="size-8 text-ink-gray-7 group-hover:text-ink-gray-9 transition-colors"></i>
@@ -14838,7 +14885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </neural-dialog>
   `
                 }]
-        }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }] } });
+        }], ctorParameters: () => [{ type: i2.Router }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }] } });
 
 // Note: TextEditor is deprecated in Frappe UI, but migrated for faithful parity.
 // For new projects, consider using the /editor module with RichTextKit.