orbiq-neural-ui-kit 1.2.68 → 1.2.70

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

@@ -13721,7 +13721,11 @@ class NeuralNotificationCenterComponent {
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     onClose = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NeuralNotificationCenterComponent, isStandalone: true, selector: "neural-notification-center", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralNotificationCenterComponent, isStandalone: true, selector: "neural-notification-center", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-40 bg-transparent" (click)="onClose.emit()"></div>
+    }
+    
     <div
       class="top-0 z-50 flex h-full w-[380px] flex-col bg-surface-base border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
       [ngClass]="{
@@ -13760,6 +13764,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     standalone: true,
                     imports: [CommonModule],
                     template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-40 bg-transparent" (click)="onClose.emit()"></div>
+    }
+    
     <div
       class="top-0 z-50 flex h-full w-[380px] flex-col bg-surface-base border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
       [ngClass]="{
@@ -14432,8 +14440,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 +14487,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 +14511,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 +14544,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 +14587,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 +14597,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 +14617,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 +14650,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 +14693,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 +14705,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 */