ngx-dev-toolbar 0.0.2-1 → 0.0.2-3

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

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

@@ -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/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,66 @@
+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(--devtools-spacing-sm) var(--devtools-spacing-md);
+        border: 1px solid var(--devtools-border-primary);
+        border-radius: var(--devtools-border-radius-small);
+        background-color: var(--devtools-bg-primary);
+        color: var(--devtools-text-primary);
+        font-size: var(--devtools-font-size-sm);
+        transition: var(--devtools-transition-default);
+
+        &::placeholder {
+          color: var(--devtools-text-muted);
+        }
+
+        &:focus {
+          outline: none;
+          border-color: var(--devtools-primary);
+          box-shadow: 0 0 0 1px var(--devtools-primary);
+        }
+
+        &:disabled {
+          background-color: var(--devtools-background-secondary);
+          cursor: not-allowed;
+          color: var(--devtools-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/select/select.component.scss

@@ -0,0 +1,102 @@
+@use '../../styles' as devtools;
+
+select.select {
+  width: 100%;
+  cursor: pointer;
+  min-width: 100px;
+  display: flex;
+  align-items: center;
+  padding: var(--devtools-spacing-sm) var(--devtools-spacing-md);
+  border: 1px solid var(--devtools-border-primary);
+  border-radius: var(--devtools-border-radius-small);
+  background-color: var(--devtools-bg-primary);
+  color: var(--devtools-text-primary);
+  font-size: var(--devtools-font-size-sm);
+  gap: var(--devtools-spacing-xs);
+  appearance: none;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat;
+  background-position: right var(--devtools-spacing-sm) center;
+  background-size: 0.65em auto;
+  padding-right: 2.5em;
+  transition: var(--devtools-transition-default);
+
+  &.small {
+    padding: calc(var(--devtools-spacing-xs) / 2) var(--devtools-spacing-sm);
+    font-size: var(--devtools-font-size-sm);
+    height: 24px;
+    padding-right: 2em;
+  }
+
+  &:hover {
+    background-color: var(--devtools-background-hover);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--devtools-primary);
+    box-shadow: 0 0 0 1px var(--devtools-primary);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: var(--devtools-background-disabled);
+  }
+
+  &:invalid {
+    border-color: var(--devtools-border-error, #ff4444);
+  }
+
+  option {
+    background-color: var(--devtools-bg-primary);
+    color: var(--devtools-text-primary);
+    padding: var(--devtools-spacing-sm);
+    font-size: var(--devtools-font-size-sm);
+
+    &:hover,
+    &:focus {
+      background-color: var(--devtools-background-hover);
+    }
+  }
+}
+
+/* Style for Firefox */
+@-moz-document url-prefix() {
+  select.select {
+    text-indent: 0.01px;
+    text-overflow: '';
+    padding-right: 2.5em;
+
+    option {
+      background-color: var(--devtools-bg-primary) !important;
+      color: var(--devtools-text-primary) !important;
+    }
+  }
+}
+
+/* Style for Webkit browsers */
+select.select::-ms-expand {
+  display: none;
+}
+
+/* Additional browser-specific overrides */
+select::-ms-expand {
+  display: none;
+}
+
+/* For Webkit browsers (Chrome, Safari) */
+select.select:-webkit-autofill,
+select.select:-webkit-autofill:hover,
+select.select:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0px 1000px var(--devtools-bg-primary) inset !important;
+  -webkit-text-fill-color: var(--devtools-text-primary) !important;
+}
+
+/* For Firefox */
+@-moz-document url-prefix() {
+  .select option {
+    background-color: var(--devtools-bg-primary) !important;
+    color: var(--devtools-text-primary) !important;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+@Component({
+  selector: 'ndt-select',
+  standalone: true,
+  imports: [FormsModule],
+  template: `
+    <select
+      class="select"
+      [attr.aria-label]="ariaLabel()"
+      [class.small]="size() === 'small'"
+      [ngModel]="value()"
+      (ngModelChange)="value.set($event)"
+    >
+      @for (option of options(); track option.value) {
+        <option role="option" [value]="option.value">{{ option.label }}</option>
+      }
+    </select>
+  `,
+  styleUrls: ['./select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarSelectComponent {
+  value = model<string>();
+  options = input.required<SelectOption[]>();
+  ariaLabel = input<string>('');
+  label = input<string>('');
+  size = input<'small' | 'medium'>('medium');
+}

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(--devtools-text-primary);
+  transition: var(--devtools-transition-default);
+  cursor: pointer;
+  opacity: 0.5;
+  position: relative;
+
+  &--active {
+    background: var(--devtools-hover-bg);
+    opacity: 1;
+  }
+
+  &:hover {
+    background: var(--devtools-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(--devtools-hover-danger);
+    color: var(--devtools-text-primary);
+    border-radius: var(--devtools-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(--devtools-bg-primary);
+  color: var(--devtools-text-primary);
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--devtools-border-radius-medium);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1000;
+  box-shadow: var(--devtools-shadow-tooltip);
+}

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

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

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

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

@@ -0,0 +1,128 @@
+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 { WindowConfig } from '../window/window.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 [attr.data-tooltip]="title()">
+          @if (icon()) {
+          <ndt-tool-button [title]="title()" [toolId]="windowConfig().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 [config]="windowConfig()" (close)="onClose()">
+          <ng-content />
+        </ndt-window>
+      </ng-template>
+      }
+    </div>
+  `,
+  styleUrl: './toolbar-tool.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarToolComponent {
+  state = inject(DevToolbarStateService);
+  @ViewChild('trigger') trigger!: ElementRef;
+
+  @ContentChild(DevToolbarToolButtonComponent)
+  buttonComponent!: DevToolbarToolButtonComponent;
+
+  windowConfig = input.required<WindowConfig>();
+  icon = input.required<IconName>();
+  title = input.required<string>();
+  isActive = computed(
+    () => this.state.activeToolId() === this.windowConfig().id
+  );
+  height = computed(() => {
+    switch (this.windowConfig().size) {
+      case 'small':
+        return 320;
+      case 'medium':
+        return 480;
+      case 'tall':
+        return 620;
+      case 'large':
+        return 620;
+      default:
+        return 480;
+    }
+  });
+
+  width = computed(() => {
+    switch (this.windowConfig().size) {
+      case 'small':
+        return 320;
+      case 'medium':
+        return 480;
+      case 'tall':
+        return 480;
+      case 'large':
+        return 620;
+      default:
+        return 400;
+    }
+  });
+  positions = computed(() => [
+    {
+      originX: 'center' as const,
+      originY: 'center' as const,
+      overlayX: 'center' as const,
+      overlayY: 'center' as const,
+      offsetY: -(Math.ceil(this.height() / 2) + 36),
+    },
+  ]);
+
+  onOpen(): void {
+    this.state.setActiveTool(this.windowConfig().id);
+  }
+
+  onClose(): void {
+    this.state.setActiveTool(null);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { IconName } from '../icons/icon.models';
+import { WindowConfig } from '../window/window.models';
+
+export interface DevToolbarToolConfig {
+  icon: IconName;
+  name: string;
+  windowConfig: WindowConfig;
+  isBeta?: boolean;
+}