orbiq-neural-ui-kit 1.2.67 → 1.2.69

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

@@ -4595,8 +4595,8 @@ class NeuralDropdownComponent {
             <div class="h-px bg-outline-gray-2 my-1 mx-1"></div>
           } @else {
             @if (option.children && option.children.length > 0) {
-              <!-- Cascading Sub-menu (Hover trigger via CSS) -->
-              <div class="relative group/submenu">
+              <!-- Cascading Sub-menu (Hover trigger via CSS with direct child selector) -->
+              <div class="relative hover:[&>.submenu-panel]:opacity-100 hover:[&>.submenu-panel]:visible hover:[&>.submenu-panel]:delay-150">
                 <button
                   class="flex items-center justify-between w-full gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors text-left"
                   [disabled]="option.disabled"
@@ -4616,7 +4616,7 @@ class NeuralDropdownComponent {
                 </button>
                 
                 <!-- Nested Panel -->
-                <div class="absolute left-full top-0 opacity-0 invisible group-hover/submenu:opacity-100 group-hover/submenu:visible transition-all duration-200 delay-100 group-hover/submenu:delay-150 pl-1.5 z-50">
+                <div class="submenu-panel absolute left-full top-0 opacity-0 invisible transition-all duration-200 delay-100 pl-1.5 z-50">
                   <neural-popover-panel class="block min-w-[180px]">
                     <ng-container *ngTemplateOutlet="menuList; context: { $implicit: option.children, popover: popover }"></ng-container>
                   </neural-popover-panel>
@@ -4700,8 +4700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             <div class="h-px bg-outline-gray-2 my-1 mx-1"></div>
           } @else {
             @if (option.children && option.children.length > 0) {
-              <!-- Cascading Sub-menu (Hover trigger via CSS) -->
-              <div class="relative group/submenu">
+              <!-- Cascading Sub-menu (Hover trigger via CSS with direct child selector) -->
+              <div class="relative hover:[&>.submenu-panel]:opacity-100 hover:[&>.submenu-panel]:visible hover:[&>.submenu-panel]:delay-150">
                 <button
                   class="flex items-center justify-between w-full gap-2 px-2 py-1.5 text-sm rounded-4 text-ink-gray-9 hover:bg-surface-gray-2 cursor-pointer transition-colors text-left"
                   [disabled]="option.disabled"
@@ -4721,7 +4721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 </button>
                 
                 <!-- Nested Panel -->
-                <div class="absolute left-full top-0 opacity-0 invisible group-hover/submenu:opacity-100 group-hover/submenu:visible transition-all duration-200 delay-100 group-hover/submenu:delay-150 pl-1.5 z-50">
+                <div class="submenu-panel absolute left-full top-0 opacity-0 invisible transition-all duration-200 delay-100 pl-1.5 z-50">
                   <neural-popover-panel class="block min-w-[180px]">
                     <ng-container *ngTemplateOutlet="menuList; context: { $implicit: option.children, popover: popover }"></ng-container>
                   </neural-popover-panel>
@@ -14432,8 +14432,13 @@ class NeuralSidebarItemComponent {
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     suffix = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    action = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    shortcut = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
     children = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    itemAction = new EventEmitter();
     hasPrefixSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPrefixSlot" }] : /* istanbul ignore next */ []));
     hasDefaultSlot = input(false, /* @ts-ignore */
@@ -14474,13 +14479,19 @@ class NeuralSidebarItemComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedActive" }] : /* istanbul ignore next */ []));
     handleClick(event) {
+        if (this.action()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.itemAction.emit(this.action());
+            return;
+        }
         if (this.hasChildren()) {
             event.preventDefault();
             this.isExpanded.set(!this.isExpanded());
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSidebarItemComponent, isStandalone: true, selector: "neural-sidebar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixSlot: { classPropertyName: "hasPrefixSlot", publicName: "hasPrefixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixSlot: { classPropertyName: "hasSuffixSlot", publicName: "hasSuffixSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSidebarItemComponent, isStandalone: true, selector: "neural-sidebar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixSlot: { classPropertyName: "hasPrefixSlot", publicName: "hasPrefixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixSlot: { classPropertyName: "hasSuffixSlot", publicName: "hasSuffixSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAction: "itemAction" }, ngImport: i0, template: `
     <div class="flex flex-col">
       <div
         data-slot="sidebar-item"
@@ -14492,7 +14503,7 @@ class NeuralSidebarItemComponent {
             : 'text-ink-gray-7 hover:bg-surface-gray-2'
         "
       >
-        @if (to() && !hasChildren()) {
+        @if (to() && !hasChildren() && !action()) {
           <a
             [routerLink]="to()"
             routerLinkActive="active"
@@ -14525,7 +14536,10 @@ class NeuralSidebarItemComponent {
               [icon]="child.icon || ''"
               [to]="child.to"
               [active]="child.active"
-              [children]="child.children || []">
+              [action]="child.action || ''"
+              [shortcut]="child.shortcut || ''"
+              [children]="child.children || []"
+              (itemAction)="itemAction.emit($event)">
             </neural-sidebar-item>
           }
         </div>
@@ -14565,6 +14579,9 @@ class NeuralSidebarItemComponent {
         @if (!hasSuffixSlot() && suffix()) {
           <span class="mr-2 text-xs text-ink-gray-4">{{ suffix() }}</span>
         }
+        @if (shortcut()) {
+          <span class="ml-auto text-xs text-ink-gray-5 pr-1">{{ shortcut() }}</span>
+        }
         @if (hasChildren()) {
           <span class="transition-transform duration-200" [class.rotate-90]="isExpanded()">
             <span class="lucide-chevron-right size-3.5 text-ink-gray-4 group-hover/sidebar-item:text-ink-gray-6"></span>
@@ -14572,7 +14589,7 @@ class NeuralSidebarItemComponent {
         }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => NeuralSidebarItemComponent), selector: "neural-sidebar-item", inputs: ["label", "icon", "to", "active", "suffix", "children", "hasPrefixSlot", "hasDefaultSlot", "hasSuffixSlot"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0.forwardRef(() => RouterModule) }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => NeuralSidebarItemComponent), selector: "neural-sidebar-item", inputs: ["label", "icon", "to", "active", "suffix", "action", "shortcut", "children", "hasPrefixSlot", "hasDefaultSlot", "hasSuffixSlot"], outputs: ["itemAction"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0.forwardRef(() => RouterModule) }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarItemComponent, decorators: [{
             type: Component,
@@ -14592,7 +14609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             : 'text-ink-gray-7 hover:bg-surface-gray-2'
         "
       >
-        @if (to() && !hasChildren()) {
+        @if (to() && !hasChildren() && !action()) {
           <a
             [routerLink]="to()"
             routerLinkActive="active"
@@ -14625,7 +14642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
               [icon]="child.icon || ''"
               [to]="child.to"
               [active]="child.active"
-              [children]="child.children || []">
+              [action]="child.action || ''"
+              [shortcut]="child.shortcut || ''"
+              [children]="child.children || []"
+              (itemAction)="itemAction.emit($event)">
             </neural-sidebar-item>
           }
         </div>
@@ -14665,6 +14685,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         @if (!hasSuffixSlot() && suffix()) {
           <span class="mr-2 text-xs text-ink-gray-4">{{ suffix() }}</span>
         }
+        @if (shortcut()) {
+          <span class="ml-auto text-xs text-ink-gray-5 pr-1">{{ shortcut() }}</span>
+        }
         @if (hasChildren()) {
           <span class="transition-transform duration-200" [class.rotate-90]="isExpanded()">
             <span class="lucide-chevron-right size-3.5 text-ink-gray-4 group-hover/sidebar-item:text-ink-gray-6"></span>
@@ -14674,7 +14697,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </ng-template>
   `
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], hasPrefixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefixSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], hasSuffixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffixSlot", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], itemAction: [{
+                type: Output
+            }], hasPrefixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefixSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], hasSuffixSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffixSlot", required: false }] }] } });
 
 class NeuralSidebarHeaderComponent {
     title = input.required(/* @ts-ignore */