ngx-dev-toolbar 1.0.2 → 1.0.4

package/src/components/toolbar-tool/toolbar-tool.models.ts

@@ -1,33 +0,0 @@
-import { IconName } from '../icons/icon.models';
-
-export interface DevToolbarWindowPosition {
-  x: number;
-  y: number;
-}
-export interface DevToolbarWindowOptions {
-  id: string;
-  /**
-   * The title of the window, this can be different from the name of the tool
-   */
-  title: string;
-  description?: string;
-  isClosable?: boolean;
-  isMaximizable?: boolean;
-  isMinimizable?: boolean;
-  placement?:
-    | 'bottom-left'
-    | 'bottom-center'
-    | 'bottom-right'
-    | 'top-left'
-    | 'top-center'
-    | 'top-right';
-  size?: 'small' | 'medium' | 'tall' | 'large';
-  isBeta?: boolean;
-}
-
-export interface DevToolbarToolOptions {
-  icon: IconName;
-  name: string;
-  windowOptions: DevToolbarWindowOptions;
-  isBeta?: boolean;
-}

package/src/components/window/window.component.scss

@@ -1,95 +0,0 @@
-@use '../../styles' as *;
-@use 'sass:map';
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-.window {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: var(--ndt-bg-primary);
-  border: 1px solid var(--ndt-border-primary);
-  border-radius: var(--ndt-border-radius-large);
-  padding: var(--ndt-window-padding);
-  font-family: $font-family;
-  color: var(--ndt-text-secondary);
-  z-index: #{map.get($z-indices, window)};
-  box-shadow: var(--ndt-shadow-window);
-}
-
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-
-  &__title {
-    display: flex;
-    align-items: center;
-    gap: var(--ndt-spacing-sm);
-
-    .beta-tag {
-      font-size: var(--ndt-font-size-xxs, 0.65rem);
-      background: var(--ndt-purple, #8b5cf6);
-      color: var(--ndt-text-on-primary);
-      padding: 1px 4px;
-      margin-left: var(--ndt-spacing-xs);
-      border-radius: var(--ndt-border-radius-small);
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-  }
-  &__description {
-    font-size: var(--ndt-font-size-sm);
-    color: var(--ndt-text-muted);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__controls {
-    display: flex;
-    gap: var(--ndt-spacing-sm);
-  }
-}
-
-.content {
-  flex: 1;
-  overflow: auto;
-}
-
-.divider {
-  height: 1px;
-  background-color: var(--ndt-border-primary);
-  margin-bottom: var(--ndt-spacing-md);
-  margin-top: var(--ndt-spacing-md);
-}
-
-.control {
-  background: none;
-  border: none;
-  color: var(--ndt-text-secondary);
-  cursor: pointer;
-  padding: var(--ndt-spacing-xs) var(--ndt-spacing-sm);
-  border-radius: var(--ndt-border-radius-small);
-  font-size: var(--ndt-font-size-md);
-  line-height: 1;
-  transition: var(--ndt-transition-smooth);
-
-  &:hover {
-    background: var(--ndt-hover-bg);
-    color: var(--ndt-text-primary);
-  }
-
-  &--close:hover {
-    background: var(--ndt-hover-danger);
-  }
-}

package/src/components/window/window.component.ts

@@ -1,69 +0,0 @@
-import { Component, computed, inject, input, output } from '@angular/core';
-import { DevToolbarStateService } from '../../dev-toolbar-state.service';
-import { DevToolbarWindowOptions } from '../toolbar-tool/toolbar-tool.models';
-
-@Component({
-  selector: 'ndt-window',
-  standalone: true,
-  template: `
-    <div class="window dev-toolbar" [attr.data-theme]="theme()">
-      <div class="header">
-        <div class="header__content">
-          <div class="header__title">
-            <h1>{{ config().title }}</h1>
-            @if (config().isBeta) {
-            <span class="beta-tag">BETA</span>
-            }
-          </div>
-          <p class="header__description">{{ config().description }}</p>
-        </div>
-        <div class="header__controls">
-          @if (config().isMinimizable) {
-          <button aria-label="Minimize" class="control" (click)="onMinimize()">
-            −
-          </button>
-          } @if (config().isMaximizable) {
-          <button aria-label="Maximize" class="control" (click)="onMaximize()">
-            □
-          </button>
-          } @if (config().isClosable) {
-          <button
-            aria-label="Close"
-            class="control control--close"
-            (click)="onClose()"
-          >
-            ×
-          </button>
-          }
-        </div>
-      </div>
-
-      <div class="divider"></div>
-      <div class="content">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./window.component.scss'],
-})
-export class DevToolbarWindowComponent {
-  readonly devToolbarStateService = inject(DevToolbarStateService);
-  readonly config = input.required<DevToolbarWindowOptions>();
-  readonly close = output<void>();
-  readonly maximize = output<void>();
-  readonly minimize = output<void>();
-
-  readonly theme = computed(() => this.devToolbarStateService.theme());
-
-  protected onClose(): void {
-    this.close.emit();
-  }
-
-  protected onMaximize(): void {
-    this.maximize.emit();
-  }
-
-  protected onMinimize(): void {
-    this.minimize.emit();
-  }
-}

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

@@ -1,89 +0,0 @@
-import { Injectable, computed, signal } from '@angular/core';
-
-interface DevToolbarState {
-  isHidden: boolean;
-  activeToolId: string | null;
-  error: string | null;
-  theme: 'light' | 'dark';
-  delay: number;
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DevToolbarStateService {
-  // Initial state
-  private state = signal<DevToolbarState>({
-    isHidden: true,
-    activeToolId: null,
-    delay: 3000,
-    error: null,
-    theme: 'dark',
-  });
-
-  // Selectors
-  readonly isVisible = computed(
-    () => !this.state().isHidden || this.hasActiveTool()
-  );
-  readonly isDarkTheme = computed(() => this.state().theme === 'dark');
-  readonly activeToolId = computed(() => this.state().activeToolId);
-  readonly hasActiveTool = computed(() => this.state().activeToolId !== null);
-  readonly error = computed(() => this.state().error);
-  readonly theme = computed(() => this.state().theme);
-  /**
-   * The delay to hide the toolbar
-   */
-  readonly delay = computed(() => this.state().delay);
-
-  // State updates
-  setVisibility(isVisible: boolean): void {
-    if (isVisible) {
-      this.state.update((state) => ({
-        ...state,
-        isHidden: false,
-      }));
-    } else {
-      if (this.activeToolId() === null) {
-        setTimeout(() => {
-          this.state.update((state) => ({
-            ...state,
-            isHidden: true,
-          }));
-        }, this.state().delay);
-      }
-    }
-  }
-
-  setTheme(theme: 'light' | 'dark'): void {
-    this.state.update((state) => ({
-      ...state,
-      theme,
-    }));
-  }
-
-  setActiveTool(toolId: string | null): void {
-    this.state.update((state) => ({
-      ...state,
-      activeToolId: toolId,
-    }));
-
-    if (toolId === null) {
-      this.setVisibility(false);
-    } else {
-      this.setVisibility(true);
-    }
-  }
-
-  // Public actions
-  toggleTool(toolId: string | null): void {
-    const currentToolId = this.activeToolId();
-    this.setActiveTool(currentToolId === toolId ? null : toolId);
-  }
-
-  toggleVisibility(): void {
-    this.state.update((state) => ({
-      ...state,
-      isHidden: !state.isHidden,
-    }));
-  }
-}

package/src/dev-toolbar.component.scss

@@ -1,22 +0,0 @@
-@use './styles' as devtools;
-@use 'sass:map';
-
-.dev-toolbar {
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  z-index: map.get(devtools.$z-indices, toolbar);
-  transform: translateX(-50%);
-  display: flex;
-  pointer-events: auto;
-  background: var(--ndt-bg-primary);
-  border: 1px solid var(--ndt-border-primary);
-  border-radius: map.get(map.get(devtools.$dimensions, border-radius), full);
-  box-shadow: var(--ndt-shadow-toolbar);
-  height: map.get(devtools.$dimensions, toolbar-height);
-  overflow: hidden;
-
-  &--active {
-    opacity: 1;
-  }
-}

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/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[]>;
-}