ngx-dev-toolbar 1.0.3 → 1.0.5

package/src/dev-toolbar.component.ts

@@ -1,105 +0,0 @@
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
-import {
-  Component,
-  DestroyRef,
-  OnInit,
-  inject,
-  isDevMode,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { fromEvent } from 'rxjs';
-import { filter, throttleTime } from 'rxjs/operators';
-import { DevToolbarStateService } from './dev-toolbar-state.service';
-import { DevToolbarFeatureFlagsToolComponent } from './tools/feature-flags-tool/feature-flags-tool.component';
-import { DevToolbarHomeToolComponent } from './tools/home-tool/home-tool.component';
-import { SettingsService } from './tools/home-tool/settings.service';
-import { DevToolbarLanguageToolComponent } from './tools/language-tool/language-tool.component';
-
-@Component({
-  standalone: true,
-  selector: 'ndt-toolbar',
-  styleUrls: ['./dev-toolbar.component.scss'],
-  imports: [
-    DevToolbarHomeToolComponent,
-    DevToolbarLanguageToolComponent,
-    DevToolbarFeatureFlagsToolComponent,
-  ],
-  template: `
-    @if (isDevMode) {
-    <div
-      aria-label="Developer tools"
-      role="toolbar"
-      class="dev-toolbar"
-      [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
-      [attr.data-theme]="state.theme()"
-      [class.dev-toolbar--active]="state.isVisible()"
-      (mouseenter)="onMouseEnter()"
-    >
-      <ndt-home-tool />
-      <ndt-language-tool />
-      <ndt-feature-flags-tool />
-      <ng-content />
-    </div>
-    }
-  `,
-  animations: [
-    trigger('toolbarState', [
-      state(
-        'hidden',
-        style({
-          transform: 'translate(-50%, calc(100% + -1.2rem))',
-        })
-      ),
-      state(
-        'visible',
-        style({
-          transform: 'translate(-50%, -1rem)',
-        })
-      ),
-      transition('hidden <=> visible', [
-        animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
-      ]),
-    ]),
-  ],
-})
-export class DevToolbarComponent implements OnInit {
-  state = inject(DevToolbarStateService);
-  destroyRef = inject(DestroyRef);
-  settingsService = inject(SettingsService);
-
-  isDevMode = isDevMode();
-
-  private keyboardShortcut = fromEvent<KeyboardEvent>(window, 'keydown')
-    .pipe(
-      filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'),
-      takeUntilDestroyed(this.destroyRef)
-    )
-    .subscribe(() => this.toggleDevTools());
-
-  private mouseLeave = fromEvent<MouseEvent>(document, 'mouseleave')
-    .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
-    .subscribe(() => this.onMouseLeave());
-
-  ngOnInit(): void {
-    const settings = this.settingsService.getSettings();
-    this.state.setTheme(settings.isDarkMode ? 'dark' : 'light');
-  }
-
-  onMouseEnter(): void {
-    this.state.setVisibility(true);
-  }
-
-  onMouseLeave(): void {
-    setTimeout(() => this.state.setVisibility(false), this.state.delay());
-  }
-
-  private toggleDevTools(): void {
-    this.state.setVisibility(!this.state.isVisible());
-  }
-}

package/src/index.ts

@@ -1,10 +0,0 @@
-export * from './components/icons/icon.component';
-export * from './components/icons/icon.models';
-export * from './components/toolbar-tool/toolbar-tool.component';
-export * from './components/toolbar-tool/toolbar-tool.models';
-export * from './dev-toolbar.component';
-export * from './models/dev-tools.interface';
-export * from './tools/feature-flags-tool/feature-flags.models';
-export * from './tools/feature-flags-tool/feature-flags.service';
-export * from './tools/language-tool/language.models';
-export * from './tools/language-tool/language.service';

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

@@ -1,19 +0,0 @@
-import { Observable } from 'rxjs';
-
-/**
- * Interface that should be implemented by any tool service that is used in the dev toolbar
- */
-export interface DevToolsService<OptionType> {
-  /**
-   * Sets the available options that will be displayed in the tool on the dev toolbar
-   * @param options The options to be displayed
-   */
-  setAvailableOptions(options: OptionType[]): void;
-
-  /**
-   * Gets the values that were forced/modified through the tool on the dev toolbar.
-   * If the tool only supports a single option, the returned array will have a single element.
-   * @returns Observable of forced values array
-   */
-  getForcedValues(): Observable<OptionType[]>;
-}

package/src/styles.scss

@@ -1,342 +0,0 @@
-@use 'sass:map';
-// Color primitives
-$color-black-900: rgb(17, 24, 39); // darkest
-$color-black-800: rgb(19, 21, 26);
-$color-gray-700: rgb(55, 65, 81);
-$color-gray-600: rgb(107, 114, 128);
-$color-gray-500: rgb(156, 163, 175);
-$color-gray-300: rgb(229, 231, 235);
-$color-gray-200: rgb(243, 244, 246);
-$color-white: rgb(255, 255, 255);
-$color-red-600: rgb(220, 38, 38); // dark red
-$color-red-500: rgb(239, 68, 68); // light red
-$color-blue-100: rgb(219, 234, 254);
-$color-blue-600: rgb(37, 99, 235);
-$color-yellow-100: rgb(254, 249, 195);
-$color-yellow-600: rgb(202, 138, 4);
-$color-red-100: rgb(254, 226, 226);
-// Colors and Themes
-$colors: (
-  dark: (
-    background: (
-      primary: $color-black-900,
-      gradient:
-        linear-gradient(
-          180deg,
-          $color-black-800 0%,
-          rgba($color-black-800, 0.88) 100%
-        ),
-    ),
-    text: (
-      primary: $color-white,
-      secondary: $color-gray-300,
-      muted: $color-gray-500,
-    ),
-    border: (
-      primary: #343841,
-      subtle: rgba($color-white, 0.1),
-    ),
-    hover: (
-      background: rgba($color-white, 0.12),
-      danger: $color-red-600,
-    ),
-    annotation: (
-      note: (
-        background: rgba($color-blue-600, 0.15),
-        border: rgba($color-blue-600, 0.3),
-      ),
-      warning: (
-        background: rgba($color-yellow-600, 0.15),
-        border: rgba($color-yellow-600, 0.3),
-      ),
-      error: (
-        background: rgba($color-red-600, 0.15),
-        border: rgba($color-red-600, 0.3),
-      ),
-    ),
-  ),
-  light: (
-    background: (
-      primary: $color-white,
-      gradient:
-        linear-gradient(
-          180deg,
-          $color-gray-200 0%,
-          rgba($color-gray-200, 0.88) 100%
-        ),
-    ),
-    text: (
-      primary: $color-black-900,
-      secondary: $color-gray-700,
-      muted: $color-gray-600,
-    ),
-    border: (
-      primary: #e5e7eb,
-      subtle: rgba($color-black-900, 0.1),
-    ),
-    hover: (
-      background: rgba($color-black-900, 0.05),
-      danger: $color-red-500,
-    ),
-    annotation: (
-      note: (
-        background: $color-blue-100,
-        border: rgba($color-blue-600, 0.2),
-      ),
-      warning: (
-        background: $color-yellow-100,
-        border: rgba($color-yellow-600, 0.2),
-      ),
-      error: (
-        background: $color-red-100,
-        border: rgba($color-red-600, 0.2),
-      ),
-    ),
-  ),
-);
-
-// Shadows
-$shadow-themes: (
-  dark: (
-    toolbar: 0 2px 8px rgba(19, 21, 26, 0.3),
-    tooltip: (
-      0 0 0 1px rgba(255, 255, 255, 0.1),
-      0 4px 8px rgba(0, 0, 0, 0.4),
-      0 2px 4px rgba(0, 0, 0, 0.3),
-    ),
-    window: (
-      0px 0px 0px 0px rgba(19, 21, 26, 0.3),
-      0px 1px 2px 0px rgba(19, 21, 26, 0.29),
-      0px 4px 4px 0px rgba(19, 21, 26, 0.26),
-      0px 10px 6px 0px rgba(19, 21, 26, 0.15),
-      0px 17px 7px 0px rgba(19, 21, 26, 0.04),
-      0px 26px 7px 0px rgba(19, 21, 26, 0.01),
-    ),
-  ),
-  light: (
-    toolbar: 0 2px 8px rgba(156, 163, 175, 0.2),
-    tooltip: (
-      0 0 0 1px rgba(17, 24, 39, 0.05),
-      0 4px 8px rgba(107, 114, 128, 0.15),
-      0 2px 4px rgba(107, 114, 128, 0.1),
-    ),
-    window: (
-      0px 0px 0px 0px rgba(156, 163, 175, 0.1),
-      0px 1px 2px 0px rgba(156, 163, 175, 0.12),
-      0px 4px 4px 0px rgba(156, 163, 175, 0.1),
-      0px 10px 6px 0px rgba(156, 163, 175, 0.08),
-      0px 17px 7px 0px rgba(156, 163, 175, 0.05),
-      0px 26px 7px 0px rgba(156, 163, 175, 0.02),
-    ),
-  ),
-);
-
-// Typography
-$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';
-
-// Add font size variables
-$font-sizes: (
-  xs: 0.75rem,
-  sm: 0.875rem,
-  md: 1rem,
-  lg: 1.25rem,
-  xl: 2rem,
-);
-
-// Dimensions
-$dimensions: (
-  toolbar-height: 40px,
-  toolbar-button-width: 44px,
-  window-max-width: 640px,
-  window-max-height: 480px,
-  border-radius: (
-    small: 4px,
-    medium: 8px,
-    large: 12px,
-    full: 9999px,
-  ),
-);
-
-// Transitions
-$transitions: (
-  default: all 0.2s ease-out,
-  smooth: all 0.2s ease-in-out,
-);
-
-// Z-indices
-$z-indices: (
-  toolbar: 999999,
-  window: 999999999,
-);
-
-// Create a mixin for the CSS variables that can be used by components
-@mixin devtools-theme {
-  --ndt-border-radius-small: #{map.get(
-      map.get($dimensions, border-radius),
-      small
-    )};
-  --ndt-border-radius-medium: #{map.get(
-      map.get($dimensions, border-radius),
-      medium
-    )};
-  --ndt-border-radius-large: #{map.get(
-      map.get($dimensions, border-radius),
-      large
-    )};
-
-  --ndt-transition-default: #{map.get($transitions, default)};
-  --ndt-transition-smooth: #{map.get($transitions, smooth)};
-
-  --ndt-bg-primary: #{map.get(map.get($colors, light), background, primary)};
-  --ndt-bg-gradient: #{map.get(map.get($colors, light), background, gradient)};
-  --ndt-text-primary: #{map.get(map.get($colors, light), text, primary)};
-  --ndt-text-secondary: #{map.get(map.get($colors, light), text, secondary)};
-  --ndt-text-muted: #{map.get(map.get($colors, light), text, muted)};
-  --ndt-border-primary: #{map.get(map.get($colors, light), border, primary)};
-  --ndt-border-subtle: #{map.get(map.get($colors, light), border, subtle)};
-  --ndt-hover-bg: #{map.get(map.get($colors, light), hover, background)};
-  --ndt-hover-danger: #{map.get(map.get($colors, light), hover, danger)};
-  --ndt-shadow-toolbar: #{map.get(map.get($shadow-themes, light), toolbar)};
-  --ndt-shadow-tooltip: #{map.get(map.get($shadow-themes, light), tooltip)};
-  --ndt-shadow-window: #{map.get(map.get($shadow-themes, light), window)};
-
-  --ndt-spacing-xs: 4px;
-  --ndt-spacing-sm: 8px;
-  --ndt-spacing-md: 16px;
-  --ndt-window-padding: 24px;
-
-  --ndt-font-size-xs: #{map.get($font-sizes, xs)};
-  --ndt-font-size-sm: #{map.get($font-sizes, sm)};
-  --ndt-font-size-md: #{map.get($font-sizes, md)};
-  --ndt-font-size-lg: #{map.get($font-sizes, lg)};
-  --ndt-font-size-xl: #{map.get($font-sizes, xl)};
-
-  --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: #{$color-white};
-
-  --ndt-border-color: var(--ndt-border-primary);
-
-  --ndt-note-background: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      note,
-      background
-    )};
-  --ndt-note-border: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      note,
-      border
-    )};
-  --ndt-warning-background: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      warning,
-      background
-    )};
-  --ndt-warning-border: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      warning,
-      border
-    )};
-  --ndt-error-background: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      error,
-      background
-    )};
-  --ndt-error-border: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      error,
-      border
-    )};
-
-  &[data-theme='dark'] {
-    --ndt-bg-primary: #{map.get(map.get($colors, dark), background, primary)};
-    --ndt-bg-gradient: #{map.get(map.get($colors, dark), background, gradient)};
-    --ndt-text-primary: #{map.get(map.get($colors, dark), text, primary)};
-    --ndt-text-secondary: #{map.get(map.get($colors, dark), text, secondary)};
-    --ndt-text-muted: #{map.get(map.get($colors, dark), text, muted)};
-    --ndt-border-primary: #{map.get(map.get($colors, dark), border, primary)};
-    --ndt-border-subtle: #{map.get(map.get($colors, dark), border, subtle)};
-    --ndt-hover-bg: #{map.get(map.get($colors, dark), hover, background)};
-    --ndt-hover-danger: #{map.get(map.get($colors, dark), hover, danger)};
-    --ndt-shadow-toolbar: #{map.get(map.get($shadow-themes, dark), toolbar)};
-    --ndt-shadow-tooltip: #{map.get(map.get($shadow-themes, dark), tooltip)};
-    --ndt-shadow-window: #{map.get(map.get($shadow-themes, dark), window)};
-
-    --ndt-note-background: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        note,
-        background
-      )};
-    --ndt-note-border: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        note,
-        border
-      )};
-    --ndt-warning-background: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        warning,
-        background
-      )};
-    --ndt-warning-border: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        warning,
-        border
-      )};
-    --ndt-error-background: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        error,
-        background
-      )};
-    --ndt-error-border: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        error,
-        border
-      )};
-  }
-}
-
-.dev-toolbar {
-  @include devtools-theme;
-
-  // Typography styles
-  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;
-  }
-}

package/src/test-setup.ts

@@ -1,12 +0,0 @@
-import '@analogjs/vitest-angular/setup-zone';
-
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-import { getTestBed } from '@angular/core/testing';
-
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

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

@@ -1,96 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs';
-import { DevToolsStorageService } from '../../utils/storage.service';
-import { DevToolbarFlag } from './feature-flags.models';
-
-interface ForcedFlagsState {
-  enabled: string[];
-  disabled: string[];
-}
-
-@Injectable({ providedIn: 'root' })
-export class DevToolbarInternalFeatureFlagService {
-  private readonly STORAGE_KEY = 'feature-flags';
-  private storageService = inject(DevToolsStorageService);
-
-  private appFlags$ = new BehaviorSubject<DevToolbarFlag[]>([]);
-  private forcedFlagsSubject = new BehaviorSubject<ForcedFlagsState>({
-    enabled: [],
-    disabled: [],
-  });
-
-  private readonly forcedFlags$ = this.forcedFlagsSubject.asObservable();
-
-  public flags$: Observable<DevToolbarFlag[]> = combineLatest([
-    this.appFlags$,
-    this.forcedFlags$,
-  ]).pipe(
-    map(([appFlags, { enabled, disabled }]) => {
-      return appFlags.map((flag) => ({
-        ...flag,
-        isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
-        isEnabled: enabled.includes(flag.id),
-      }));
-    })
-  );
-
-  public flags = toSignal(this.flags$, { initialValue: [] });
-
-  constructor() {
-    this.loadForcedFlags();
-  }
-
-  setAppFlags(flags: DevToolbarFlag[]): void {
-    this.appFlags$.next(flags);
-  }
-
-  getAppFlags(): Observable<DevToolbarFlag[]> {
-    return this.appFlags$.asObservable();
-  }
-
-  getForcedFlags(): Observable<DevToolbarFlag[]> {
-    return this.flags$.pipe(
-      map((flags) => flags.filter((flag) => flag.isForced))
-    );
-  }
-
-  setFlag(flagId: string, isEnabled: boolean): void {
-    const { enabled, disabled } = this.forcedFlagsSubject.value;
-
-    const newEnabled = enabled.filter((id) => id !== flagId);
-    const newDisabled = disabled.filter((id) => id !== flagId);
-
-    if (isEnabled) {
-      newEnabled.push(flagId);
-    } else {
-      newDisabled.push(flagId);
-    }
-
-    const newState = { enabled: newEnabled, disabled: newDisabled };
-    this.forcedFlagsSubject.next(newState);
-    this.storageService.set(this.STORAGE_KEY, newState);
-  }
-
-  removeFlagOverride(flagId: string): void {
-    const { enabled, disabled } = this.forcedFlagsSubject.value;
-
-    const newState = {
-      enabled: enabled.filter((id) => id !== flagId),
-      disabled: disabled.filter((id) => id !== flagId),
-    };
-
-    this.forcedFlagsSubject.next(newState);
-    this.storageService.set(this.STORAGE_KEY, newState);
-  }
-
-  private loadForcedFlags(): void {
-    const savedFlags = this.storageService.get<ForcedFlagsState>(
-      this.STORAGE_KEY
-    );
-
-    if (savedFlags) {
-      this.forcedFlagsSubject.next(savedFlags);
-    }
-  }
-}