ngx-dev-toolbar 1.0.3 → 1.0.5

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

@@ -0,0 +1,14 @@
+import { DevToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import * as i0 from "@angular/core";
+export declare class DevToolbarLanguageToolComponent {
+    private readonly languageService;
+    protected readonly options: DevToolbarWindowOptions;
+    activeLanguage: import("@angular/core").WritableSignal<string>;
+    languageOptions: import("@angular/core").Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    onLanguageChange(language: string): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarLanguageToolComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DevToolbarLanguageToolComponent, "ndt-language-tool", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,4 @@
+export interface Language {
+    id: string;
+    name: string;
+}

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

@@ -0,0 +1,19 @@
+import { Observable } from 'rxjs';
+import { DevToolsService } from '../../models/dev-tools.interface';
+import { Language } from './language.models';
+import * as i0 from "@angular/core";
+export declare class DevToolbarLanguageService implements DevToolsService<Language> {
+    private internalService;
+    /**
+     * Sets the available languages that will be displayed in the tool on the dev toolbar
+     * @param languages The languages to be displayed
+     */
+    setAvailableOptions(languages: Language[]): void;
+    /**
+     * Gets the languages that were forced/modified through the tool on the dev toolbar
+     * @returns Observable of forced languages array
+     */
+    getForcedValues(): Observable<Language[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarLanguageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DevToolbarLanguageService>;
+}

package/tools/network-mocker-tool/network-mocker-tool.component.d.ts

@@ -0,0 +1,23 @@
+import { DevToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import * as i0 from "@angular/core";
+export declare class DevToolbarNetworkMockerToolComponent {
+    private readonly networkMockerService;
+    protected readonly newMockUrl: import("@angular/core").WritableSignal<string>;
+    protected readonly newMockMethod: import("@angular/core").WritableSignal<string>;
+    protected readonly newMockStatus: import("@angular/core").WritableSignal<string>;
+    protected readonly newMockResponse: import("@angular/core").WritableSignal<string>;
+    protected readonly mockRequests: import("@angular/core").Signal<import("./network-mocker.models").MockRequest[]>;
+    protected readonly isMockingEnabled: import("@angular/core").Signal<boolean>;
+    protected readonly hasNoMocks: import("@angular/core").Signal<boolean>;
+    protected readonly options: DevToolbarWindowOptions;
+    protected readonly httpMethods: {
+        value: string;
+        label: string;
+    }[];
+    protected onAddMock(): void;
+    protected onToggleMocking(): void;
+    protected onToggleMock(mockId: string): void;
+    protected onRemoveMock(mockId: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarNetworkMockerToolComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DevToolbarNetworkMockerToolComponent, "ndt-network-mocker-tool", never, {}, {}, never, never, true, never>;
+}

package/tools/network-mocker-tool/network-mocker.models.d.ts

@@ -0,0 +1,16 @@
+export interface MockRequest {
+    id: string;
+    url: string;
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    status: number;
+    response: any;
+    isActive: boolean;
+    createdAt: Date;
+}
+export interface MockRequestConfig {
+    url: string;
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    status?: number;
+    response?: any;
+    delay?: number;
+}

package/tools/network-mocker-tool/network-mocker.service.d.ts

@@ -0,0 +1,16 @@
+import { MockRequest, MockRequestConfig } from './network-mocker.models';
+import * as i0 from "@angular/core";
+export declare class DevToolbarNetworkMockerService {
+    private readonly mockRequests;
+    private readonly isMockingEnabled;
+    getMockRequests(): import("@angular/core").Signal<MockRequest[]>;
+    getIsMockingEnabled(): import("@angular/core").Signal<boolean>;
+    addMockRequest(config: MockRequestConfig): void;
+    removeMockRequest(id: string): void;
+    toggleMockRequest(id: string): void;
+    enableMocking(): void;
+    disableMocking(): void;
+    clearAllMocks(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarNetworkMockerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DevToolbarNetworkMockerService>;
+}

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

@@ -0,0 +1,34 @@
+import { Observable } from 'rxjs';
+import { DevToolbarPermission, ForcedPermissionsState } from './permissions.models';
+import * as i0 from "@angular/core";
+export declare class DevToolbarInternalPermissionsService {
+    private readonly STORAGE_KEY;
+    private storageService;
+    private appPermissions$;
+    private forcedStateSubject;
+    private readonly forcedState$;
+    permissions$: Observable<DevToolbarPermission[]>;
+    permissions: import("@angular/core").Signal<DevToolbarPermission[]>;
+    constructor();
+    setAppPermissions(permissions: DevToolbarPermission[]): void;
+    setPermission(id: string, granted: boolean): void;
+    removePermissionOverride(id: string): void;
+    getForcedPermissions(): Observable<DevToolbarPermission[]>;
+    /**
+     * Apply a preset permissions state, replacing the current forced state.
+     * Useful for automated testing or restoring saved configurations.
+     * @param state The preset forced permissions state to apply
+     */
+    applyPresetPermissions(state: ForcedPermissionsState): void;
+    /**
+     * Get the current forced permissions state.
+     * Returns a deep copy to prevent external mutations.
+     * @returns Current forced permissions state
+     */
+    getCurrentForcedState(): ForcedPermissionsState;
+    private loadForcedState;
+    private isValidForcedState;
+    private validateAndCleanForcedState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarInternalPermissionsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DevToolbarInternalPermissionsService>;
+}

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

@@ -0,0 +1,27 @@
+import { DevToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import { DevToolbarPermission, PermissionFilter } from './permissions.models';
+import * as i0 from "@angular/core";
+export declare class DevToolbarPermissionsToolComponent {
+    private readonly permissionsService;
+    protected readonly activeFilter: import("@angular/core").WritableSignal<PermissionFilter>;
+    protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
+    protected readonly permissions: import("@angular/core").Signal<DevToolbarPermission[]>;
+    protected readonly hasNoPermissions: import("@angular/core").Signal<boolean>;
+    protected readonly filteredPermissions: import("@angular/core").Signal<DevToolbarPermission[]>;
+    protected readonly hasNoFilteredPermissions: import("@angular/core").Signal<boolean>;
+    protected readonly options: DevToolbarWindowOptions;
+    protected readonly filterOptions: {
+        value: string;
+        label: string;
+    }[];
+    protected readonly permissionValueOptions: {
+        value: string;
+        label: string;
+    }[];
+    onFilterChange(value: string | undefined): void;
+    onPermissionChange(id: string, value: string): void;
+    onSearchChange(query: string): void;
+    protected getPermissionValue(permission: DevToolbarPermission): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarPermissionsToolComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DevToolbarPermissionsToolComponent, "ndt-permissions-tool", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Represents a permission in the developer toolbar.
+ * Used to configure and override application permissions for testing.
+ */
+export interface DevToolbarPermission {
+    /** Unique identifier for the permission */
+    id: string;
+    /** Human-readable name displayed in the UI */
+    name: string;
+    /** Optional description explaining the permission's purpose */
+    description?: string;
+    /** Whether the permission is currently granted */
+    isGranted: boolean;
+    /** Whether the permission's value has been overridden through the toolbar */
+    isForced: boolean;
+}
+/**
+ * Internal state representing forced permission overrides.
+ * Persisted to localStorage for session continuity.
+ */
+export interface ForcedPermissionsState {
+    /** Array of permission IDs that are forced to granted */
+    granted: string[];
+    /** Array of permission IDs that are forced to denied */
+    denied: string[];
+}
+/**
+ * Filter options for displaying permissions in the tool.
+ */
+export type PermissionFilter = 'all' | 'forced' | 'granted' | 'denied';
+/**
+ * Permission value options for the dropdown control.
+ */
+export type PermissionValue = 'not-forced' | 'granted' | 'denied';

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

@@ -0,0 +1,87 @@
+import { Observable } from 'rxjs';
+import { DevToolsService } from '../../models/dev-tools.interface';
+import { DevToolbarPermission, ForcedPermissionsState } from './permissions.models';
+import * as i0 from "@angular/core";
+/**
+ * Public service for integrating the Permissions Tool with your application.
+ * Use this service to:
+ * 1. Register your application's permissions with setAvailableOptions()
+ * 2. Listen for toolbar permission overrides with getForcedValues()
+ * 3. Apply preset permission states for testing with applyPreset()
+ *
+ * @example
+ * ```typescript
+ * constructor(private permissionsService: DevToolbarPermissionsService) {
+ *   // Register permissions
+ *   this.permissionsService.setAvailableOptions([
+ *     { id: 'can-edit', name: 'Can Edit', isGranted: false, isForced: false }
+ *   ]);
+ *
+ *   // Listen for overrides
+ *   this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+ *     // Update your app's permission state
+ *   });
+ * }
+ * ```
+ */
+export declare class DevToolbarPermissionsService implements DevToolsService<DevToolbarPermission> {
+    private internalService;
+    /**
+     * Sets the available permissions that will be displayed in the toolbar tool.
+     * Call this in your app initialization to register permissions.
+     *
+     * @param permissions Array of permissions to display in the toolbar
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.setAvailableOptions([
+     *   {
+     *     id: 'can-edit-posts',
+     *     name: 'Edit Posts',
+     *     description: 'Can edit blog posts',
+     *     isGranted: false,
+     *     isForced: false
+     *   }
+     * ]);
+     * ```
+     */
+    setAvailableOptions(permissions: DevToolbarPermission[]): void;
+    /**
+     * Gets an observable of permissions that were forced/overridden through the toolbar.
+     * Subscribe to this to update your application's permission state.
+     *
+     * @returns Observable emitting array of forced permissions whenever changes occur
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+     *   forcedPermissions.forEach(permission => {
+     *     this.updatePermission(permission.id, permission.isGranted);
+     *   });
+     * });
+     * ```
+     */
+    getForcedValues(): Observable<DevToolbarPermission[]>;
+    /**
+     * Apply a preset permission state. Useful for automated testing scenarios.
+     *
+     * @param state The forced permissions state to apply
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.applyPreset({
+     *   granted: ['can-edit-posts'],
+     *   denied: ['can-delete-posts']
+     * });
+     * ```
+     */
+    applyPreset(state: ForcedPermissionsState): void;
+    /**
+     * Get the current forced permission state.
+     *
+     * @returns Current forced permissions state
+     */
+    getCurrentState(): ForcedPermissionsState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolbarPermissionsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DevToolbarPermissionsService>;
+}

package/utils/storage.service.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+export declare class DevToolsStorageService {
+    private readonly PREFIX;
+    private readonly TOOLS_KEY;
+    private readonly SETTINGS_KEY;
+    set<T>(key: string, value: T): void;
+    get<T>(key: string): T | null;
+    remove(key: string): void;
+    getAllSettings(): Record<string, unknown>;
+    setAllSettings(settings: Record<string, unknown>): void;
+    clearAllSettings(): void;
+    getToolKeys(): string[];
+    private addToolKey;
+    private removeToolKey;
+    private getToolKey;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DevToolsStorageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DevToolsStorageService>;
+}

package/eslint.config.cjs

@@ -1,47 +0,0 @@
-const nx = require('@nx/eslint-plugin');
-const baseConfig = require('../../eslint.config.cjs');
-
-module.exports = [
-  ...baseConfig,
-  {
-    files: ['**/*.json'],
-    rules: {
-      '@nx/dependency-checks': 'off',
-    },
-    ignores: ['**/eslint.config.cjs'],
-  },
-  {
-    files: ['**/*.json'],
-    languageOptions: {
-      parser: require('jsonc-eslint-parser'),
-    },
-  },
-  ...nx.configs['flat/angular'],
-  ...nx.configs['flat/angular-template'],
-  {
-    files: ['**/*.ts'],
-    rules: {
-      '@angular-eslint/directive-selector': [
-        'error',
-        {
-          type: 'attribute',
-          prefix: 'ndt',
-          style: 'camelCase',
-        },
-      ],
-      '@angular-eslint/component-selector': [
-        'error',
-        {
-          type: 'element',
-          prefix: 'ndt',
-          style: 'kebab-case',
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/*.html'],
-    // Override or add rules here
-    rules: {},
-  },
-];

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/ngx-dev-toolbar",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

package/project.json

@@ -1,37 +0,0 @@
-{
-  "name": "ngx-dev-toolbar",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/ngx-dev-toolbar/src",
-  "prefix": "ndt",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
-      "options": {
-        "project": "libs/ngx-dev-toolbar/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/ngx-dev-toolbar/tsconfig.lib.prod.json"
-        },
-        "development": {
-          "tsConfig": "libs/ngx-dev-toolbar/tsconfig.lib.json"
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/vite:test",
-      "outputs": ["{options.reportsDirectory}"],
-      "options": {
-        "reportsDirectory": "../../coverage/libs/ngx-dev-toolbar"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-
-  }
-}

package/src/components/button/button.component.scss

@@ -1,49 +0,0 @@
-@use '../../styles' as devtools;
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ndt-spacing-xs);
-  padding: var(--ndt-spacing-xs) var(--ndt-spacing-sm);
-  border: 1px solid var(--ndt-border-primary);
-  border-radius: var(--ndt-border-radius-medium);
-  background: var(--ndt-bg-primary);
-  color: var(--ndt-text-primary);
-  cursor: pointer;
-  transition: var(--ndt-transition-default);
-  outline: none;
-  font-family: inherit;
-
-  &:hover {
-    background: var(--ndt-hover-bg);
-    border-color: var(--ndt-primary);
-  }
-
-  &:focus-visible {
-    outline: none;
-    background: var(--ndt-hover-bg);
-    box-shadow: 0 0 0 2px rgba(var(--ndt-primary-rgb), 0.2);
-  }
-
-  &.primary {
-    background: var(--ndt-primary);
-    color: var(--ndt-text-on-primary);
-    border-color: var(--ndt-primary);
-
-    &:hover {
-      background: var(--ndt-primary);
-      border-color: var(--ndt-primary);
-    }
-  }
-
-  &.icon-only {
-    padding: var(--ndt-spacing-xs);
-    width: 32px;
-    height: 32px;
-    justify-content: center;
-  }
-
-  &.small {
-    font-size: var(--ndt-font-size-sm);
-  }
-}

package/src/components/button/button.component.ts

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { DevToolbarIconComponent } from '../icons/icon.component';
-import { IconName } from '../icons/icon.models';
-
-@Component({
-  selector: 'ndt-button',
-  standalone: true,
-  imports: [DevToolbarIconComponent],
-  template: `
-    <button
-      class="button"
-      [attr.aria-label]="ariaLabel()"
-      [type]="type()"
-      [class.button--active]="isActive()"
-      [class.button--icon]="variant() === 'icon'"
-    >
-      @if (icon()) {
-        <ndt-icon [name]="icon() || 'star'" />
-      }
-      @if (label()) {
-        <span class="button__label">{{ label() }}</span>
-      }
-      <ng-content />
-    </button>
-  `,
-  styleUrls: ['./button.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DevToolbarButtonComponent {
-  readonly type = input<'button' | 'submit' | 'reset'>('button');
-  readonly variant = input<'default' | 'icon'>('default');
-  readonly icon = input<IconName>();
-  readonly label = input<string>();
-  readonly ariaLabel = input<string>();
-  readonly isActive = input<boolean>(false);
-}

package/src/components/card/card.component.scss

@@ -1,18 +0,0 @@
-.card {
-  background: var(--ndt-bg-primary);
-  border-radius: var(--ndt-border-radius-large);
-  padding: var(--ndt-spacing-md);
-  cursor: pointer;
-  transition: var(--ndt-transition-default);
-  border: 1px solid var(--ndt-border-subtle);
-  position: relative;
-  flex: 1;
-  height: 120px;
-  display: flex;
-
-  &:hover {
-    background: var(--ndt-hover-bg);
-    border-color: var(--ndt-primary);
-    box-shadow: 0 0 0 1px rgba(var(--ndt-primary-rgb), 0.3);
-  }
-}

package/src/components/card/card.component.ts

@@ -1,30 +0,0 @@
-import { Component, signal } from '@angular/core';
-
-@Component({
-  selector: 'ndt-card',
-  standalone: true,
-  template: `
-    <div
-      class="card"
-      role="button"
-      tabindex="0"
-      (click)="onClick()"
-      (keydown.enter)="onClick()"
-      (keydown.space)="onClick()"
-      [class.card--hover]="isHovered()"
-      (mouseenter)="isHovered.set(true)"
-      (mouseleave)="isHovered.set(false)"
-    >
-      <ng-content></ng-content>
-    </div>
-  `,
-  styleUrls: ['./card.component.scss'],
-})
-export class DevToolbarCardComponent {
-  readonly click = signal<void>(undefined);
-  protected readonly isHovered = signal(false);
-
-  onClick(): void {
-    this.click.set();
-  }
-}

package/src/components/clickable-card/clickable-card.component.scss

@@ -1,39 +0,0 @@
-.clickable-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ndt-spacing-sm);
-  height: 100%;
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: var(--ndt-border-radius-medium);
-    background: var(--ndt-hover-bg);
-    color: var(--ndt-text-primary);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ndt-spacing-xs);
-  }
-
-  &__title {
-    color: var(--ndt-text-primary);
-    font-size: var(--ndt-font-size-sm);
-    font-weight: 500;
-  }
-
-  &__subtitle {
-    color: var(--ndt-text-muted);
-    font-size: var(--ndt-font-size-xs);
-    line-height: 1.4;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-}

package/src/components/clickable-card/clickable-card.component.ts

@@ -1,34 +0,0 @@
-import { Component, input, signal } from '@angular/core';
-import { DevToolbarCardComponent } from '../card/card.component';
-import { DevToolbarIconComponent } from '../icons/icon.component';
-import { IconName } from '../icons/icon.models';
-
-@Component({
-  selector: 'ndt-clickable-card',
-  standalone: true,
-  imports: [DevToolbarCardComponent, DevToolbarIconComponent],
-  template: `
-    <ndt-card (clicked)="onClick()">
-      <div class="clickable-card">
-        <div class="clickable-card__icon">
-          <ndt-icon [name]="icon()" />
-        </div>
-        <div class="clickable-card__content">
-          <div class="clickable-card__title">{{ title() }}</div>
-          <div class="clickable-card__subtitle">{{ subtitle() }}</div>
-        </div>
-      </div>
-    </ndt-card>
-  `,
-  styleUrls: ['./clickable-card.component.scss'],
-})
-export class DevToolbarClickableCardComponent {
-  readonly icon = input.required<IconName>();
-  readonly title = input.required<string>();
-  readonly subtitle = input.required<string>();
-  readonly click = signal<void>(undefined);
-
-  onClick(): void {
-    this.click.set();
-  }
-}

package/src/components/icons/angular-icon.component.ts

@@ -1,35 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'ndt-angular-icon',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-      <defs>
-        <linearGradient
-          id="angular-gradient"
-          x1="6"
-          x2="18"
-          y1="20"
-          y2="4"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stop-color="#E40035" />
-          <stop offset=".24" stop-color="#F60A48" />
-          <stop offset=".352" stop-color="#F20755" />
-          <stop offset=".494" stop-color="#DC087D" />
-          <stop offset=".745" stop-color="#9717E7" />
-          <stop offset="1" stop-color="#6C00F5" />
-        </linearGradient>
-      </defs>
-      <g fill="url(#angular-gradient)">
-        <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
-        <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
-        <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
-        <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
-      </g>
-    </svg>
-  `,
-})
-export class AngularIconComponent {}