ngx-dev-toolbar 1.0.2 → 1.0.4

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

@@ -1,29 +0,0 @@
-import { Component, input } from '@angular/core';
-import { DevToolbarIconComponent } from '../icons/icon.component';
-import { IconName } from '../icons/icon.models';
-
-@Component({
-  selector: 'ndt-link-button',
-  standalone: true,
-  imports: [DevToolbarIconComponent],
-  template: `
-    <a
-      [href]="url()"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="link-button"
-    >
-      <div class="link-button__icon">
-        <ndt-icon [name]="icon()" />
-      </div>
-      <span class="link-button__text">
-        <ng-content></ng-content>
-      </span>
-    </a>
-  `,
-  styleUrls: ['./link-button.component.scss'],
-})
-export class DevToolbarLinkButtonComponent {
-  readonly url = input.required<string>();
-  readonly icon = input.required<IconName>();
-}

package/src/components/select/select.component.scss

@@ -1,162 +0,0 @@
-@use '../../styles' as devtools;
-@use 'sass:map';
-
-.select {
-  position: relative;
-  width: 100%;
-  min-width: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--ndt-spacing-sm) var(--ndt-spacing-md);
-  border: 1px solid var(--ndt-border-primary);
-  border-radius: var(--ndt-border-radius-small);
-  background-color: var(--ndt-bg-primary);
-  color: var(--ndt-text-primary);
-  font-size: var(--ndt-font-size-sm);
-  cursor: pointer;
-  user-select: none;
-  transition: var(--ndt-transition-default);
-  outline: none;
-  height: 32px;
-  box-sizing: border-box;
-
-  &:hover {
-    background-color: var(--ndt-hover-bg);
-    border-color: var(--ndt-primary);
-  }
-
-  &:focus-visible {
-    outline: none;
-    border-color: var(--ndt-primary);
-    box-shadow: 0 0 0 2px rgba(var(--ndt-primary-rgb), 0.2);
-  }
-
-  &.small {
-    padding: var(--ndt-spacing-xs) var(--ndt-spacing-sm);
-    font-size: var(--ndt-font-size-sm);
-    height: 24px;
-  }
-
-  &.open {
-    border-color: var(--ndt-primary);
-    box-shadow: 0 0 0 2px rgba(var(--ndt-primary-rgb), 0.2);
-
-    .select__arrow {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__value {
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1;
-    margin-right: var(--ndt-spacing-sm);
-    min-width: 0;
-  }
-
-  &__arrow {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    transition: transform 0.2s ease;
-    opacity: 0.9;
-  }
-}
-
-.select-menu {
-  display: inline-flex;
-  flex-direction: column;
-  min-width: 180px;
-  background-color: var(--ndt-bg-primary);
-  padding: var(--ndt-spacing-xs) 0;
-  border: 1px solid var(--ndt-border-primary);
-  border-radius: var(--ndt-border-radius-small);
-  box-shadow: var(--ndt-shadow-window);
-  color: var(--ndt-text-primary);
-  max-height: min(400px, 70vh);
-  overflow-y: auto;
-  backdrop-filter: blur(8px);
-
-  /* Scrollbar Styles */
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--ndt-border-primary);
-    border-radius: 4px;
-    border: 2px solid var(--ndt-bg-primary);
-  }
-}
-
-.select-menu-item {
-  background-color: transparent;
-  cursor: pointer;
-  border: none;
-  color: inherit;
-  user-select: none;
-  min-width: 64px;
-  line-height: 36px;
-  padding: 0 var(--ndt-spacing-md);
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  flex: 1;
-  font-size: var(--ndt-font-size-sm);
-  font-family: inherit;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  &:hover {
-    background-color: var(--ndt-hover-bg);
-  }
-
-  &:active {
-    background-color: rgba(var(--ndt-primary-rgb), 0.15);
-  }
-
-  &.selected {
-    color: var(--ndt-primary);
-    background-color: rgba(var(--ndt-primary-rgb), 0.1);
-    font-weight: 500;
-
-    &:hover {
-      background-color: rgba(var(--ndt-primary-rgb), 0.15);
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 8px;
-      width: 3px;
-      height: calc(100% - 16px);
-      background-color: var(--ndt-primary);
-      border-radius: 2px;
-    }
-  }
-
-  &:focus-visible {
-    outline: none;
-    background-color: var(--ndt-hover-bg);
-  }
-}
-
-// Ensure proper theme inheritance in overlay
-.select-overlay {
-  backdrop-filter: blur(8px);
-}

package/src/components/select/select.component.ts

@@ -1,127 +0,0 @@
-import { CdkMenuModule } from '@angular/cdk/menu';
-import { ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  model,
-  signal,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { DevToolbarStateService } from '../../dev-toolbar-state.service';
-
-export interface SelectOption {
-  value: string;
-  label: string;
-}
-
-@Component({
-  selector: 'ndt-select',
-  standalone: true,
-  imports: [CommonModule, FormsModule, OverlayModule, CdkMenuModule],
-  template: `
-    <div
-      class="dev-toolbar select"
-      [class.small]="size() === 'small'"
-      [class.open]="isOpen()"
-      [attr.aria-label]="ariaLabel()"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-controls]="selectMenuId"
-      [attr.data-theme]="theme()"
-      cdkOverlayOrigin
-      #trigger="cdkOverlayOrigin"
-      (click)="toggle()"
-      (keydown.enter)="toggle()"
-      (keydown.space)="toggle()"
-      tabindex="0"
-      role="combobox"
-    >
-      <span class="select__value">{{ selectedLabel() }}</span>
-      <span class="select__arrow" aria-hidden="true"></span>
-    </div>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions"
-      (overlayOutsideClick)="close()"
-    >
-      <div
-        [id]="selectMenuId"
-        class="dev-toolbar select-menu"
-        cdkMenu
-        role="listbox"
-        [attr.data-theme]="theme()"
-      >
-        @for (option of options(); track option.value) {
-        <button
-          class="select-menu-item"
-          [class.selected]="option.value === value()"
-          [attr.aria-selected]="option.value === value()"
-          cdkMenuItem
-          type="button"
-          (click)="selectOption(option)"
-        >
-          {{ option.label }}
-        </button>
-        }
-      </div>
-    </ng-template>
-  `,
-  styleUrls: ['./select.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DevToolbarSelectComponent {
-  readonly devToolbarStateService = inject(DevToolbarStateService);
-
-  value = model<string>();
-  options = input.required<SelectOption[]>();
-  ariaLabel = input<string>('');
-  label = input<string>('');
-  size = input<'small' | 'medium'>('medium');
-  readonly theme = computed(() => this.devToolbarStateService.theme());
-
-  protected readonly selectMenuId = `select-menu-${Math.random()
-    .toString(36)
-    .slice(2, 11)}`;
-  isOpen = signal(false);
-
-  selectedLabel = computed(() => {
-    const selected = this.options()?.find((opt) => opt.value === this.value());
-    return selected?.label ?? '';
-  });
-
-  positions: ConnectedPosition[] = [
-    {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'top',
-      offsetY: 4,
-    },
-    {
-      originX: 'end',
-      originY: 'top',
-      overlayX: 'end',
-      overlayY: 'bottom',
-      offsetY: -4,
-    },
-  ];
-
-  toggle() {
-    this.isOpen.update((v) => !v);
-  }
-
-  close() {
-    this.isOpen.set(false);
-  }
-
-  selectOption(option: SelectOption) {
-    this.value.set(option.value);
-    this.close();
-  }
-}

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

@@ -1,67 +0,0 @@
-@use '../../styles' as devtools;
-@use 'sass:map';
-$dimensions: devtools.$dimensions;
-
-.tool-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: map.get($dimensions, toolbar-button-width);
-  height: map.get($dimensions, toolbar-height);
-  border: 0;
-  background: transparent;
-  color: var(--ndt-text-primary);
-  transition: var(--ndt-transition-default);
-  cursor: pointer;
-  opacity: 0.5;
-  position: relative;
-
-  &--active {
-    background: var(--ndt-hover-bg);
-    opacity: 1;
-  }
-
-  &:hover {
-    background: var(--ndt-hover-bg);
-    opacity: 1;
-  }
-
-  ::ng-deep svg {
-    width: 24px;
-    height: 24px;
-    display: block;
-    margin: auto;
-  }
-
-  &__badge {
-    position: absolute;
-    top: -0.25rem;
-    right: -0.25rem;
-    background-color: var(--ndt-hover-danger);
-    color: var(--ndt-text-primary);
-    border-radius: var(--ndt-border-radius-full);
-    min-width: 1rem;
-    height: 1rem;
-    font-size: 0.75rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.125rem;
-  }
-}
-
-.tooltip {
-  position: absolute;
-  bottom: calc(100% + 1.2rem);
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--ndt-bg-primary);
-  color: var(--ndt-text-primary);
-  padding: 0.5rem 0.75rem;
-  border-radius: var(--ndt-border-radius-medium);
-  font-size: 0.75rem;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: 1000;
-  box-shadow: var(--ndt-shadow-tooltip);
-}

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