ngx-dev-toolbar 1.0.3 → 1.0.5

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

@@ -1,126 +0,0 @@
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  computed,
-  inject,
-  input,
-  output,
-  signal,
-} from '@angular/core';
-import { DevToolbarStateService } from '../../dev-toolbar-state.service';
-
-@Component({
-  selector: 'ndt-tool-button',
-  standalone: true,
-  template: `
-    <button
-      class="tool-button"
-      [class.tool-button--active]="isActive()"
-      [class.tool-button--focus]="isFocused()"
-      (mouseenter)="onMouseEnter()"
-      (focusin)="onFocus()"
-      (focusout)="onBlur()"
-      (mouseleave)="onMouseLeave()"
-      (keydown.escape)="onEscape()"
-    >
-      @if (isTooltipVisible()) {
-      <span
-        class="tooltip"
-        [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
-      >
-        {{ tooltip() }}
-      </span>
-      }
-      <ng-content />
-    </button>
-  `,
-  styleUrls: ['./tool-button.component.scss'],
-  animations: [
-    trigger('tooltipAnimation', [
-      state(
-        'hidden',
-        style({
-          opacity: 0,
-          transform: 'translateX(-50%) translateY(1rem)',
-        })
-      ),
-      state(
-        'visible',
-        style({
-          opacity: 1,
-          transform: 'translateX(-50%) translateY(0)',
-        })
-      ),
-      transition('hidden => visible', [animate('200ms ease-out')]),
-      transition('visible => hidden', [animate('150ms ease-in')]),
-    ]),
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DevToolbarToolButtonComponent {
-  // Injects
-  private readonly state = inject(DevToolbarStateService);
-  private readonly elementRef = inject(ElementRef);
-
-  // Inputs
-  readonly title = input.required<string>();
-  readonly toolId = input.required<string>();
-
-  // Outputs
-  readonly open = output<void>();
-
-  // Signals
-  readonly isActive = computed(
-    () => this.state.activeToolId() === this.toolId()
-  );
-  readonly isToolbarVisible = this.state.isVisible;
-
-  readonly isFocused = signal(false);
-  readonly tooltip = computed(
-    () =>
-      this.elementRef.nativeElement.parentElement?.getAttribute(
-        'data-tooltip'
-      ) ?? ''
-  );
-  readonly isTooltipVisible = computed(
-    () => this.tooltip() && !this.isActive()
-  );
-
-  // Properties
-  protected tooltipState = false;
-  private readonly hideDelay = 3000;
-
-  // Public methods
-  onClick(): void {
-    this.isFocused.set(false);
-    this.open.emit();
-  }
-
-  onMouseEnter(): void {
-    this.tooltipState = true;
-  }
-
-  onMouseLeave(): void {
-    this.tooltipState = false;
-  }
-
-  onEscape(): void {
-    this.isFocused.set(false);
-  }
-
-  onFocus(): void {
-    this.isFocused.set(true);
-  }
-
-  onBlur(): void {
-    this.isFocused.set(false);
-  }
-}

package/src/components/toolbar-tool/toolbar-tool.component.scss

@@ -1,9 +0,0 @@
-@use '../../styles' as devtools;
-
-.tool {
-  position: relative;
-}
-
-.trigger {
-  cursor: pointer;
-}

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

@@ -1,169 +0,0 @@
-import { animate, style, transition, trigger } from '@angular/animations';
-import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  ElementRef,
-  ViewChild,
-  computed,
-  inject,
-  input,
-} from '@angular/core';
-import { DevToolbarStateService } from '../../dev-toolbar-state.service';
-import { DevToolbarIconComponent } from '../icons/icon.component';
-import { IconName } from '../icons/icon.models';
-import { DevToolbarToolButtonComponent } from '../tool-button/tool-button.component';
-import { DevToolbarWindowComponent } from '../window/window.component';
-import { DevToolbarWindowOptions } from './toolbar-tool.models';
-
-@Component({
-  selector: 'ndt-toolbar-tool',
-  standalone: true,
-  imports: [
-    CdkConnectedOverlay,
-    OverlayModule,
-    DevToolbarWindowComponent,
-    DevToolbarToolButtonComponent,
-    DevToolbarIconComponent,
-  ],
-  template: `
-    <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
-      <div
-        class="dev-toolbar-tool__icon"
-        (click)="onOpen()"
-        (keydown.enter)="onOpen()"
-        (keydown.space)="onOpen()"
-        tabindex="0"
-      >
-        <div #buttonContainer [attr.data-tooltip]="title()">
-          @if (icon()) {
-          <ndt-tool-button [title]="title()" [toolId]="options().id">
-            <ndt-icon [name]="icon()" />
-          </ndt-tool-button>
-          } @else {
-          <ng-content select="ndt-tool-button"></ng-content>
-          }
-        </div>
-      </div>
-
-      @if (isActive()) {
-      <ng-template
-        #contentTemplate
-        [cdkConnectedOverlayOrigin]="trigger"
-        [cdkConnectedOverlayOpen]="isActive()"
-        [cdkConnectedOverlayPositions]="positions()"
-        [cdkConnectedOverlayWidth]="width()"
-        [cdkConnectedOverlayHeight]="height()"
-        cdkConnectedOverlay
-      >
-        <ndt-window [@slideAnimation] [config]="options()" (close)="onClose()">
-          <ng-content />
-        </ndt-window>
-      </ng-template>
-      }
-    </div>
-  `,
-  styleUrl: './toolbar-tool.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('slideAnimation', [
-      transition(':enter', [
-        style({
-          transform: 'translateY(20px)',
-          opacity: 0,
-        }),
-        animate(
-          '400ms cubic-bezier(0.4, 0, 0.2, 1)',
-          style({
-            transform: 'translateY(0)',
-            opacity: 1,
-          })
-        ),
-      ]),
-      transition(':leave', [
-        style({
-          transform: 'translateY(0)',
-          opacity: 1,
-        }),
-        animate(
-          '400ms cubic-bezier(0.4, 0, 0.2, 1)',
-          style({
-            transform: 'translateY(20px)',
-            opacity: 0,
-          })
-        ),
-      ]),
-    ]),
-  ],
-})
-export class DevToolbarToolComponent {
-  state = inject(DevToolbarStateService);
-  @ViewChild('buttonContainer') buttonContainer!: ElementRef;
-
-  @ContentChild(DevToolbarToolButtonComponent)
-  buttonComponent!: DevToolbarToolButtonComponent;
-
-  options = input.required<DevToolbarWindowOptions>();
-  icon = input.required<IconName>();
-  title = input.required<string>();
-  isActive = computed(() => this.state.activeToolId() === this.options().id);
-  height = computed(() => {
-    switch (this.options().size) {
-      case 'small':
-        return 320;
-      case 'medium':
-        return 480;
-      case 'tall':
-        return 620;
-      case 'large':
-        return 620;
-      default:
-        return 480;
-    }
-  });
-
-  width = computed(() => {
-    switch (this.options().size) {
-      case 'small':
-        return 320;
-      case 'medium':
-        return 480;
-      case 'tall':
-        return 480;
-      case 'large':
-        return 620;
-      default:
-        return 400;
-    }
-  });
-  positions = computed(() => {
-    const triggerXPosition = this.getButtonContainerXPosition();
-    const windowCenter = window.innerWidth / 2;
-    const offsetX = windowCenter - triggerXPosition - 22;
-    return [
-      {
-        originX: 'center' as const,
-        originY: 'center' as const,
-        overlayX: 'center' as const,
-        overlayY: 'center' as const,
-        offsetY: -(Math.ceil(this.height() / 2) + 36),
-        offsetX,
-      },
-    ];
-  });
-
-  onOpen(): void {
-    this.state.setActiveTool(this.options().id);
-  }
-
-  onClose(): void {
-    this.state.setActiveTool(null);
-  }
-
-  getButtonContainerXPosition(): number {
-    const buttonContainerRect =
-      this.buttonContainer?.nativeElement?.getBoundingClientRect();
-    return buttonContainerRect?.left ?? 0;
-  }
-}

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;
-  }
-}