ngx-dev-toolbar 2.0.9 → 2.1.0

package/components/icons/icon.component.d.ts

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 export declare class DevToolbarIconComponent {
     private readonly stateService;
     name: import("@angular/core").InputSignal<IconName>;
-    fill: import("@angular/core").Signal<"#000000" | "#FFFFFF">;
+    fill: import("@angular/core").Signal<"#FFFFFF" | "#000000">;
     static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarIconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DevToolbarIconComponent, "ndt-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/dev-toolbar-state.service.d.ts

@@ -13,6 +13,12 @@ export declare class DevToolbarStateService {
      */
     readonly delay: import("@angular/core").Signal<number>;
     readonly config: import("@angular/core").Signal<DevToolbarConfig>;
+    /**
+     * Indicates if the toolbar is enabled based on config.
+     * When disabled, toolbar UI won't render and services won't return forced values.
+     * @default true
+     */
+    readonly isEnabled: import("@angular/core").Signal<boolean>;
     setVisibility(isVisible: boolean): void;
     setTheme(theme: 'light' | 'dark'): void;
     setActiveTool(toolId: string | null): void;

package/fesm2022/ngx-dev-toolbar.mjs

@@ -35,6 +35,12 @@ class DevToolbarStateService {
          */
         this.delay = computed(() => this.state().delay);
         this.config = computed(() => this.state().config);
+        /**
+         * Indicates if the toolbar is enabled based on config.
+         * When disabled, toolbar UI won't render and services won't return forced values.
+         * @default true
+         */
+        this.isEnabled = computed(() => this.state().config.enabled ?? true);
     }
     // State updates
     setVisibility(isVisible) {
@@ -2457,6 +2463,7 @@ class DevToolbarInternalAppFeaturesService {
     constructor() {
         this.STORAGE_KEY = 'app-features';
         this.storageService = inject(DevToolsStorageService);
+        this.stateService = inject(DevToolbarStateService);
         this.appFeaturesSubject = new BehaviorSubject([]);
         this.forcedFeaturesSubject = new BehaviorSubject({
             enabled: [],
@@ -2519,7 +2526,13 @@ class DevToolbarInternalAppFeaturesService {
      * Get observable stream of features that have forced overrides
      */
     getForcedFeatures() {
-        return this.features$.pipe(map((features) => features.filter((feature) => feature.isForced)));
+        return this.features$.pipe(map((features) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return features.filter((feature) => feature.isForced);
+        }));
     }
     /**
      * Force a feature to enabled or disabled state.
@@ -2602,6 +2615,10 @@ class DevToolbarInternalAppFeaturesService {
      * @returns Features with merged forced state
      */
     mergeForcedState(appFeatures, forcedState) {
+        // If toolbar is disabled, return app features without overrides
+        if (!this.stateService.isEnabled()) {
+            return appFeatures;
+        }
         return appFeatures.map((feature) => {
             const isInEnabled = forcedState.enabled.includes(feature.id);
             const isInDisabled = forcedState.disabled.includes(feature.id);
@@ -2905,6 +2922,7 @@ class DevToolbarInternalFeatureFlagService {
     constructor() {
         this.STORAGE_KEY = 'feature-flags';
         this.storageService = inject(DevToolsStorageService);
+        this.stateService = inject(DevToolbarStateService);
         this.appFlags$ = new BehaviorSubject([]);
         this.forcedFlagsSubject = new BehaviorSubject({
             enabled: [],
@@ -2915,6 +2933,10 @@ class DevToolbarInternalFeatureFlagService {
             this.appFlags$,
             this.forcedFlags$,
         ]).pipe(map(([appFlags, { enabled, disabled }]) => {
+            // If toolbar is disabled, return app flags without overrides
+            if (!this.stateService.isEnabled()) {
+                return appFlags;
+            }
             return appFlags.map((flag) => {
                 const isForced = enabled.includes(flag.id) || disabled.includes(flag.id);
                 return {
@@ -2939,7 +2961,13 @@ class DevToolbarInternalFeatureFlagService {
         return this.appFlags$.asObservable();
     }
     getForcedFlags() {
-        return this.flags$.pipe(map((flags) => flags.filter((flag) => flag.isForced)));
+        return this.flags$.pipe(map((flags) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return flags.filter((flag) => flag.isForced);
+        }));
     }
     setFlag(flagId, isEnabled) {
         const { enabled, disabled } = this.forcedFlagsSubject.value;
@@ -3580,6 +3608,7 @@ class DevToolbarInternalLanguageService {
     constructor() {
         this.STORAGE_KEY = 'language';
         this.storageService = inject(DevToolsStorageService);
+        this.stateService = inject(DevToolbarStateService);
         this.languages$ = new BehaviorSubject([]);
         this.forcedLanguage$ = new BehaviorSubject(null);
         this.languages = toSignal(this.languages$, { initialValue: [] });
@@ -3596,7 +3625,13 @@ class DevToolbarInternalLanguageService {
         this.storageService.set(this.STORAGE_KEY, language);
     }
     getForcedLanguage() {
-        return this.forcedLanguage$.pipe(map((language) => (language ? [language] : [])));
+        return this.forcedLanguage$.pipe(map((language) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return language ? [language] : [];
+        }));
     }
     removeForcedLanguage() {
         this.forcedLanguage$.next(null);
@@ -3711,6 +3746,7 @@ class DevToolbarInternalPermissionsService {
     constructor() {
         this.STORAGE_KEY = 'permissions';
         this.storageService = inject(DevToolsStorageService);
+        this.stateService = inject(DevToolbarStateService);
         this.appPermissions$ = new BehaviorSubject([]);
         this.forcedStateSubject = new BehaviorSubject({
             granted: [],
@@ -3721,6 +3757,10 @@ class DevToolbarInternalPermissionsService {
             this.appPermissions$,
             this.forcedState$,
         ]).pipe(map(([appPermissions, { granted, denied }]) => {
+            // If toolbar is disabled, return app permissions without overrides
+            if (!this.stateService.isEnabled()) {
+                return appPermissions;
+            }
             return appPermissions.map((permission) => {
                 const isForced = granted.includes(permission.id) || denied.includes(permission.id);
                 return {
@@ -3766,7 +3806,13 @@ class DevToolbarInternalPermissionsService {
         this.storageService.set(this.STORAGE_KEY, newState);
     }
     getForcedPermissions() {
-        return this.permissions$.pipe(map((permissions) => permissions.filter((permission) => permission.isForced)));
+        return this.permissions$.pipe(map((permissions) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return permissions.filter((permission) => permission.isForced);
+        }));
     }
     /**
      * Apply a preset permissions state, replacing the current forced state.
@@ -5028,33 +5074,35 @@ class DevToolbarComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      aria-label="Developer tools"
-      role="toolbar"
-      class="ndt-toolbar"
-      [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
-      [attr.data-theme]="state.theme()"
-      [class.ndt-toolbar--active]="state.isVisible()"
-      (mouseenter)="onMouseEnter()"
-    >
-      <ndt-home-tool />
-      <ng-content />
-      @if (config().showLanguageTool ?? false) {
-        <ndt-language-tool />
-      }
-      @if (config().showPresetsTool ?? false) {
-        <ndt-presets-tool />
-      }
-      @if (config().showAppFeaturesTool ?? false) {
-        <ndt-app-features-tool />
-      }
-      @if (config().showPermissionsTool ?? false) {
-        <ndt-permissions-tool />
-      }
-      @if (config().showFeatureFlagsTool ?? false) {
-        <ndt-feature-flags-tool />
-      }
-    </div>
+    @if (config().enabled ?? true) {
+      <div
+        aria-label="Developer tools"
+        role="toolbar"
+        class="ndt-toolbar"
+        [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
+        [attr.data-theme]="state.theme()"
+        [class.ndt-toolbar--active]="state.isVisible()"
+        (mouseenter)="onMouseEnter()"
+      >
+        <ndt-home-tool />
+        <ng-content />
+        @if (config().showLanguageTool ?? false) {
+          <ndt-language-tool />
+        }
+        @if (config().showPresetsTool ?? false) {
+          <ndt-presets-tool />
+        }
+        @if (config().showAppFeaturesTool ?? false) {
+          <ndt-app-features-tool />
+        }
+        @if (config().showPermissionsTool ?? false) {
+          <ndt-permissions-tool />
+        }
+        @if (config().showFeatureFlagsTool ?? false) {
+          <ndt-feature-flags-tool />
+        }
+      </div>
+    }
   `, isInline: true, styles: [":host{display:contents;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ndt-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.ndt-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: DevToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: DevToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], animations: [
             trigger('toolbarState', [
                 state('hidden', style({
@@ -5079,33 +5127,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         DevToolbarPermissionsToolComponent,
                         DevToolbarPresetsToolComponent,
                     ], template: `
-    <div
-      aria-label="Developer tools"
-      role="toolbar"
-      class="ndt-toolbar"
-      [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
-      [attr.data-theme]="state.theme()"
-      [class.ndt-toolbar--active]="state.isVisible()"
-      (mouseenter)="onMouseEnter()"
-    >
-      <ndt-home-tool />
-      <ng-content />
-      @if (config().showLanguageTool ?? false) {
-        <ndt-language-tool />
-      }
-      @if (config().showPresetsTool ?? false) {
-        <ndt-presets-tool />
-      }
-      @if (config().showAppFeaturesTool ?? false) {
-        <ndt-app-features-tool />
-      }
-      @if (config().showPermissionsTool ?? false) {
-        <ndt-permissions-tool />
-      }
-      @if (config().showFeatureFlagsTool ?? false) {
-        <ndt-feature-flags-tool />
-      }
-    </div>
+    @if (config().enabled ?? true) {
+      <div
+        aria-label="Developer tools"
+        role="toolbar"
+        class="ndt-toolbar"
+        [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
+        [attr.data-theme]="state.theme()"
+        [class.ndt-toolbar--active]="state.isVisible()"
+        (mouseenter)="onMouseEnter()"
+      >
+        <ndt-home-tool />
+        <ng-content />
+        @if (config().showLanguageTool ?? false) {
+          <ndt-language-tool />
+        }
+        @if (config().showPresetsTool ?? false) {
+          <ndt-presets-tool />
+        }
+        @if (config().showAppFeaturesTool ?? false) {
+          <ndt-app-features-tool />
+        }
+        @if (config().showPermissionsTool ?? false) {
+          <ndt-permissions-tool />
+        }
+        @if (config().showFeatureFlagsTool ?? false) {
+          <ndt-feature-flags-tool />
+        }
+      </div>
+    }
   `, animations: [
                         trigger('toolbarState', [
                             state('hidden', style({