orbiq-neural-ui-kit 1.2.36 → 1.2.38

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

@@ -510,7 +510,9 @@ class NeuralButtonComponent {
             red: 'text-ink-red-7 bg-surface-base border border-outline-red-1 hover:border-outline-red-3 active:border-outline-red-3 active:bg-surface-red-3',
         };
         const ghostClasses = {
-            gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
+            gray: this.iconOnly()
+                ? 'text-ink-gray-6 bg-transparent hover:bg-surface-gray-2 hover:text-ink-gray-9 active:bg-surface-gray-3'
+                : 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
             blue: 'text-ink-blue-5 bg-transparent hover:bg-surface-blue-3 active:bg-surface-blue-4',
             green: 'text-ink-green-8 bg-transparent hover:bg-surface-green-3 active:bg-surface-green-4',
             red: 'text-ink-red-7 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
@@ -550,13 +552,13 @@ class NeuralButtonComponent {
         const stateClasses = this.disabled() ? disabledClasses : variantClasses;
         const sizeClasses = this.iconOnly()
             ? {
-                xs: 'h-6 w-6 rounded-3',
-                sm: 'h-7 w-7 rounded-4',
-                md: 'h-10 w-10 rounded-4',
-                lg: 'h-12 w-12 rounded-5',
-                xl: 'h-14 w-14 rounded-5',
-                '2xl': 'h-16 w-16 rounded-6',
-                '3xl': 'h-20 w-20 rounded-7',
+                xs: 'h-6 w-6 rounded-md',
+                sm: 'h-7 w-7 rounded-md',
+                md: 'h-10 w-10 rounded-md',
+                lg: 'h-12 w-12 rounded-md',
+                xl: 'h-14 w-14 rounded-md',
+                '2xl': 'h-16 w-16 rounded-md',
+                '3xl': 'h-20 w-20 rounded-md',
             }[s]
             : {
                 xs: 'h-6 text-xs px-1.5 rounded-3',
@@ -586,7 +588,7 @@ class NeuralButtonComponent {
     <button
       [type]="type()"
       [disabled]="isDisabled()"
-      [class]="'w-full ' + computedClasses()"
+      [class]="(iconOnly() ? '' : 'w-full ') + computedClasses()"
       (click)="onClick($event)"
       [attr.aria-busy]="loading() ? 'true' : null"
     >
@@ -630,7 +632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <button
       [type]="type()"
       [disabled]="isDisabled()"
-      [class]="'w-full ' + computedClasses()"
+      [class]="(iconOnly() ? '' : 'w-full ') + computedClasses()"
       (click)="onClick($event)"
       [attr.aria-busy]="loading() ? 'true' : null"
     >
@@ -4625,6 +4627,9 @@ class NeuralDropdownComponent {
                     <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
                   }
                   {{ option.label }}
+                  @if (option.shortcut) {
+                    <span class="ml-auto text-xs text-ink-gray-5 font-mono tracking-wider">{{ option.shortcut }}</span>
+                  }
                 </a>
               } @else {
                 <button
@@ -4638,6 +4643,9 @@ class NeuralDropdownComponent {
                     <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
                   }
                   {{ option.label }}
+                  @if (option.shortcut) {
+                    <span class="ml-auto text-xs text-ink-gray-5 font-mono tracking-wider">{{ option.shortcut }}</span>
+                  }
                 </button>
               }
             }
@@ -4715,6 +4723,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
                   }
                   {{ option.label }}
+                  @if (option.shortcut) {
+                    <span class="ml-auto text-xs text-ink-gray-5 font-mono tracking-wider">{{ option.shortcut }}</span>
+                  }
                 </a>
               } @else {
                 <button
@@ -4728,6 +4739,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     <i [class]="option.icon" class="size-4 text-ink-gray-5"></i>
                   }
                   {{ option.label }}
+                  @if (option.shortcut) {
+                    <span class="ml-auto text-xs text-ink-gray-5 font-mono tracking-wider">{{ option.shortcut }}</span>
+                  }
                 </button>
               }
             }
@@ -12799,7 +12813,7 @@ class NeuralDataTableComponent {
 
         <!-- Right: Actions Toolbar -->
         @if (viewMode() === 'list') {
-          <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
             
             <!-- Built-in Actions Group (Clean, no background) -->
             <div class="flex items-center gap-0.5">
@@ -13036,7 +13050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
         <!-- Right: Actions Toolbar -->
         @if (viewMode() === 'list') {
-          <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
             
             <!-- Built-in Actions Group (Clean, no background) -->
             <div class="flex items-center gap-0.5">
@@ -14640,6 +14654,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }], 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 }] }] } });
 
+class NeuralSidebarHeaderComponent {
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    appIcon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appIcon" }] : /* istanbul ignore next */ []));
+    iconClass = input('bg-blue-500 text-white', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    menuOptions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
+    sidebar = inject(NeuralSidebarComponent, { optional: true });
+    isCollapsed = computed(() => {
+        return this.sidebar ? this.sidebar.shouldCollapse() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSidebarHeaderComponent, isStandalone: true, selector: "neural-sidebar-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, appIcon: { classPropertyName: "appIcon", publicName: "appIcon", isSignal: true, isRequired: true, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, menuOptions: { classPropertyName: "menuOptions", publicName: "menuOptions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <neural-dropdown [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="8">
+      <div trigger
+        class="flex items-center gap-2 p-2 rounded-md transition-colors cursor-pointer"
+        [class]="isCollapsed() ? 'justify-center mx-auto w-10 h-10 hover:bg-surface-gray-2' : 'hover:bg-surface-gray-2 w-full mx-2'"
+        [attr.aria-label]="title()"
+        [title]="isCollapsed() ? title() : null"
+      >
+        <!-- App Icon -->
+        <div class="flex items-center justify-center shrink-0 size-8 rounded-md" [ngClass]="iconClass()">
+          <i [class]="appIcon()" class="size-4.5"></i>
+        </div>
+
+        <!-- Texts (Hidden when collapsed) -->
+        <div class="flex flex-col flex-1 min-w-0 transition-all duration-200"
+          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        >
+          <span class="text-[14px] font-medium text-ink-gray-9 truncate leading-tight">{{ title() }}</span>
+          @if (subtitle()) {
+            <span class="text-xs text-ink-gray-5 truncate leading-tight">{{ subtitle() }}</span>
+          }
+        </div>
+
+        <!-- Chevron (Hidden when collapsed) -->
+        <div class="shrink-0 transition-all duration-200"
+          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        >
+          <i class="lucide-chevron-down size-4 text-ink-gray-5"></i>
+        </div>
+      </div>
+    </neural-dropdown>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSidebarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'neural-sidebar-header',
+                    standalone: true,
+                    imports: [CommonModule, NeuralDropdownComponent],
+                    template: `
+    <neural-dropdown [options]="menuOptions()" [hasTriggerSlot]="true" align="start" [offset]="8">
+      <div trigger
+        class="flex items-center gap-2 p-2 rounded-md transition-colors cursor-pointer"
+        [class]="isCollapsed() ? 'justify-center mx-auto w-10 h-10 hover:bg-surface-gray-2' : 'hover:bg-surface-gray-2 w-full mx-2'"
+        [attr.aria-label]="title()"
+        [title]="isCollapsed() ? title() : null"
+      >
+        <!-- App Icon -->
+        <div class="flex items-center justify-center shrink-0 size-8 rounded-md" [ngClass]="iconClass()">
+          <i [class]="appIcon()" class="size-4.5"></i>
+        </div>
+
+        <!-- Texts (Hidden when collapsed) -->
+        <div class="flex flex-col flex-1 min-w-0 transition-all duration-200"
+          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        >
+          <span class="text-[14px] font-medium text-ink-gray-9 truncate leading-tight">{{ title() }}</span>
+          @if (subtitle()) {
+            <span class="text-xs text-ink-gray-5 truncate leading-tight">{{ subtitle() }}</span>
+          }
+        </div>
+
+        <!-- Chevron (Hidden when collapsed) -->
+        <div class="shrink-0 transition-all duration-200"
+          [class]="isCollapsed() ? 'w-0 opacity-0 hidden' : 'opacity-100'"
+        >
+          <i class="lucide-chevron-down size-4 text-ink-gray-5"></i>
+        </div>
+      </div>
+    </neural-dropdown>
+  `
+                }]
+        }], 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 }] }] } });
+
 // Note: TextEditor is deprecated in Frappe UI, but migrated for faithful parity.
 // For new projects, consider using the /editor module with RichTextKit.
 class NeuralTextEditorComponent {
@@ -15761,5 +15866,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAwesomeBarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDataTableComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDrawerComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralEntityFormComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSubGridComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
+export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAwesomeBarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDataTableComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDrawerComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralEntityFormComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarHeaderComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSubGridComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
 //# sourceMappingURL=orbiq-neural-ui-kit.mjs.map