ngx-dev-toolbar 4.1.0 → 4.2.1

package/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/list-item/list-item.component';
 export * from './components/toolbar-tool/toolbar-tool.component';
 export * from './components/toolbar-tool/toolbar-tool.models';
 export * from './components/button/button.component';
+export * from './components/icon-button/icon-button.component';
 export * from './components/input/input.component';
 export * from './components/select/select.component';
 export * from './components/card/card.component';

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

@@ -9,4 +9,6 @@ export interface ToolViewState {
     filter: string;
     /** Sort order for list items (currently only 'asc' supported, reserved for future use) */
     sortOrder: 'asc' | 'desc';
+    /** IDs of pinned items that should appear at the top of the list */
+    pinnedIds?: string[];
 }

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

@@ -43,4 +43,28 @@ export interface ToolbarConfig {
      * @default true
      */
     showPresetsTool?: boolean;
+    /**
+     * Callback to persist a forced feature flag value to the actual source.
+     * When provided, an "Apply to source" button appears on each forced flag.
+     * @param flagId - The ID of the feature flag
+     * @param value - The current forced boolean value
+     * @deprecated Use `ToolbarFeatureFlagService.setApplyToSource()` instead. Config callbacks will be removed in v5.
+     */
+    onApplyFeatureFlag?: (flagId: string, value: boolean) => Promise<void>;
+    /**
+     * Callback to persist a forced permission value to the actual source.
+     * When provided, an "Apply to source" button appears on each forced permission.
+     * @param permissionId - The ID of the permission
+     * @param value - The current forced boolean value (granted = true, denied = false)
+     * @deprecated Use `ToolbarPermissionsService.setApplyToSource()` instead. Config callbacks will be removed in v5.
+     */
+    onApplyPermission?: (permissionId: string, value: boolean) => Promise<void>;
+    /**
+     * Callback to persist a forced app feature value to the actual source.
+     * When provided, an "Apply to source" button appears on each forced feature.
+     * @param featureId - The ID of the app feature
+     * @param value - The current forced boolean value
+     * @deprecated Use `ToolbarAppFeaturesService.setApplyToSource()` instead. Config callbacks will be removed in v5.
+     */
+    onApplyAppFeature?: (featureId: string, value: boolean) => Promise<void>;
 }

package/models/toolbar.interface.d.ts

@@ -1,4 +1,8 @@
 import { Observable } from 'rxjs';
+/**
+ * State of an apply-to-source operation for a single item.
+ */
+export type ApplyToSourceState = 'idle' | 'loading' | 'success' | 'error';
 /**
  * Interface that should be implemented by any tool service that is used in the dev toolbar
  */
@@ -36,4 +40,19 @@ export interface ToolbarService<OptionType> {
      * ```
      */
     getValues(): Observable<OptionType[]>;
+    /**
+     * Registers a callback to persist a forced value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced item in the toolbar UI.
+     *
+     * @param callback - Async function that receives the item ID and its forced boolean value.
+     *                   Should persist the value (e.g., via API call) and throw on failure.
+     *
+     * @example
+     * ```typescript
+     * this.toolbarService.setApplyToSource(async (id, value) => {
+     *   await this.api.updateFlag(id, value);
+     * });
+     * ```
+     */
+    setApplyToSource?(callback: (id: string, value: boolean) => Promise<void>): void;
 }

package/package.json

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

package/tools/app-features-tool/app-features-internal.service.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { ApplyToSourceState } from '../../models/toolbar.interface';
 import { ToolbarAppFeature, ForcedAppFeaturesState } from './app-features.models';
 import * as i0 from "@angular/core";
 /**
@@ -73,6 +74,11 @@ export declare class ToolbarInternalAppFeaturesService {
      * @returns Current forced features state
      */
     getCurrentForcedState(): ForcedAppFeaturesState;
+    readonly applyCallback: import("@angular/core").WritableSignal<((id: string, value: boolean) => Promise<void>) | null>;
+    readonly applyStates: import("@angular/core").WritableSignal<Record<string, ApplyToSourceState>>;
+    readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
+    applyToSource(id: string, value: boolean): Promise<void>;
     /**
      * Merge natural app features with forced state.
      *

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

@@ -21,6 +21,7 @@ export declare class ToolbarAppFeaturesToolComponent {
     private readonly VIEW_STATE_KEY;
     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>>;
     constructor();
     private loadViewState;
     protected readonly features: import("@angular/core").Signal<ToolbarAppFeature[]>;
@@ -37,6 +38,9 @@ export declare class ToolbarAppFeaturesToolComponent {
         value: string;
         label: string;
     }[];
+    protected readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    protected getApplyState(featureId: string): 'idle' | 'loading' | 'success' | 'error';
+    protected onApplyToSource(featureId: string, value: boolean): void;
     /**
      * Handle filter dropdown change.
      * Updates the active filter to show all/forced/enabled/disabled features.
@@ -54,6 +58,7 @@ export declare class ToolbarAppFeaturesToolComponent {
      * Updates the search query to filter features by name/description.
      */
     onSearchChange(query: string): void;
+    togglePin(featureId: string): 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.service.d.ts

@@ -170,6 +170,13 @@ export declare class ToolbarAppFeaturesService implements ToolbarService<Toolbar
      * ```
      */
     getCurrentForcedState(): ForcedAppFeaturesState;
+    /**
+     * Registers a callback to persist a forced app feature value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced feature in the toolbar UI.
+     *
+     * @param callback - Async function that receives the feature ID and its forced boolean value
+     */
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarAppFeaturesService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarAppFeaturesService>;
 }

package/tools/feature-flags-tool/feature-flags-internal.service.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { ApplyToSourceState } from '../../models/toolbar.interface';
 import { ToolbarFlag } from './feature-flags.models';
 import * as i0 from "@angular/core";
 interface ForcedFlagsState {
@@ -31,6 +32,11 @@ export declare class ToolbarInternalFeatureFlagService {
      * Returns the raw state of enabled and disabled flag IDs
      */
     getCurrentForcedState(): ForcedFlagsState;
+    readonly applyCallback: import("@angular/core").WritableSignal<((id: string, value: boolean) => Promise<void>) | null>;
+    readonly applyStates: import("@angular/core").WritableSignal<Record<string, ApplyToSourceState>>;
+    readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
+    applyToSource(id: string, value: boolean): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarInternalFeatureFlagService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarInternalFeatureFlagService>;
 }

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

@@ -7,6 +7,7 @@ export declare class ToolbarFeatureFlagsToolComponent {
     private readonly VIEW_STATE_KEY;
     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>>;
     constructor();
     private loadViewState;
     protected readonly flags: import("@angular/core").Signal<ToolbarFlag[]>;
@@ -23,9 +24,13 @@ export declare class ToolbarFeatureFlagsToolComponent {
         value: string;
         label: string;
     }[];
+    protected readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    protected getApplyState(flagId: string): 'idle' | 'loading' | 'success' | 'error';
+    protected onApplyToSource(flagId: string, value: boolean): void;
     onFilterChange(value: string | undefined): void;
     onFlagChange(flagId: string, value: string): void;
     onSearchChange(query: string): void;
+    togglePin(flagId: string): void;
     protected getFlagValue(flag: ToolbarFlag): string;
     protected getFlagPlaceholder(flag: ToolbarFlag): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarFeatureFlagsToolComponent, never>;

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

@@ -38,6 +38,13 @@ export declare class ToolbarFeatureFlagService implements ToolbarService<Toolbar
      * ```
      */
     getValues(): Observable<ToolbarFlag[]>;
+    /**
+     * Registers a callback to persist a forced flag value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced flag in the toolbar UI.
+     *
+     * @param callback - Async function that receives the flag ID and its forced boolean value
+     */
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarFeatureFlagService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarFeatureFlagService>;
 }

package/tools/permissions-tool/permissions-internal.service.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { ApplyToSourceState } from '../../models/toolbar.interface';
 import { ToolbarPermission, ForcedPermissionsState } from './permissions.models';
 import * as i0 from "@angular/core";
 export declare class ToolbarInternalPermissionsService {
@@ -29,6 +30,11 @@ export declare class ToolbarInternalPermissionsService {
     getCurrentForcedState(): ForcedPermissionsState;
     private loadForcedState;
     private isValidForcedState;
+    readonly applyCallback: import("@angular/core").WritableSignal<((id: string, value: boolean) => Promise<void>) | null>;
+    readonly applyStates: import("@angular/core").WritableSignal<Record<string, ApplyToSourceState>>;
+    readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
+    applyToSource(id: string, value: boolean): Promise<void>;
     private validateAndCleanForcedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarInternalPermissionsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarInternalPermissionsService>;

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

@@ -7,6 +7,7 @@ export declare class ToolbarPermissionsToolComponent {
     private readonly VIEW_STATE_KEY;
     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>>;
     constructor();
     private loadViewState;
     protected readonly permissions: import("@angular/core").Signal<ToolbarPermission[]>;
@@ -23,9 +24,13 @@ export declare class ToolbarPermissionsToolComponent {
         value: string;
         label: string;
     }[];
+    protected readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    protected getApplyState(permissionId: string): 'idle' | 'loading' | 'success' | 'error';
+    protected onApplyToSource(permissionId: string, value: boolean): void;
     onFilterChange(value: string | undefined): void;
     onPermissionChange(id: string, value: string): void;
     onSearchChange(query: string): void;
+    togglePin(permissionId: string): 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.service.d.ts

@@ -106,6 +106,13 @@ export declare class ToolbarPermissionsService implements ToolbarService<Toolbar
      * @returns Current forced permissions state
      */
     getCurrentState(): ForcedPermissionsState;
+    /**
+     * Registers a callback to persist a forced permission value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced permission in the toolbar UI.
+     *
+     * @param callback - Async function that receives the permission ID and its forced boolean value
+     */
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarPermissionsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarPermissionsService>;
 }

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

@@ -5,6 +5,7 @@ import * as i0 from "@angular/core";
 type ViewMode = 'list' | 'create' | 'edit' | 'import' | 'apply' | 'delete';
 type ToastType = 'success' | 'error';
 export declare class ToolbarPresetsToolComponent {
+    onDocumentClick(): void;
     private readonly presetsService;
     private readonly featureFlagsService;
     private readonly permissionsService;
@@ -12,6 +13,8 @@ export declare class ToolbarPresetsToolComponent {
     protected readonly state: ToolbarStateService;
     protected readonly viewMode: import("@angular/core").WritableSignal<ViewMode>;
     protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
+    protected readonly expandedPresetId: import("@angular/core").WritableSignal<string | null>;
+    protected readonly openMenuId: import("@angular/core").WritableSignal<string | null>;
     protected readonly presetName: import("@angular/core").WritableSignal<string>;
     protected readonly presetDescription: import("@angular/core").WritableSignal<string>;
     protected readonly includeFeatureFlags: import("@angular/core").WritableSignal<boolean>;
@@ -53,6 +56,8 @@ export declare class ToolbarPresetsToolComponent {
     protected readonly options: ToolbarWindowOptions;
     private showToast;
     onSearchChange(query: string): void;
+    onToggleExpand(presetId: string): void;
+    onToggleMenu(presetId: string): void;
     onSwitchToListMode(): void;
     onSwitchToCreateMode(): void;
     onSwitchToImportMode(): void;