ngx-dev-toolbar 3.0.0 → 3.0.2

package/README.md

@@ -1,77 +1,30 @@
-# Angular Dev Toolbar
+# Angular Toolbar
 
 <div align="center">
 
-[![npm version](https://badge.fury.io/js/ngx-dev-toolbar.svg)](https://www.npmjs.com/package/ngx-dev-toolbar)
-[![Downloads](https://img.shields.io/npm/dm/ngx-dev-toolbar.svg)](https://www.npmjs.com/package/ngx-dev-toolbar)
-[![License](https://img.shields.io/npm/l/ngx-dev-toolbar.svg)](https://github.com/yourusername/ngx-dev-toolbar/blob/main/LICENSE)
-[![Angular](https://img.shields.io/badge/Angular-17%2B-red)](https://angular.io/)
-[![GitHub Stars](https://img.shields.io/github/stars/alfredoperez/ngx-dev-toolbar?style=social)](https://github.com/alfredoperez/ngx-dev-toolbar)
+[![npm](https://img.shields.io/npm/v/ngx-dev-toolbar)](https://www.npmjs.com/package/ngx-dev-toolbar)
+[![Downloads](https://img.shields.io/npm/dm/ngx-dev-toolbar)](https://www.npmjs.com/package/ngx-dev-toolbar)
+[![Angular](https://img.shields.io/badge/Angular-19+-dd0031)](https://angular.dev/)
+[![License](https://img.shields.io/npm/l/ngx-dev-toolbar)](LICENSE)
 
-<h3>A powerful development toolbar for Angular applications that helps developers to interact with the application in a more efficient way.</h3>
+**A development toolbar for Angular applications.**
 
+[Documentation](https://alfredoperez.github.io/ngx-dev-toolbar/) · [Demo](https://alfredoperez.github.io/ngx-dev-toolbar/)
 
-[📚 Documentation & Demo](https://alfredoperez.github.io/ngx-dev-toolbar/)
+![Angular Toolbar](./docs/images/hero.png)
 
 </div>
 
+## Features
 
-## ✨ Why ngx-dev-toolbar?
+- **Feature Flags** - Override feature flags without backend changes
+- **Permissions** - Test different user permission states
+- **App Features** - Toggle application features by tier
+- **Language** - Switch languages instantly
+- **Presets** - Save and load configuration presets
+- **Zero Bundle Impact** - Dynamic imports exclude toolbar from production
 
-<div align="center">
-  <table>
-    <tr>
-      <td align="center">🚥</td>
-      <td>Toggle feature flags without backend changes</td>
-    </tr>
-    <td align="center">🌍</td>
-      <td>Switch languages instantly</td>
-    </tr>
-    <td align="center">🎨</td>
-      <td>Switch themes on the fly</td>
-    </tr>
-    <td align="center">👤</td>
-      <td>Change user sessions effortlessly</td>
-    </tr>
-    <td align="center">🔄</td>
-      <td>Mock network requests in real-time</td>
-    </tr>
-  </table>
-</div>
-
-No more context switching or backend dependencies - everything you need is right in your browser!
-
-## 🎯 Features
-
-<div class="feature-grid">
-
-### 📦 Available Tools
-
-- Feature Flags
-- Language Switcher
-- Themes `Coming Soon`
-- User Session `Coming Soon`
-- Network Requests Mocker `Coming Soon`
-
-### 🛠️ Extensible
-
-- Create custom tools
-- Add your own functionality
-
-### 🔒 Production Ready
-
-- **Zero bundle impact** - Dynamic imports exclude toolbar from production builds
-- No template changes needed
-- Secure implementation
-
-### 💾 Persistent State
-
-- Settings persist across reloads
-- Import/Export configuration `Coming Soon`
-
-</div>
-
-## 📱 Quick Start
+## Quick Start
 
 ### 1. Install
 
@@ -83,16 +36,14 @@ npm install ngx-dev-toolbar
 
 ```typescript
 import { bootstrapApplication } from '@angular/platform-browser';
-import { AppComponent } from './app/app.component';
 import { isDevMode } from '@angular/core';
 
 async function bootstrap() {
   const appRef = await bootstrapApplication(AppComponent, appConfig);
 
-  // Initialize toolbar only in development
   if (isDevMode()) {
-    const { initDevToolbar } = await import('ngx-dev-toolbar');
-    initDevToolbar(appRef);
+    const { initToolbar } = await import('ngx-dev-toolbar');
+    initToolbar(appRef);
   }
 }
 
@@ -101,304 +52,137 @@ bootstrap();
 
 That's it! No template changes needed. The toolbar automatically attaches to the DOM.
 
-### 3. Configure Tools (Optional)
-
-```typescript
-initDevToolbar(appRef, {
-  config: {
-    showFeatureFlagsTool: true,
-    showPermissionsTool: true,
-    showLanguageTool: true,
-    showAppFeaturesTool: true,
-    showPresetsTool: true,
-  }
-});
-```
-
-## Available Tools
-
-The tools come with a default implementation, but you can create your own tools and add them to the toolbar.
-
-They have a service that you can use to interact with them.
+## Tools
 
 ### Feature Flags
 
-#### Configuration
-
-In order to use the feature flags tool, you need to import the `DevToolbarFeatureFlagService` and inject it in your component.
-
-Then you just need to call the `setAvailableOptions` method with the available feature flags that can come from your backend or a third party service.
+Configure available feature flags:
 
 ```typescript
-import { DevToolbarFeatureFlagService } from 'ngx-dev-toolbar';
-import { inject } from '@angular/core';
+import { ToolbarFeatureFlagService } from 'ngx-dev-toolbar';
 
-@Component({
-  // ... component decorator
-})
+@Component({...})
 export class AppComponent {
-  private featureFlagsService = inject(DevToolbarFeatureFlagService);
+  private featureFlags = inject(ToolbarFeatureFlagService);
 
   constructor() {
-    // Set available feature flags
-    this.featureFlagsService.setAvailableOptions([
+    this.featureFlags.setAvailableOptions([
       { id: 'darkMode', name: 'Dark Mode' },
       { id: 'betaFeatures', name: 'Beta Features' },
-      { id: 'experimentalUI', name: 'Experimental UI' },
     ]);
   }
 }
 ```
 
-Once it is added you should see them in the Feature Flags tool in the Angular Dev Toolbar.
-
 ![Feature Flags Tool](./docs/images/feature-flags-tool.png)
 
-#### Usage
-
-The toolbar provides two methods for retrieving feature flag values:
-
-##### Option 1: Using `getValues()` (Recommended ✨)
-
-The `getValues()` method returns ALL feature flags with overrides already applied, simplifying integration:
+Get flags with overrides applied:
 
 ```typescript
-@Component({
-  // ... component decorator
-})
+@Component({...})
 export class FeatureComponent {
-  private featureFlagsService = inject(DevToolbarFeatureFlagService);
+  private featureFlags = inject(ToolbarFeatureFlagService);
 
   ngOnInit() {
-    // Get all flags with overrides applied
-    this.featureFlagsService.getValues().pipe(
+    this.featureFlags.getValues().pipe(
       map(flags => flags.find(f => f.id === 'darkMode')),
       map(flag => flag?.isEnabled ?? false)
     ).subscribe(isDarkMode => {
-      if (isDarkMode) {
-        // Apply dark mode logic
-      }
-    });
-  }
-}
-```
-
-**Benefits:**
-- ✅ No manual merging with `combineLatest` needed
-- ✅ 60-80% less integration code
-- ✅ Includes `isForced` property to identify overridden flags
-- ✅ Returns all flags (both overridden and natural state)
-
-##### Option 2: Using `getForcedValues()` (Legacy)
-
-The `getForcedValues()` method returns only flags that have been overridden:
-
-```typescript
-@Component({
-  // ... component decorator
-})
-export class FeatureComponent {
-  private featureFlagsService = inject(DevToolbarFeatureFlagService);
-
-  ngOnInit() {
-    this.featureFlagsService.getForcedValues().subscribe((forcedFlags) => {
-      const isDarkMode = forcedFlags.some((flag) => flag.id === 'darkMode');
       // Apply dark mode logic
     });
   }
 }
 ```
 
-> **Note:** This method only returns overridden flags. You need to manually merge with your base flags for complete state.
-
-#### Dev Toolbar Interface
-
-[Screenshot placeholder showing the feature flags interface in the dev toolbar]
-
-### Language Switcher
-
-#### Configuration
+### Permissions
 
 ```typescript
-import { DevToolbarLanguageService } from 'ngx-dev-toolbar';
-import { inject } from '@angular/core';
+import { ToolbarPermissionsService } from 'ngx-dev-toolbar';
 
-@Component({
-  // ... component decorator
-})
+@Component({...})
 export class AppComponent {
-  private languageService = inject(DevToolbarLanguageService);
+  private permissions = inject(ToolbarPermissionsService);
 
   constructor() {
-    // Set available languages
-    this.languageService.setAvailableOptions([
-      { code: 'en', name: 'English' },
-      { code: 'es', name: 'Spanish' },
-      { code: 'fr', name: 'French' },
+    this.permissions.setAvailableOptions([
+      { id: 'admin', name: 'Admin Access' },
+      { id: 'editor', name: 'Editor Access' },
     ]);
   }
 }
 ```
 
-#### Usage
+### App Features
 
 ```typescript
-@Component({
-  // ... component decorator
-})
-export class TranslatedComponent {
-  private languageService = inject(DevToolbarLanguageService);
+import { ToolbarAppFeaturesService } from 'ngx-dev-toolbar';
 
-  ngOnInit() {
-    this.languageService.getForcedValues().subscribe(([selectedLang]) => {
-      // Update component's language
-      this.currentLanguage = selectedLang.code;
-      this.loadTranslations();
-    });
+@Component({...})
+export class AppComponent {
+  private appFeatures = inject(ToolbarAppFeaturesService);
+
+  constructor() {
+    this.appFeatures.setAvailableOptions([
+      { id: 'premium', name: 'Premium Features', tier: 'premium' },
+      { id: 'basic', name: 'Basic Features', tier: 'basic' },
+    ]);
   }
 }
 ```
 
-## 🔄 Migration Guide
+### Language
 
-### Upgrading to v2.x (getValues() API)
-
-If you're using the legacy `getForcedValues()` with manual `combineLatest` merging, you can simplify your code significantly:
+```typescript
+import { ToolbarLanguageService } from 'ngx-dev-toolbar';
 
-#### Before (Manual Merging):
+@Component({...})
+export class AppComponent {
+  private language = inject(ToolbarLanguageService);
 
-```typescript
-@Injectable()
-export class FeatureFlagService {
-  private store = inject(Store);
-  private devToolbar = inject(DevToolbarFeatureFlagService);
-
-  getFlag(flagId: string): Observable<boolean> {
-    return combineLatest([
-      this.store.select(state => state.flags[flagId]),
-      this.devToolbar.getForcedValues().pipe(startWith([]))
-    ]).pipe(
-      map(([baseValue, overrides]) => {
-        const override = overrides.find(o => o.id === flagId);
-        return override ? override.isEnabled : baseValue;
-      })
-    );
+  constructor() {
+    this.language.setAvailableOptions([
+      { code: 'en', name: 'English' },
+      { code: 'es', name: 'Spanish' },
+      { code: 'fr', name: 'French' },
+    ]);
   }
 }
 ```
 
-#### After (Using getValues()):
+## Configuration
 
-```typescript
-@Injectable()
-export class FeatureFlagService {
-  private store = inject(Store);
-  private devToolbar = inject(DevToolbarFeatureFlagService);
-
-  getFlag(flagId: string): Observable<boolean> {
-    return this.devToolbar.getValues().pipe(
-      map(flags => flags.find(f => f.id === flagId)),
-      map(flag => flag?.isEnabled ?? this.getBaseValue(flagId))
-    );
-  }
+Customize which tools are visible:
 
-  private getBaseValue(flagId: string): boolean {
-    return this.store.selectSnapshot(state => state.flags[flagId]);
+```typescript
+initToolbar(appRef, {
+  config: {
+    showFeatureFlagsTool: true,
+    showPermissionsTool: true,
+    showLanguageTool: true,
+    showAppFeaturesTool: true,
+    showPresetsTool: true,
   }
-}
+});
 ```
 
-**What changed:**
-- ❌ Removed `combineLatest` complexity
-- ❌ Removed manual override merging logic
-- ✅ Single observable with merged state
-- ✅ ~60% less code
-
-### Available for All Tools
-
-The `getValues()` method is available for:
-- ✅ **DevToolbarFeatureFlagService** - Feature flags with overrides
-- ✅ **DevToolbarPermissionsService** - Permissions with overrides
-- ✅ **DevToolbarAppFeaturesService** - App features with overrides
-- ℹ️ **DevToolbarLanguageService** - Returns forced language (same as `getForcedValues()`)
+### Keyboard Shortcuts
 
-### Breaking Changes
+- **Ctrl+Shift+D** - Toggle toolbar visibility
 
-**None!** This is a non-breaking change. Both APIs work:
-- `getValues()` - New, recommended method
-- `getForcedValues()` - Legacy method, still supported
+## API Reference
 
-## Custom Tools
+All tool services implement the `ToolbarService<T>` interface:
 
-For custom tools, use the template-based approach in your component:
-
-```typescript
-import { DevToolbarComponent, DevToolbarToolComponent } from 'ngx-dev-toolbar';
-
-@Component({
-  imports: [DevToolbarComponent, DevToolbarToolComponent],
-  template: `
-    <ndt-toolbar>
-      <ndt-toolbar-tool [options]="options" [icon]="'bolt'" [title]="'My Tool'">
-        <p>Custom content here</p>
-      </ndt-toolbar-tool>
-    </ndt-toolbar>
-  `
-})
-```
-
-Note: When using custom tools, the toolbar will be bundled with your application.
+| Method | Description |
+|--------|-------------|
+| `setAvailableOptions(options: T[])` | Set options displayed in the tool |
+| `getValues()` | Get all values with overrides applied |
+| `getForcedValues()` | Get only overridden values |
 
 ## Contributing
 
-We welcome contributions! Please see our [contributing guidelines](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/CONTRIBUTING.md) for details.
+Contributions welcome! See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/LICENSE) file for details.
-
-## Support
-
-<div align="center">
-
-<table>
-  <tr>
-    <td align="center">
-      <a href="https://alfredoperez.github.io/ngx-dev-toolbar/">
-        📚
-        <br />
-        Documentation
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/alfredoperez/ngx-dev-toolbar/issues">
-        🐛
-        <br />
-        Issue Tracker
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/alfredoperez/ngx-dev-toolbar/discussions">
-        💬
-        <br />
-        Discussions
-      </a>
-    </td>
-  </tr>
-</table>
-
-</div>
-
-## 🌟 Stay Connected
-
-<div align="center">
-
-[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-blue)](https://www.linkedin.com/in/alfredo-perez/)
-[![Bluesky](https://img.shields.io/badge/Bluesky-Follow-1DA1F2)](https://bsky.app/profile/alfredo-perez.bsky.social)
-[![GitHub Stars](https://img.shields.io/github/stars/alfredoperez/ngx-dev-toolbar?style=social)](https://github.com/alfredoperez/ngx-dev-toolbar)
-
-<hr />
-
-<p>Built with ❤️ using <a href="https://nx.dev">Nx</a></p>
-
-</div>
+MIT

package/components/select/select.component.d.ts

@@ -12,7 +12,7 @@ export declare class ToolbarSelectComponent {
     ariaLabel: import("@angular/core").InputSignal<string>;
     label: import("@angular/core").InputSignal<string>;
     size: import("@angular/core").InputSignal<"small" | "medium">;
-    readonly theme: import("@angular/core").Signal<"dark" | "light">;
+    readonly theme: import("@angular/core").Signal<"light" | "dark">;
     protected readonly selectMenuId: string;
     isOpen: import("@angular/core").WritableSignal<boolean>;
     selectedLabel: import("@angular/core").Signal<string>;

package/components/window/window.component.d.ts

@@ -7,7 +7,7 @@ export declare class ToolbarWindowComponent {
     readonly closed: import("@angular/core").OutputEmitterRef<void>;
     readonly maximize: import("@angular/core").OutputEmitterRef<void>;
     readonly minimize: import("@angular/core").OutputEmitterRef<void>;
-    readonly theme: import("@angular/core").Signal<"dark" | "light">;
+    readonly theme: import("@angular/core").Signal<"light" | "dark">;
     protected onClose(): void;
     protected onMaximize(): void;
     protected onMinimize(): void;

package/package.json

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

package/toolbar-state.service.d.ts

@@ -7,7 +7,7 @@ export declare class ToolbarStateService {
     readonly activeToolId: import("@angular/core").Signal<string | null>;
     readonly hasActiveTool: import("@angular/core").Signal<boolean>;
     readonly error: import("@angular/core").Signal<string | null>;
-    readonly theme: import("@angular/core").Signal<"dark" | "light">;
+    readonly theme: import("@angular/core").Signal<"light" | "dark">;
     /**
      * The delay to hide the toolbar
      */