@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/app/demos/utility-panel/utility-panel-demo.component.ts

@@ -0,0 +1,197 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+import { ModusTextInputComponent } from '../../components/modus-text-input.component';
+import { ModusSwitchComponent } from '../../components/modus-switch.component';
+import { ModusUtilityPanelComponent } from '../../components/modus-utility-panel.component';
+
+interface UtilityPanelFormState {
+  projectName: string;
+  email: string;
+  notifications: boolean;
+  autoSave: boolean;
+}
+
+/**
+ * Demo page showcasing the Modus Utility Panel component.
+ */
+@Component({
+  selector: 'app-utility-panel-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusButtonComponent,
+    ModusTextInputComponent,
+    ModusSwitchComponent,
+    ModusUtilityPanelComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Utility Panel"
+      description="Utility panels slide in contextual information or controls without leaving the page. Keep content focused and provide clear actions."
+    >
+      <demo-example
+        title="Settings Panel with Form Controls"
+        description="A utility panel containing form inputs and controls. The panel can be toggled to show or hide additional settings without leaving the main workspace."
+      >
+        <div class="space-y-6">
+          <!-- Toggle controls section -->
+          <div class="flex gap-4 items-center">
+            <modus-button
+              color="primary"
+              size="sm"
+              (buttonClick)="togglePanel()"
+            >
+              {{ expanded() ? 'Close' : 'Open' }} Settings Panel
+            </modus-button>
+            <div class="text-sm text-muted-foreground">
+              Panel state: {{ expanded() ? 'Open' : 'Closed' }}
+            </div>
+          </div>
+
+          <!-- Main content area -->
+          <div class="p-6 bg-card rounded-lg border-default">
+            <div class="text-xl font-semibold text-foreground mb-3">Main Workspace</div>
+            <div class="text-muted-foreground mb-4">
+              This is the primary content area. The utility panel slides in from the right to
+              provide additional controls and settings without leaving this workspace.
+            </div>
+            <div class="space-y-2 text-sm">
+              <div class="text-foreground">
+                Panel Position: <span class="text-muted-foreground">Right side (default)</span>
+              </div>
+              <div class="text-foreground">
+                Panel Width: <span class="text-muted-foreground">312px (default)</span>
+              </div>
+              <div class="text-foreground">
+                Overlay Mode: <span class="text-muted-foreground">Yes</span>
+              </div>
+              <div class="text-foreground">
+                Current Form Data:
+                <div class="text-muted-foreground mt-2 bg-muted rounded-lg p-3 border-default">
+                  {{ formData() | json }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          @if (saveMessage()) {
+            <div class="text-sm text-success">{{ saveMessage() }}</div>
+          }
+        </div>
+      </demo-example>
+    </demo-page>
+
+    <!-- Fixed positioned utility panel - outside the demo content flow -->
+    <modus-utility-panel
+      [expanded]="expanded()"
+      position="right"
+      panelWidth="312px"
+      ariaLabel="Project settings panel"
+      className="fixed-utility-panel"
+    >
+      <div
+        slot="header"
+        class="flex items-center justify-between w-full min-w-full max-w-full"
+      >
+        <div class="text-xl font-bold text-foreground">Project Settings</div>
+        <modus-button
+          size="sm"
+          color="secondary"
+          variant="borderless"
+          shape="circle"
+          icon="close"
+          iconPosition="only"
+          ariaLabel="Close panel"
+          (buttonClick)="closePanel()"
+        />
+      </div>
+
+      <div class="space-y-4">
+        <div>
+          <modus-text-input
+            label="Project Name"
+            [value]="formData().projectName"
+            placeholder="Enter project name"
+            (inputChange)="handleInputChange('projectName', $event)"
+          />
+        </div>
+
+        <div>
+          <modus-text-input
+            label="Email"
+            type="email"
+            [value]="formData().email"
+            placeholder="Enter email address"
+            (inputChange)="handleInputChange('email', $event)"
+          />
+        </div>
+
+        <div class="space-y-3">
+          <modus-switch
+            label="Enable Notifications"
+            [value]="formData().notifications"
+            (inputChange)="handleSwitchChange('notifications', $event)"
+          />
+
+          <modus-switch
+            label="Auto-save Changes"
+            [value]="formData().autoSave"
+            (inputChange)="handleSwitchChange('autoSave', $event)"
+          />
+        </div>
+
+        <div class="pt-2 text-xs text-muted-foreground">
+          <div>• Panel slides over main content</div>
+          <div>• Form state is preserved when toggling</div>
+          <div>• Settings are applied immediately</div>
+        </div>
+      </div>
+
+      <div slot="footer" class="flex gap-2 justify-end">
+        <modus-button size="md" color="secondary" (buttonClick)="closePanel()">
+          Close
+        </modus-button>
+        <modus-button size="md" color="primary" (buttonClick)="handleSave()">
+          Save Settings
+        </modus-button>
+      </div>
+    </modus-utility-panel>
+  `,
+})
+export class UtilityPanelDemoPageComponent {
+  readonly expanded = signal<boolean>(false);
+  readonly saveMessage = signal<string>('');
+  readonly formData = signal<UtilityPanelFormState>({
+    projectName: '',
+    email: '',
+    notifications: true,
+    autoSave: false,
+  });
+
+  togglePanel(): void {
+    this.expanded.set(!this.expanded());
+  }
+
+  closePanel(): void {
+    this.expanded.set(false);
+  }
+
+  handleInputChange(field: 'projectName' | 'email', event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.formData.update((data) => ({ ...data, [field]: target.value }));
+  }
+
+  handleSwitchChange(field: 'notifications' | 'autoSave', event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.formData.update((data) => ({ ...data, [field]: target.checked }));
+  }
+
+  handleSave(): void {
+    this.saveMessage.set('Settings saved. Check the form data above for current values.');
+  }
+}

package/templates/angular/src/app/dev/dev-config.ts

@@ -0,0 +1,119 @@
+/**
+ * Dev Panel configuration
+ */
+
+export interface DevNavItem {
+  label: string;
+  path: string;
+  icon?: string;
+  description?: string;
+}
+
+export interface DevNavCategory {
+  label: string;
+  items: DevNavItem[];
+}
+
+/**
+ * Main navigation items for the Dev Panel
+ */
+export const devNavItems: DevNavItem[] = [
+  {
+    label: 'Colors',
+    path: '/dev/colors',
+    icon: 'palette',
+    description: 'Color palette reference',
+  },
+  {
+    label: 'Icons',
+    path: '/dev/icons',
+    icon: 'apps',
+    description: 'Icon library browser',
+  },
+  {
+    label: 'Components',
+    path: '/dev/components',
+    icon: 'widgets',
+    description: 'Component gallery',
+  },
+];
+
+/**
+ * Component demo categories for the Dev Panel navigation.
+ * Categories and items are sorted alphabetically.
+ */
+export const demoCategories: DevNavCategory[] = [
+  {
+    label: 'Display',
+    items: [
+      { label: 'Avatar', path: '/dev/demos/avatar' },
+      { label: 'Badge', path: '/dev/demos/badge' },
+      { label: 'Chip', path: '/dev/demos/chip' },
+      { label: 'Icon', path: '/dev/demos/icon' },
+      { label: 'Logo', path: '/dev/demos/logo' },
+      { label: 'Pagination', path: '/dev/demos/pagination' },
+      { label: 'Skeleton', path: '/dev/demos/skeleton' },
+      { label: 'Stepper', path: '/dev/demos/stepper' },
+      { label: 'Table', path: '/dev/demos/table' },
+    ],
+  },
+  {
+    label: 'Feedback',
+    items: [
+      { label: 'Alert', path: '/dev/demos/alert' },
+      { label: 'Handle', path: '/dev/demos/handle' },
+      { label: 'Input Feedback', path: '/dev/demos/input-feedback' },
+      { label: 'Input Label', path: '/dev/demos/input-label' },
+      { label: 'Loader', path: '/dev/demos/loader' },
+      { label: 'Modal', path: '/dev/demos/modal' },
+      { label: 'Progress', path: '/dev/demos/progress' },
+      { label: 'Rating', path: '/dev/demos/rating' },
+      { label: 'Toast', path: '/dev/demos/toast' },
+      { label: 'Tooltip', path: '/dev/demos/tooltip' },
+    ],
+  },
+  {
+    label: 'Forms',
+    items: [
+      { label: 'Autocomplete', path: '/dev/demos/autocomplete' },
+      { label: 'Button', path: '/dev/demos/button' },
+      { label: 'Button Group', path: '/dev/demos/button-group' },
+      { label: 'Checkbox', path: '/dev/demos/checkbox' },
+      { label: 'Date', path: '/dev/demos/date' },
+      { label: 'Dropdown', path: '/dev/demos/dropdown' },
+      { label: 'File Dropzone', path: '/dev/demos/file-dropzone' },
+      { label: 'Number Input', path: '/dev/demos/number-input' },
+      { label: 'Radio', path: '/dev/demos/radio' },
+      { label: 'Select', path: '/dev/demos/select' },
+      { label: 'Slider', path: '/dev/demos/slider' },
+      { label: 'Switch', path: '/dev/demos/switch' },
+      { label: 'Text Input', path: '/dev/demos/text-input' },
+      { label: 'Textarea', path: '/dev/demos/textarea' },
+      { label: 'Time Input', path: '/dev/demos/time-input' },
+    ],
+  },
+  {
+    label: 'Layout',
+    items: [
+      { label: 'Accordion', path: '/dev/demos/accordion' },
+      { label: 'Card', path: '/dev/demos/card' },
+      { label: 'Panel', path: '/dev/demos/panel' },
+      { label: 'Utility Panel', path: '/dev/demos/utility-panel' },
+    ],
+  },
+  {
+    label: 'Navigation',
+    items: [
+      { label: 'Breadcrumbs', path: '/dev/demos/breadcrumbs' },
+      { label: 'Menu', path: '/dev/demos/menu' },
+      { label: 'Navbar', path: '/dev/demos/navbar' },
+      { label: 'Side Navigation', path: '/dev/demos/side-navigation' },
+      { label: 'Tabs', path: '/dev/demos/tabs' },
+      { label: 'Toolbar', path: '/dev/demos/toolbar' },
+    ],
+  },
+  {
+    label: 'System',
+    items: [{ label: 'Theme Switcher', path: '/dev/demos/theme-switcher' }],
+  },
+];

package/templates/angular/src/app/dev/dev-panel/dev-panel.component.ts

@@ -0,0 +1,215 @@
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { DevPanelService } from '../dev-panel.service';
+import { devNavItems, demoCategories } from '../dev-config';
+import { ThemeSwitcherDropdownComponent } from '../theme-switcher-dropdown/theme-switcher-dropdown.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Floating Dev Panel component.
+ *
+ * Provides access to development tools, demos, and theme switching.
+ * Only renders in development mode when devPanel environment flag is true.
+ *
+ * Features:
+ * - Floating toggle button (bottom-right)
+ * - Slide-out panel from right
+ * - Theme switcher
+ * - Navigation to reference pages (Colors, Icons, Components)
+ * - Accordion navigation to component demos
+ * - Keyboard shortcuts (Ctrl+Shift+D toggle, Escape close)
+ */
+@Component({
+  selector: 'app-dev-panel',
+  standalone: true,
+  imports: [RouterModule, ModusButtonComponent, ThemeSwitcherDropdownComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <!-- Floating Toggle Button - always visible -->
+    <div class="fixed bottom-4 right-4 z-[9999]">
+      <modus-button color="primary" size="lg" (buttonClick)="toggle()">
+        <div class="flex items-center gap-2">
+          <i class="modus-icons text-xl">{{ isOpen() ? 'close' : 'code' }}</i>
+          <div class="hidden sm:block">Dev</div>
+        </div>
+      </modus-button>
+    </div>
+
+    <!-- Panel - Only render when open to avoid blocking clicks -->
+    @if (isOpen()) {
+      <div class="fixed inset-0 z-[9998]">
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-foreground-20 animate-fade-in" (click)="close()"></div>
+
+        <!-- Panel -->
+        <div
+          class="absolute top-0 right-0 h-full w-[360px] max-w-[90vw] bg-card shadow-xl animate-slide-in-right overflow-hidden flex flex-col"
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between p-4 border-bottom-default shrink-0">
+            <div class="text-lg font-semibold text-foreground">Dev Panel</div>
+            <modus-button
+              variant="borderless"
+              color="secondary"
+              size="sm"
+              (buttonClick)="close()"
+              ariaLabel="Close Dev Panel"
+            >
+              <i class="modus-icons">close</i>
+            </modus-button>
+          </div>
+
+          <!-- Body -->
+          <div class="flex-1 overflow-y-auto p-4">
+            <div class="space-y-6">
+              <!-- Theme Switcher Section -->
+              <div class="space-y-2">
+                <div class="text-sm font-semibold text-foreground-60 uppercase tracking-wide">
+                  Theme
+                </div>
+                <app-theme-switcher-dropdown />
+              </div>
+
+              <!-- Main Navigation -->
+              <div class="space-y-2">
+                <div class="text-sm font-semibold text-foreground-60 uppercase tracking-wide">
+                  Reference
+                </div>
+                <div class="space-y-1">
+                  <!-- Home Button -->
+                  <div
+                    role="button"
+                    tabindex="0"
+                    (click)="handleNavClick('/')"
+                    (keydown.enter)="handleNavClick('/')"
+                    class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors cursor-pointer"
+                    [class.bg-primary]="isActive('/')"
+                    [class.text-primary-foreground]="isActive('/')"
+                    [class.hover:bg-muted]="!isActive('/')"
+                    [class.text-foreground]="!isActive('/')"
+                  >
+                    <i class="modus-icons text-lg">home</i>
+                    <div>Home</div>
+                  </div>
+
+                  @for (item of navItems; track item.path) {
+                    <div
+                      role="button"
+                      tabindex="0"
+                      (click)="handleNavClick(item.path)"
+                      (keydown.enter)="handleNavClick(item.path)"
+                      class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors cursor-pointer"
+                      [class.bg-primary]="isActive(item.path)"
+                      [class.text-primary-foreground]="isActive(item.path)"
+                      [class.hover:bg-muted]="!isActive(item.path)"
+                      [class.text-foreground]="!isActive(item.path)"
+                    >
+                      @if (item.icon) {
+                        <i class="modus-icons text-lg">{{ item.icon }}</i>
+                      }
+                      <div>{{ item.label }}</div>
+                    </div>
+                  }
+                </div>
+              </div>
+
+              <!-- Component Demos -->
+              <div class="space-y-2">
+                <div class="text-sm font-semibold text-foreground-60 uppercase tracking-wide">
+                  Component Demos
+                </div>
+                <div class="border-default rounded-lg overflow-hidden">
+                  @for (category of demoCategories; track category.label) {
+                    <div class="border-bottom-default last:border-b-0">
+                      <div
+                        role="button"
+                        tabindex="0"
+                        (click)="toggleCategory(category.label)"
+                        (keydown.enter)="toggleCategory(category.label)"
+                        class="w-full flex items-center justify-between px-3 py-2 hover:bg-muted transition-colors text-left cursor-pointer"
+                      >
+                        <div class="font-medium text-foreground">{{ category.label }}</div>
+                        <i class="modus-icons text-foreground-60">
+                          {{ isCategoryExpanded(category.label) ? 'expand_less' : 'expand_more' }}
+                        </i>
+                      </div>
+                      @if (isCategoryExpanded(category.label)) {
+                        <div class="pl-4 pb-2 space-y-1">
+                          @for (item of category.items; track item.path) {
+                            <div
+                              role="button"
+                              tabindex="0"
+                              (click)="handleNavClick(item.path)"
+                              (keydown.enter)="handleNavClick(item.path)"
+                              class="w-full flex items-center gap-2 px-3 py-1.5 rounded text-sm text-left transition-colors cursor-pointer"
+                              [class.bg-primary]="isActive(item.path)"
+                              [class.text-primary-foreground]="isActive(item.path)"
+                              [class.hover:bg-muted]="!isActive(item.path)"
+                              [class.text-foreground]="!isActive(item.path)"
+                            >
+                              {{ item.label }}
+                            </div>
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+
+              <!-- Keyboard Shortcut Hint -->
+              <div class="pt-4 border-top-default">
+                <div class="text-xs text-foreground-60 text-center">
+                  Press
+                  <span class="inline px-1.5 py-0.5 bg-muted rounded text-foreground text-xs font-mono"
+                    >Ctrl+Shift+D</span
+                  >
+                  to toggle
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `,
+})
+export class DevPanelComponent {
+  private readonly devPanelService = inject(DevPanelService);
+  private readonly router = inject(Router);
+
+  readonly isOpen = this.devPanelService.isOpen;
+  readonly navItems = devNavItems;
+  readonly demoCategories = demoCategories;
+
+  private readonly expandedCategories = signal<string[]>([]);
+
+  toggle(): void {
+    this.devPanelService.toggle();
+  }
+
+  close(): void {
+    this.devPanelService.close();
+  }
+
+  handleNavClick(path: string): void {
+    this.router.navigate([path]);
+    this.close();
+  }
+
+  isActive(path: string): boolean {
+    return this.router.url === path;
+  }
+
+  toggleCategory(label: string): void {
+    this.expandedCategories.update((categories) =>
+      categories.includes(label)
+        ? categories.filter((l) => l !== label)
+        : [...categories, label],
+    );
+  }
+
+  isCategoryExpanded(label: string): boolean {
+    return this.expandedCategories().includes(label);
+  }
+}

package/templates/angular/src/app/dev/dev-panel.service.ts

@@ -0,0 +1,63 @@
+import { Injectable, signal, computed } from '@angular/core';
+import { environment } from '../../environments/environment.development';
+
+/**
+ * Service for managing Dev Panel state.
+ *
+ * Provides:
+ * - Signal-based state management for panel open/close
+ * - Environment-based feature flag
+ * - Keyboard shortcuts (Ctrl+Shift+D to toggle, Escape to close)
+ */
+@Injectable({ providedIn: 'root' })
+export class DevPanelService {
+  private readonly _isOpen = signal(false);
+
+  /** Read-only signal for panel open state */
+  readonly isOpen = this._isOpen.asReadonly();
+
+  /** Computed signal to check if Dev Panel feature is enabled */
+  readonly isEnabled = computed(() => environment.devPanel);
+
+  constructor() {
+    this.initKeyboardShortcuts();
+  }
+
+  /** Toggle the panel open/close state */
+  toggle(): void {
+    this._isOpen.update((open) => !open);
+  }
+
+  /** Open the panel */
+  open(): void {
+    this._isOpen.set(true);
+  }
+
+  /** Close the panel */
+  close(): void {
+    this._isOpen.set(false);
+  }
+
+  /**
+   * Initialize keyboard shortcuts for the Dev Panel.
+   * - Ctrl+Shift+D (or Cmd+Shift+D on Mac): Toggle panel
+   * - Escape: Close panel when open
+   */
+  private initKeyboardShortcuts(): void {
+    if (typeof window === 'undefined') return;
+
+    window.addEventListener('keydown', (event: KeyboardEvent) => {
+      // Toggle with Ctrl+Shift+D or Cmd+Shift+D
+      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key.toLowerCase() === 'd') {
+        event.preventDefault();
+        this.toggle();
+      }
+
+      // Close with Escape when open
+      if (event.key === 'Escape' && this._isOpen()) {
+        event.preventDefault();
+        this.close();
+      }
+    });
+  }
+}

package/templates/angular/src/app/dev/index.ts

@@ -0,0 +1,8 @@
+// Dev Panel Infrastructure
+export { DevPanelService } from './dev-panel.service';
+export { DevPanelComponent } from './dev-panel/dev-panel.component';
+export { ThemeSwitcherDropdownComponent } from './theme-switcher-dropdown/theme-switcher-dropdown.component';
+
+// Configuration
+export { devNavItems, demoCategories } from './dev-config';
+export type { DevNavItem, DevNavCategory } from './dev-config';