orbiq-neural-ui-kit 1.2.55 → 1.2.57

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

@@ -8475,10 +8475,10 @@ class NeuralDialogComponent {
     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" }, ngImport: i0, template: `
     @if (openModel()) {
       <div class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)" (keydown.escape)="closeBare()" tabindex="-1">
-        <div class="fixed inset-0 bg-black-overlay-200 dialog-backdrop animate-in fade-in duration-200"></div>
+        <div class="fixed inset-0 bg-black-overlay-200 dialog-backdrop animate-dialog-fade"></div>
         
         <div class="relative 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 animate-in fade-in zoom-in-95 duration-200 ease-out" [class]="sizeClass()">
+          <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 animate-dialog-zoom" [class]="sizeClass()">
             
             <ng-template #defaultContent>
               <ng-content></ng-content>
@@ -8538,21 +8538,17 @@ class NeuralDialogComponent {
         </div>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly", "shape"], outputs: ["clicked"] }] });
+  `, isInline: true, styles: ["@keyframes dialogFadeIn{0%{opacity:0}to{opacity:1}}@keyframes dialogZoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-dialog-fade{animation:dialogFadeIn .2s ease-out forwards}.animate-dialog-zoom{animation:dialogZoomIn .2s ease-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: NeuralDialogComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'neural-dialog',
-                    standalone: true,
-                    imports: [CommonModule, NeuralButtonComponent],
-                    template: `
+            args: [{ selector: 'neural-dialog', standalone: true, imports: [CommonModule, NeuralButtonComponent], template: `
     @if (openModel()) {
       <div class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)" (keydown.escape)="closeBare()" tabindex="-1">
-        <div class="fixed inset-0 bg-black-overlay-200 dialog-backdrop animate-in fade-in duration-200"></div>
+        <div class="fixed inset-0 bg-black-overlay-200 dialog-backdrop animate-dialog-fade"></div>
         
         <div class="relative 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 animate-in fade-in zoom-in-95 duration-200 ease-out" [class]="sizeClass()">
+          <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 animate-dialog-zoom" [class]="sizeClass()">
             
             <ng-template #defaultContent>
               <ng-content></ng-content>
@@ -8612,8 +8608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </div>
       </div>
     }
-  `
-                }]
+  `, styles: ["@keyframes dialogFadeIn{0%{opacity:0}to{opacity:1}}@keyframes dialogZoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-dialog-fade{animation:dialogFadeIn .2s ease-out forwards}.animate-dialog-zoom{animation:dialogZoomIn .2s ease-out forwards}\n"] }]
         }], ctorParameters: () => [], 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 }] }] } });
 
 class NeuralAwesomeBarComponent {
@@ -14779,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
+            }
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAppLauncherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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]);
+        }
+    }
+    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 gap-4 p-4 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>
@@ -14810,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 gap-4 p-4 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>
@@ -14843,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.