ngx-dev-toolbar 1.0.3 → 1.0.5

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

@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-@Component({
-  selector: 'ndt-sun-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="M128,60a68,68,0,1,0,68,68A68.07,68.07,0,0,0,128,60Z"
-        opacity="0.2"
-      />
-      <path
-        d="M128,44a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V36A8,8,0,0,0,128,44ZM57.31,68.69a8,8,0,0,0,11.32-11.32L54.63,43.37A8,8,0,0,0,43.31,54.69ZM44,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H36A8,8,0,0,0,44,128Zm24.63,59.31-14,14a8,8,0,0,0,11.32,11.32l14-14a8,8,0,0,0-11.32-11.32ZM128,212a8,8,0,0,0-8,8v20a8,8,0,0,0,16,0V220A8,8,0,0,0,128,212Zm70.69-24.69a8,8,0,0,0-11.32,11.32l14,14a8,8,0,0,0,11.32-11.32ZM240,120H220a8,8,0,0,0,0,16h20a8,8,0,0,0,0-16Zm-24.69-62.63-14,14a8,8,0,0,0,11.32,11.32l14-14a8,8,0,0,0-11.32-11.32ZM128,76a52,52,0,1,0,52,52A52.06,52.06,0,0,0,128,76Zm0,88a36,36,0,1,1,36-36A36,36,0,0,1,128,164Z"
-      />
-    </svg>
-  `,
-})
-export class SunIconComponent {
-  fill = input<string>('#FFFF');
-}

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

@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-@Component({
-  selector: 'ndt-terminal-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,56V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z"
-        opacity="0.2"
-      ></path>
-      <path
-        d="M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z"
-      ></path>
-    </svg>
-  `,
-})
-export class TerminalIconComponent {
-  fill = input<string>('#FFFF');
-}

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

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

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

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

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

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

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

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