ngx-dev-toolbar 1.0.0-beta.2 → 1.0.0

package/src/components/icons/toggle-left-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ndt-toggle-left-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M112,128A32,32,0,1,1,80,96,32,32,0,0,1,112,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M176,56H80a72,72,0,0,0,0,144h96a72,72,0,0,0,0-144Zm0,128H80A56,56,0,0,1,80,72h96a56,56,0,0,1,0,112ZM80,88a40,40,0,1,0,40,40A40,40,0,0,0,80,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,152Z"
+      ></path>
+    </svg>
+  `,
+})
+export class ToggleLeftIconComponent {
+  fill = input<string>('#FFFF');
+}

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

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ndt-translate-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M250.73,210.63l-56-112a12,12,0,0,0-21.46,0l-20.52,41A84.2,84.2,0,0,1,114,126.22,107.48,107.48,0,0,0,139.33,68H160a12,12,0,0,0,0-24H108V32a12,12,0,0,0-24,0V44H32a12,12,0,0,0,0,24h83.13A83.69,83.69,0,0,1,96,110.35,84,84,0,0,1,83.6,91a12,12,0,1,0-21.81,10A107.55,107.55,0,0,0,78,126.24,83.54,83.54,0,0,1,32,140a12,12,0,0,0,0,24,107.47,107.47,0,0,0,64-21.07,108.4,108.4,0,0,0,45.39,19.44l-24.13,48.26a12,12,0,1,0,21.46,10.73L151.41,196h65.17l12.68,25.36a12,12,0,1,0,21.47-10.73ZM163.41,172,184,130.83,204.58,172Z"
+      ></path>
+    </svg>
+  `,
+})
+export class TranslateIconComponent {
+  fill = input<string>('#FFFF');
+}

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

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ndt-trash-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
+      ></path>
+    </svg>
+  `,
+})
+export class TrashIconComponent {
+  fill = input<string>('#FFFF');
+}

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

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ndt-users-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,128a95.76,95.76,0,0,1-31.8,71.37A72,72,0,0,0,128,160a40,40,0,1,0-40-40,40,40,0,0,0,40,40,72,72,0,0,0-64.2,39.37h0A96,96,0,1,1,224,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
+      ></path>
+    </svg>
+  `,
+})
+export class UsersIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/input/input.component.ts

@@ -0,0 +1,67 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'ndt-input',
+  standalone: true,
+  imports: [FormsModule],
+  template: `
+    <input
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class]="inputClass()"
+      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      (ngModelChange)="value.set($event)"
+    />
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+
+      .input {
+        width: 100%;
+        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);
+        transition: var(--ndt-transition-default);
+        box-sizing: border-box;
+
+        &::placeholder {
+          color: var(--ndt-text-muted);
+        }
+
+        &:focus {
+          outline: none;
+          border-color: var(--ndt-primary);
+          box-shadow: 0 0 0 2px rgba(var(--ndt-primary-rgb), 0.2);
+        }
+
+        &:disabled {
+          background-color: var(--ndt-bg-secondary);
+          cursor: not-allowed;
+          color: var(--ndt-text-muted);
+        }
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarInputComponent {
+  value = model.required<string>();
+
+  type = input<string>('text');
+  placeholder = input<string>('');
+  ariaLabel = input<string>('');
+  inputClass = input<string>('input');
+}

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

@@ -0,0 +1,36 @@
+.link-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ndt-spacing-xs);
+  text-decoration: none;
+  color: var(--ndt-text-muted);
+  transition: var(--ndt-transition-default);
+
+  &:hover {
+    color: var(--ndt-text-primary);
+
+    .link-button__icon {
+      outline: 2px solid var(--ndt-primary);
+      outline-offset: 2px;
+      box-shadow: 0 0 8px var(--ndt-primary);
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--ndt-border-radius-medium);
+    background: var(--ndt-hover-bg);
+    transition: all 0.2s ease-in-out;
+  }
+
+  &__text {
+    font-size: var(--ndt-font-size-xs);
+    text-align: center;
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,162 @@
+@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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,67 @@
+@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);
+}