ngx-dev-toolbar 4.2.1 → 4.3.0

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/icons/icon.component';
 export * from './components/icons/icon.models';
 export * from './components/list/list.component';
 export * from './components/list-item/list-item.component';
+export * from './components/list-group/list-group.component';
 export * from './components/toolbar-tool/toolbar-tool.component';
 export * from './components/toolbar-tool/toolbar-tool.models';
 export * from './components/button/button.component';
@@ -15,6 +16,10 @@ export * from './components/clickable-card/clickable-card.component';
 export * from './components/link-button/link-button.component';
 export * from './components/step-view/step-view.component';
 export * from './components/step-view/step-view.directive';
+export * from './components/tabs/tab.component';
+export * from './components/tabs/tabs.component';
+export * from './components/tool-header/tool-header.component';
+export * from './components/confirm-dialog/confirm-dialog.component';
 export * from './toolbar.component';
 export * from './models/toolbar.interface';
 export * from './models/toolbar-config.interface';

package/models/tool-view-state.models.d.ts

@@ -11,4 +11,6 @@ export interface ToolViewState {
     sortOrder: 'asc' | 'desc';
     /** IDs of pinned items that should appear at the top of the list */
     pinnedIds?: string[];
+    /** Names of groups currently collapsed in the UI; persisted to localStorage */
+    collapsedGroups?: string[];
 }

package/models/toolbar-config.interface.d.ts

@@ -1,3 +1,4 @@
+import { Type } from '@angular/core';
 import { ToolbarPosition } from './toolbar-position.model';
 /**
  * Configuration options for the Angular Toolbar component.
@@ -43,6 +44,20 @@ export interface ToolbarConfig {
      * @default true
      */
     showPresetsTool?: boolean;
+    /**
+     * Custom tool components to render inside the toolbar.
+     *
+     * Each component should use `ToolbarToolComponent` as its wrapper
+     * and will appear as an icon in the toolbar strip alongside built-in tools.
+     *
+     * @example
+     * ```typescript
+     * provideToolbar({
+     *   customTools: [MyFinderTool, MyDebugTool],
+     * })
+     * ```
+     */
+    customTools?: Type<unknown>[];
     /**
      * Callback to persist a forced feature flag value to the actual source.
      * When provided, an "Apply to source" button appears on each forced flag.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dev-toolbar",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "keywords": [
     "devtools",
     "development-toolbar",

package/tokens.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, Type } from '@angular/core';
 import { ToolbarConfig } from './models/toolbar-config.interface';
 import { ToolbarService } from './models/toolbar.interface';
 import { ToolbarAppFeature } from './tools/app-features-tool/app-features.models';
@@ -62,3 +62,26 @@ export declare const TOOLBAR_PERMISSIONS: InjectionToken<ToolbarService<ToolbarP
  * ```
  */
 export declare const TOOLBAR_APP_FEATURES: InjectionToken<ToolbarService<ToolbarAppFeature>>;
+/**
+ * InjectionToken for registering custom tool components with the toolbar.
+ *
+ * Custom tools are Angular components that extend the toolbar with app-specific
+ * functionality. They are dynamically rendered inside the toolbar at runtime.
+ *
+ * Use `provideToolbarCustomTools()` to register custom tool components.
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideToolbar, provideToolbarCustomTools } from 'ngx-dev-toolbar';
+ * import { MyCustomToolComponent } from './my-custom-tool.component';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideToolbar({ ... }),
+ *     provideToolbarCustomTools(MyCustomToolComponent),
+ *   ],
+ * };
+ * ```
+ */
+export declare const TOOLBAR_CUSTOM_TOOLS: InjectionToken<Type<unknown>[]>;

package/toolbar.component.d.ts

@@ -8,6 +8,8 @@ export declare class ToolbarComponent implements OnInit, OnDestroy {
     state: ToolbarStateService;
     destroyRef: DestroyRef;
     settingsService: SettingsService;
+    private customToolTypes;
+    private customToolsContainer;
     config: import("@angular/core").InputSignal<ToolbarConfig>;
     private globalStyleElement?;
     private keyboardShortcut;

package/tools/app-features-tool/app-features-tool.component.d.ts

@@ -22,12 +22,16 @@ export declare class ToolbarAppFeaturesToolComponent {
     protected readonly activeFilter: import("@angular/core").WritableSignal<AppFeatureFilter>;
     protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
     protected readonly pinnedIds: import("@angular/core").WritableSignal<Set<string>>;
+    protected readonly collapsedGroups: import("@angular/core").WritableSignal<Set<string>>;
     constructor();
     private loadViewState;
     protected readonly features: import("@angular/core").Signal<ToolbarAppFeature[]>;
     protected readonly badgeCount: import("@angular/core").Signal<string>;
     protected readonly hasNoFeatures: import("@angular/core").Signal<boolean>;
-    protected readonly filteredFeatures: import("@angular/core").Signal<ToolbarAppFeature[]>;
+    private readonly filteredFeatures;
+    protected readonly groupedFeatures: import("@angular/core").Signal<import("../../utils/group-items.util").GroupedItems<ToolbarAppFeature>>;
+    protected readonly flatFeatures: import("@angular/core").Signal<ToolbarAppFeature[]>;
+    protected readonly hasAnyGroups: import("@angular/core").Signal<boolean>;
     protected readonly hasNoFilteredFeatures: import("@angular/core").Signal<boolean>;
     protected readonly options: ToolbarWindowOptions;
     protected readonly filterOptions: {
@@ -59,6 +63,8 @@ export declare class ToolbarAppFeaturesToolComponent {
      */
     onSearchChange(query: string): void;
     togglePin(featureId: string): void;
+    protected isCollapsed(name: string): boolean;
+    protected setCollapsed(name: string, collapsed: boolean): void;
     /**
      * Get the dropdown value for a feature's current state.
      * - Returns empty string if not forced (natural state)

package/tools/app-features-tool/app-features.models.d.ts

@@ -47,6 +47,11 @@ export interface ToolbarAppFeature {
      * Used to display what the feature's state was before being overridden
      */
     originalValue?: boolean;
+    /**
+     * Optional group name. Items without a group render in an "Other" section.
+     * @example 'Billing', 'Reporting'
+     */
+    group?: string;
 }
 /**
  * Filter options for displaying features in the toolbar UI.

package/tools/feature-flags-tool/feature-flags-tool.component.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
-import { ToolbarFlag, FeatureFlagFilter } from './feature-flags.models';
+import { FeatureFlagFilter, ToolbarFlag } from './feature-flags.models';
 import * as i0 from "@angular/core";
 export declare class ToolbarFeatureFlagsToolComponent {
     private readonly featureFlags;
@@ -8,12 +8,16 @@ export declare class ToolbarFeatureFlagsToolComponent {
     protected readonly activeFilter: import("@angular/core").WritableSignal<FeatureFlagFilter>;
     protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
     protected readonly pinnedIds: import("@angular/core").WritableSignal<Set<string>>;
+    protected readonly collapsedGroups: import("@angular/core").WritableSignal<Set<string>>;
     constructor();
     private loadViewState;
     protected readonly flags: import("@angular/core").Signal<ToolbarFlag[]>;
     protected readonly badgeCount: import("@angular/core").Signal<string>;
     protected readonly hasNoFlags: import("@angular/core").Signal<boolean>;
-    protected readonly filteredFlags: import("@angular/core").Signal<ToolbarFlag[]>;
+    private readonly filteredFlags;
+    protected readonly groupedFlags: import("@angular/core").Signal<import("../../utils/group-items.util").GroupedItems<ToolbarFlag>>;
+    protected readonly flatFlags: import("@angular/core").Signal<ToolbarFlag[]>;
+    protected readonly hasAnyGroups: import("@angular/core").Signal<boolean>;
     protected readonly hasNoFilteredFlags: import("@angular/core").Signal<boolean>;
     protected readonly options: ToolbarWindowOptions;
     protected readonly filterOptions: {
@@ -31,6 +35,8 @@ export declare class ToolbarFeatureFlagsToolComponent {
     onFlagChange(flagId: string, value: string): void;
     onSearchChange(query: string): void;
     togglePin(flagId: string): void;
+    protected isCollapsed(name: string): boolean;
+    protected setCollapsed(name: string, collapsed: boolean): void;
     protected getFlagValue(flag: ToolbarFlag): string;
     protected getFlagPlaceholder(flag: ToolbarFlag): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarFeatureFlagsToolComponent, never>;

package/tools/feature-flags-tool/feature-flags.models.d.ts

@@ -6,5 +6,7 @@ export interface ToolbarFlag {
     isEnabled: boolean;
     isForced: boolean;
     originalValue?: boolean;
+    /** Optional group name. Items without a group render in an "Other" section. */
+    group?: string;
 }
 export type FeatureFlagFilter = 'all' | 'forced' | 'enabled' | 'disabled';

package/tools/home-tool/home-tool.component.d.ts

@@ -35,6 +35,8 @@ export declare class ToolbarHomeToolComponent {
     onExportSettings(): void;
     onImportSettings(): void;
     onResetSettings(): void;
+    protected confirmReset(): void;
+    private readonly resetDialog;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarHomeToolComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarHomeToolComponent, "ndt-home-tool", never, { "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/tools/i18n-tool/i18n-tool.component.d.ts

@@ -30,6 +30,7 @@ export declare class ToolbarI18nToolComponent {
     pseudoLocEnabled: import("@angular/core").Signal<boolean>;
     rtlEnabled: import("@angular/core").Signal<boolean>;
     toolConfig: import("@angular/core").Signal<I18nToolConfig>;
+    hasAdvancedFormatSettings: import("@angular/core").Signal<boolean>;
     localeOptions: import("@angular/core").Signal<{
         value: string;
         label: string;

package/tools/permissions-tool/permissions-tool.component.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
-import { ToolbarPermission, PermissionFilter } from './permissions.models';
+import { PermissionFilter, ToolbarPermission } from './permissions.models';
 import * as i0 from "@angular/core";
 export declare class ToolbarPermissionsToolComponent {
     private readonly permissionsService;
@@ -8,12 +8,16 @@ export declare class ToolbarPermissionsToolComponent {
     protected readonly activeFilter: import("@angular/core").WritableSignal<PermissionFilter>;
     protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
     protected readonly pinnedIds: import("@angular/core").WritableSignal<Set<string>>;
+    protected readonly collapsedGroups: import("@angular/core").WritableSignal<Set<string>>;
     constructor();
     private loadViewState;
     protected readonly permissions: import("@angular/core").Signal<ToolbarPermission[]>;
     protected readonly badgeCount: import("@angular/core").Signal<string>;
     protected readonly hasNoPermissions: import("@angular/core").Signal<boolean>;
-    protected readonly filteredPermissions: import("@angular/core").Signal<ToolbarPermission[]>;
+    private readonly filteredPermissions;
+    protected readonly groupedPermissions: import("@angular/core").Signal<import("../../utils/group-items.util").GroupedItems<ToolbarPermission>>;
+    protected readonly flatPermissions: import("@angular/core").Signal<ToolbarPermission[]>;
+    protected readonly hasAnyGroups: import("@angular/core").Signal<boolean>;
     protected readonly hasNoFilteredPermissions: import("@angular/core").Signal<boolean>;
     protected readonly options: ToolbarWindowOptions;
     protected readonly filterOptions: {
@@ -31,6 +35,8 @@ export declare class ToolbarPermissionsToolComponent {
     onPermissionChange(id: string, value: string): void;
     onSearchChange(query: string): void;
     togglePin(permissionId: string): void;
+    protected isCollapsed(name: string): boolean;
+    protected setCollapsed(name: string, collapsed: boolean): void;
     protected getPermissionValue(permission: ToolbarPermission): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarPermissionsToolComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarPermissionsToolComponent, "ndt-permissions-tool", never, {}, {}, never, never, true, never>;

package/tools/permissions-tool/permissions.models.d.ts

@@ -15,6 +15,8 @@ export interface ToolbarPermission {
     isForced: boolean;
     /** Original value before forcing (only present when isForced is true) */
     originalValue?: boolean;
+    /** Optional group name. Items without a group render in an "Other" section. */
+    group?: string;
 }
 /**
  * Internal state representing forced permission overrides.

package/utils/group-items.util.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Minimum shape required by {@link groupItems}: each item needs a stable id,
+ * a display name (used for sorting), and an optional group label.
+ */
+export interface Groupable {
+    id: string;
+    name: string;
+    group?: string;
+}
+/**
+ * Result of partitioning a list of items into pinned, named groups, and ungrouped.
+ */
+export interface GroupedItems<T extends Groupable> {
+    /** Pinned items, alphabetically sorted. Always rendered first, regardless of group. */
+    pinned: T[];
+    /** Named groups, sorted alphabetically by group name; items inside each group sorted alphabetically by name. */
+    groups: {
+        name: string;
+        items: T[];
+    }[];
+    /** Items without a group (and not pinned), sorted alphabetically. Rendered last. */
+    ungrouped: T[];
+}
+/**
+ * Partitions items into pinned + named groups + ungrouped sections, applying
+ * the same alphabetical-name ordering used elsewhere in the toolbar.
+ *
+ * Backward-compatible: if no item has a `group`, `groups` is `[]` and the
+ * result is equivalent to the legacy pinned-first flat list.
+ *
+ * Pure function — no side effects, returns a new object.
+ */
+export declare function groupItems<T extends Groupable>(items: T[], pinnedIds: Set<string>): GroupedItems<T>;