ngx-dev-toolbar 2.0.0 → 2.0.2

package/index.d.ts

@@ -1,5 +1,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/toolbar-tool/toolbar-tool.component';
 export * from './components/toolbar-tool/toolbar-tool.models';
 export * from './dev-toolbar.component';

package/models/dev-tools.interface.d.ts

@@ -14,4 +14,26 @@ export interface DevToolsService<OptionType> {
      * @returns Observable of forced values array
      */
     getForcedValues(): Observable<OptionType[]>;
+    /**
+     * Gets ALL option values with overrides already applied.
+     * Returns the complete set of options where overridden values replace base values.
+     * Each option includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base values with overrides using combineLatest.
+     *
+     * @returns Observable of all values with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Simple integration - no manual merging needed
+     * this.devToolbarService.getValues().pipe(
+     *   map(values => values.find(v => v.id === targetId)),
+     *   map(value => value?.isEnabled ?? defaultValue)
+     * ).subscribe(finalValue => {
+     *   // Use the final value
+     * });
+     * ```
+     */
+    getValues(): Observable<OptionType[]>;
 }

package/package.json

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

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

@@ -39,7 +39,7 @@ export declare class DevToolbarAppFeaturesToolComponent {
     onFilterChange(value: string | undefined): void;
     /**
      * Handle feature value change from 3-state dropdown.
-     * - 'not-forced' (empty string): Remove forced override
+     * - 'not-forced': Remove forced override
      * - 'on': Force feature to enabled
      * - 'off': Force feature to disabled
      */

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

@@ -42,6 +42,11 @@ export interface DevToolbarAppFeature {
      * - false: State reflects the natural application configuration
      */
     isForced: boolean;
+    /**
+     * Original value before forcing (only present when isForced is true)
+     * Used to display what the feature's state was before being overridden
+     */
+    originalValue?: boolean;
 }
 /**
  * Filter options for displaying features in the toolbar UI.

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

@@ -97,6 +97,30 @@ export declare class DevToolbarAppFeaturesService implements DevToolsService<Dev
      * ```
      */
     getForcedValues(): Observable<DevToolbarAppFeature[]>;
+    /**
+     * Gets ALL app feature values with overrides already applied.
+     * Returns the complete set of features where overridden values replace base values.
+     * Each feature includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base features with overrides using combineLatest.
+     *
+     * @returns Observable of all features with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Check if a feature is enabled with overrides applied
+     * this.appFeaturesService.getValues().pipe(
+     *   map(features => features.find(f => f.id === 'premium-analytics')),
+     *   map(feature => feature?.isEnabled ?? false)
+     * ).subscribe(isEnabled => {
+     *   if (isEnabled) {
+     *     // Enable premium analytics
+     *   }
+     * });
+     * ```
+     */
+    getValues(): Observable<DevToolbarAppFeature[]>;
     /**
      * Apply a preset feature configuration (for preset tool integration).
      *

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

@@ -5,5 +5,6 @@ export interface DevToolbarFlag {
     link?: string;
     isEnabled: boolean;
     isForced: boolean;
+    originalValue?: boolean;
 }
 export type FeatureFlagFilter = 'all' | 'forced' | 'enabled' | 'disabled';

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

@@ -14,6 +14,30 @@ export declare class DevToolbarFeatureFlagService implements DevToolsService<Dev
      * @returns Observable of forced flags array
      */
     getForcedValues(): Observable<DevToolbarFlag[]>;
+    /**
+     * Gets ALL flag values with overrides already applied.
+     * Returns the complete set of flags where overridden values replace base values.
+     * Each flag includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base flags with overrides using combineLatest.
+     *
+     * @returns Observable of all flags with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Get a specific flag value with overrides applied
+     * this.featureFlagsService.getValues().pipe(
+     *   map(flags => flags.find(f => f.id === 'newFeature')),
+     *   map(flag => flag?.isEnabled ?? false)
+     * ).subscribe(isEnabled => {
+     *   if (isEnabled) {
+     *     // Enable feature
+     *   }
+     * });
+     * ```
+     */
+    getValues(): Observable<DevToolbarFlag[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarFeatureFlagService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DevToolbarFeatureFlagService>;
 }

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

@@ -29,7 +29,6 @@ export declare class DevToolbarHomeToolComponent {
         readonly url: "https://discord.com/invite/angular";
         readonly label: "Community";
     }];
-    onToggleTheme(): void;
     onExportSettings(): void;
     onImportSettings(): void;
     onResetSettings(): void;

package/tools/language-tool/language.service.d.ts

@@ -14,6 +14,13 @@ export declare class DevToolbarLanguageService implements DevToolsService<Langua
      * @returns Observable of forced languages array
      */
     getForcedValues(): Observable<Language[]>;
+    /**
+     * Gets the forced language value.
+     * For the language tool, this returns the same as getForcedValues() since
+     * only one language can be selected at a time.
+     * @returns Observable of forced language array (single item or empty)
+     */
+    getValues(): Observable<Language[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarLanguageService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DevToolbarLanguageService>;
 }

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

@@ -13,6 +13,8 @@ export interface DevToolbarPermission {
     isGranted: boolean;
     /** Whether the permission's value has been overridden through the toolbar */
     isForced: boolean;
+    /** Original value before forcing (only present when isForced is true) */
+    originalValue?: boolean;
 }
 /**
  * Internal state representing forced permission overrides.

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

@@ -62,6 +62,30 @@ export declare class DevToolbarPermissionsService implements DevToolsService<Dev
      * ```
      */
     getForcedValues(): Observable<DevToolbarPermission[]>;
+    /**
+     * Gets ALL permission values with overrides already applied.
+     * Returns the complete set of permissions where overridden values replace base values.
+     * Each permission includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base permissions with overrides using combineLatest.
+     *
+     * @returns Observable of all permissions with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Simple permission check with overrides applied
+     * this.permissionsService.getValues().pipe(
+     *   map(permissions => permissions.find(p => p.id === 'can-edit')),
+     *   map(permission => permission?.isGranted ?? false)
+     * ).subscribe(canEdit => {
+     *   if (canEdit) {
+     *     // Enable edit functionality
+     *   }
+     * });
+     * ```
+     */
+    getValues(): Observable<DevToolbarPermission[]>;
     /**
      * Apply a preset permission state. Useful for automated testing scenarios.
      *

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

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { DevToolbarPreset } from './presets.models';
+import { DevToolbarPreset, PresetCategoryOptions } from './presets.models';
 import * as i0 from "@angular/core";
 /**
  * Internal service for managing presets state.
@@ -19,7 +19,7 @@ export declare class DevToolbarInternalPresetsService {
     /**
      * Capture current toolbar state as a new preset
      */
-    saveCurrentAsPreset(name: string, description?: string): DevToolbarPreset;
+    saveCurrentAsPreset(name: string, description?: string, categoryOptions?: PresetCategoryOptions): DevToolbarPreset;
     /**
      * Apply a preset to all tools (THIS IS THE KEY METHOD)
      */

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

@@ -1,4 +1,5 @@
 import { DevToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
 import * as i0 from "@angular/core";
 export declare class DevToolbarPresetsToolComponent {
     private readonly presetsService;
@@ -6,14 +7,29 @@ export declare class DevToolbarPresetsToolComponent {
     private readonly permissionsService;
     private readonly appFeaturesService;
     private readonly languageService;
+    protected readonly state: DevToolbarStateService;
     protected readonly viewMode: import("@angular/core").WritableSignal<"list" | "create">;
     protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
     protected readonly presetName: import("@angular/core").WritableSignal<string>;
     protected readonly presetDescription: import("@angular/core").WritableSignal<string>;
+    protected readonly includeFeatureFlags: import("@angular/core").WritableSignal<boolean>;
+    protected readonly includePermissions: import("@angular/core").WritableSignal<boolean>;
+    protected readonly includeAppFeatures: import("@angular/core").WritableSignal<boolean>;
+    protected readonly includeLanguage: import("@angular/core").WritableSignal<boolean>;
+    protected readonly selectedFlagIds: import("@angular/core").WritableSignal<Set<string>>;
+    protected readonly selectedPermissionIds: import("@angular/core").WritableSignal<Set<string>>;
+    protected readonly selectedFeatureIds: import("@angular/core").WritableSignal<Set<string>>;
     protected readonly presets: import("@angular/core").Signal<import("ngx-dev-toolbar").DevToolbarPreset[]>;
     protected readonly filteredPresets: import("@angular/core").Signal<import("ngx-dev-toolbar").DevToolbarPreset[]>;
     protected readonly hasNoPresets: import("@angular/core").Signal<boolean>;
     protected readonly hasNoFilteredPresets: import("@angular/core").Signal<boolean>;
+    protected readonly isFeatureFlagsEnabled: import("@angular/core").Signal<boolean>;
+    protected readonly isPermissionsEnabled: import("@angular/core").Signal<boolean>;
+    protected readonly isAppFeaturesEnabled: import("@angular/core").Signal<boolean>;
+    protected readonly isLanguageEnabled: import("@angular/core").Signal<boolean>;
+    protected readonly forcedFlags: import("@angular/core").Signal<import("ngx-dev-toolbar").DevToolbarFlag[]>;
+    protected readonly forcedPermissions: import("@angular/core").Signal<import("ngx-dev-toolbar").DevToolbarPermission[]>;
+    protected readonly forcedAppFeatures: import("@angular/core").Signal<import("ngx-dev-toolbar").DevToolbarAppFeature[]>;
     protected readonly options: DevToolbarWindowOptions;
     onSearchChange(query: string): void;
     onSwitchToCreateMode(): void;
@@ -28,6 +44,14 @@ export declare class DevToolbarPresetsToolComponent {
     protected getCurrentAppFeaturesCount(): number;
     protected getCurrentLanguage(): string;
     protected formatDate(isoString: string): string;
+    /**
+     * Toggle selection of an individual item
+     */
+    protected toggleItemSelection(signal: typeof this.selectedFlagIds, itemId: string): void;
+    /**
+     * Check if an item is selected
+     */
+    protected isItemSelected(selectedSet: Set<string>, itemId: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarPresetsToolComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DevToolbarPresetsToolComponent, "ndt-presets-tool", never, {}, {}, never, never, true, never>;
 }

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

@@ -22,3 +22,12 @@ export interface DevToolbarPresetConfig {
     };
 }
 export type PresetFilter = 'all' | 'recent' | 'favorites';
+export interface PresetCategoryOptions {
+    includeFeatureFlags?: boolean;
+    includePermissions?: boolean;
+    includeAppFeatures?: boolean;
+    includeLanguage?: boolean;
+    selectedFlagIds?: string[];
+    selectedPermissionIds?: string[];
+    selectedFeatureIds?: string[];
+}

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

@@ -1,6 +1,14 @@
 import { Observable } from 'rxjs';
-import { DevToolbarPreset } from './presets.models';
+import { DevToolbarPreset, DevToolbarPresetConfig } from './presets.models';
 import * as i0 from "@angular/core";
+/**
+ * Partial preset for initialization (without generated fields)
+ */
+export interface InitialPreset {
+    name: string;
+    description?: string;
+    config: DevToolbarPresetConfig;
+}
 /**
  * Public service for managing dev toolbar presets.
  * Allows developers to programmatically save, load, and manage presets.
@@ -46,6 +54,68 @@ export declare class DevToolbarPresetsService {
      * @throws Error if JSON is invalid
      */
     importPreset(json: string): DevToolbarPreset;
+    /**
+     * Initialize presets with predefined configurations.
+     * Useful for setting up default presets that all developers can use.
+     *
+     * @param presets - Array of preset configurations to initialize
+     * @returns Array of created presets
+     *
+     * @example
+     * ```typescript
+     * const presetsService = inject(DevToolbarPresetsService);
+     *
+     * presetsService.initializePresets([
+     *   {
+     *     name: 'Admin User',
+     *     description: 'Full access admin configuration',
+     *     config: {
+     *       featureFlags: {
+     *         enabled: ['admin-panel', 'advanced-features'],
+     *         disabled: []
+     *       },
+     *       permissions: {
+     *         granted: ['admin', 'write', 'delete'],
+     *         denied: []
+     *       },
+     *       appFeatures: {
+     *         enabled: ['analytics', 'reporting'],
+     *         disabled: []
+     *       },
+     *       language: 'en'
+     *     }
+     *   },
+     *   {
+     *     name: 'Read-Only User',
+     *     description: 'Limited access for viewing only',
+     *     config: {
+     *       featureFlags: {
+     *         enabled: [],
+     *         disabled: ['admin-panel', 'advanced-features']
+     *       },
+     *       permissions: {
+     *         granted: ['read'],
+     *         denied: ['write', 'delete']
+     *       },
+     *       appFeatures: {
+     *         enabled: [],
+     *         disabled: ['analytics', 'reporting']
+     *       },
+     *       language: null
+     *     }
+     *   }
+     * ]);
+     * ```
+     */
+    initializePresets(presets: InitialPreset[]): DevToolbarPreset[];
+    /**
+     * Clear all existing presets and set new initial presets.
+     * Use this to replace all presets with a fresh set of configurations.
+     *
+     * @param presets - Array of preset configurations to set as initial
+     * @returns Array of created presets
+     */
+    setInitialPresets(presets: InitialPreset[]): DevToolbarPreset[];
     static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarPresetsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DevToolbarPresetsService>;
 }