@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/app/app.routes.ts

@@ -0,0 +1,351 @@
+import { Routes } from '@angular/router';
+import { environment } from '../environments/environment.development';
+
+/**
+ * Application routes.
+ *
+ * Structure:
+ * - / : User's home page
+ * - /dev/* : Development routes (only available when devPanel is enabled)
+ *   - /dev/colors : Color palette reference
+ *   - /dev/icons : Icon library browser
+ *   - /dev/components : Component gallery
+ *   - /dev/demos/* : Individual component demos
+ *
+ * Getting Started:
+ * 1. Add your application routes below the home route
+ * 2. Use Ctrl+Shift+D to open the Dev Panel for component reference
+ * 3. Dev routes are automatically excluded from production builds
+ */
+export const routes: Routes = [
+  // User routes - add your application routes here
+  {
+    path: '',
+    loadComponent: () => import('./pages/home/home.component').then((m) => m.HomeComponent),
+    title: 'Home',
+  },
+
+  // Dev routes - conditionally added based on environment
+  ...(environment.devPanel
+    ? [
+        {
+          path: 'dev',
+          children: [
+            { path: '', redirectTo: 'components', pathMatch: 'full' as const },
+            {
+              path: 'colors',
+              loadComponent: () =>
+                import('./dev-pages/color-palette/color-palette.component').then(
+                  (m) => m.ColorPaletteComponent,
+                ),
+              title: 'Colors',
+            },
+            {
+              path: 'icons',
+              loadComponent: () =>
+                import('./dev-pages/icons/icons.component').then((m) => m.IconsComponent),
+              title: 'Icons',
+            },
+            {
+              path: 'components',
+              loadComponent: () =>
+                import('./dev-pages/components-gallery/components-gallery.component').then(
+                  (m) => m.ComponentsGalleryComponent,
+                ),
+              title: 'Components',
+            },
+            // Component demos
+            {
+              path: 'demos/accordion',
+              loadComponent: () =>
+                import('./demos/accordion/accordion-demo.component').then(
+                  (m) => m.AccordionDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/alert',
+              loadComponent: () =>
+                import('./demos/alert/alert-demo.component').then((m) => m.AlertDemoPageComponent),
+            },
+            {
+              path: 'demos/autocomplete',
+              loadComponent: () =>
+                import('./demos/autocomplete/autocomplete-demo.component').then(
+                  (m) => m.AutocompleteDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/avatar',
+              loadComponent: () =>
+                import('./demos/avatar/avatar-demo.component').then(
+                  (m) => m.AvatarDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/badge',
+              loadComponent: () =>
+                import('./demos/badge/badge-demo.component').then((m) => m.BadgeDemoPageComponent),
+            },
+            {
+              path: 'demos/breadcrumbs',
+              loadComponent: () =>
+                import('./demos/breadcrumbs/breadcrumbs-demo.component').then(
+                  (m) => m.BreadcrumbsDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/button',
+              loadComponent: () =>
+                import('./demos/button/button-demo.component').then(
+                  (m) => m.ButtonDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/button-group',
+              loadComponent: () =>
+                import('./demos/button-group/button-group-demo.component').then(
+                  (m) => m.ButtonGroupDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/card',
+              loadComponent: () =>
+                import('./demos/card/card-demo.component').then((m) => m.CardDemoPageComponent),
+            },
+            {
+              path: 'demos/checkbox',
+              loadComponent: () =>
+                import('./demos/checkbox/checkbox-demo.component').then(
+                  (m) => m.CheckboxDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/chip',
+              loadComponent: () =>
+                import('./demos/chip/chip-demo.component').then((m) => m.ChipDemoPageComponent),
+            },
+            {
+              path: 'demos/date',
+              loadComponent: () =>
+                import('./demos/date/date-demo.component').then((m) => m.DateDemoPageComponent),
+            },
+            {
+              path: 'demos/dropdown',
+              loadComponent: () =>
+                import('./demos/dropdown/dropdown-demo.component').then(
+                  (m) => m.DropdownDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/file-dropzone',
+              loadComponent: () =>
+                import('./demos/file-dropzone/file-dropzone-demo.component').then(
+                  (m) => m.FileDropzoneDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/handle',
+              loadComponent: () =>
+                import('./demos/handle/handle-demo.component').then(
+                  (m) => m.HandleDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/icon',
+              loadComponent: () =>
+                import('./demos/icon/icon-demo.component').then((m) => m.IconDemoPageComponent),
+            },
+            {
+              path: 'demos/input-feedback',
+              loadComponent: () =>
+                import('./demos/input-feedback/input-feedback-demo.component').then(
+                  (m) => m.InputFeedbackDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/input-label',
+              loadComponent: () =>
+                import('./demos/input-label/input-label-demo.component').then(
+                  (m) => m.InputLabelDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/loader',
+              loadComponent: () =>
+                import('./demos/loader/loader-demo.component').then(
+                  (m) => m.LoaderDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/logo',
+              loadComponent: () =>
+                import('./demos/logo/logo-demo.component').then(
+                  (m) => m.LogoDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/menu',
+              loadComponent: () =>
+                import('./demos/menu/menu-demo.component').then((m) => m.MenuDemoPageComponent),
+            },
+            {
+              path: 'demos/modal',
+              loadComponent: () =>
+                import('./demos/modal/modal-demo.component').then((m) => m.ModalDemoPageComponent),
+            },
+            {
+              path: 'demos/navbar',
+              loadComponent: () =>
+                import('./demos/navbar/navbar-demo.component').then(
+                  (m) => m.NavbarDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/number-input',
+              loadComponent: () =>
+                import('./demos/number-input/number-input-demo.component').then(
+                  (m) => m.NumberInputDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/pagination',
+              loadComponent: () =>
+                import('./demos/pagination/pagination-demo.component').then(
+                  (m) => m.PaginationDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/panel',
+              loadComponent: () =>
+                import('./demos/panel/panel-demo.component').then((m) => m.PanelDemoPageComponent),
+            },
+            {
+              path: 'demos/progress',
+              loadComponent: () =>
+                import('./demos/progress/progress-demo.component').then(
+                  (m) => m.ProgressDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/radio',
+              loadComponent: () =>
+                import('./demos/radio/radio-demo.component').then((m) => m.RadioDemoPageComponent),
+            },
+            {
+              path: 'demos/rating',
+              loadComponent: () =>
+                import('./demos/rating/rating-demo.component').then(
+                  (m) => m.RatingDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/select',
+              loadComponent: () =>
+                import('./demos/select/select-demo.component').then(
+                  (m) => m.SelectDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/side-navigation',
+              loadComponent: () =>
+                import('./demos/side-navigation/side-navigation-demo.component').then(
+                  (m) => m.SideNavigationDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/skeleton',
+              loadComponent: () =>
+                import('./demos/skeleton/skeleton-demo.component').then(
+                  (m) => m.SkeletonDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/slider',
+              loadComponent: () =>
+                import('./demos/slider/slider-demo.component').then(
+                  (m) => m.SliderDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/stepper',
+              loadComponent: () =>
+                import('./demos/stepper/stepper-demo.component').then(
+                  (m) => m.StepperDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/switch',
+              loadComponent: () =>
+                import('./demos/switch/switch-demo.component').then(
+                  (m) => m.SwitchDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/table',
+              loadComponent: () =>
+                import('./demos/table/table-demo.component').then((m) => m.TableDemoPageComponent),
+            },
+            {
+              path: 'demos/tabs',
+              loadComponent: () =>
+                import('./demos/tabs/tabs-demo.component').then((m) => m.TabsDemoPageComponent),
+            },
+            {
+              path: 'demos/textarea',
+              loadComponent: () =>
+                import('./demos/textarea/textarea-demo.component').then(
+                  (m) => m.TextareaDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/text-input',
+              loadComponent: () =>
+                import('./demos/text-input/text-input-demo.component').then(
+                  (m) => m.TextInputDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/theme-switcher',
+              loadComponent: () =>
+                import('./demos/theme-switcher/theme-switcher-demo.component').then(
+                  (m) => m.ThemeSwitcherDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/time-input',
+              loadComponent: () =>
+                import('./demos/time-input/time-input-demo.component').then(
+                  (m) => m.TimeInputDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/toast',
+              loadComponent: () =>
+                import('./demos/toast/toast-demo.component').then((m) => m.ToastDemoPageComponent),
+            },
+            {
+              path: 'demos/toolbar',
+              loadComponent: () =>
+                import('./demos/toolbar/toolbar-demo.component').then(
+                  (m) => m.ToolbarDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/tooltip',
+              loadComponent: () =>
+                import('./demos/tooltip/tooltip-demo.component').then(
+                  (m) => m.TooltipDemoPageComponent,
+                ),
+            },
+            {
+              path: 'demos/utility-panel',
+              loadComponent: () =>
+                import('./demos/utility-panel/utility-panel-demo.component').then(
+                  (m) => m.UtilityPanelDemoPageComponent,
+                ),
+            },
+          ],
+        },
+      ]
+    : []),
+];

package/templates/angular/src/app/app.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [provideRouter([])], // Provide Router for routerLink and routerLinkActive directives
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    // Find the h1 in the main section (not the nav)
+    const mainH1 = compiled.querySelector('main h1');
+    expect(mainH1?.textContent?.trim()).toBe('Hello, angular-vite');
+  });
+});

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

@@ -0,0 +1,47 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ThemeService } from './services/theme.service';
+import { DevPanelService, DevPanelComponent } from './dev';
+
+/**
+ * Main Application Component.
+ *
+ * Structure:
+ * - Router outlet for application pages
+ * - DevPanel (floating, development-only)
+ *
+ * Getting Started:
+ * 1. Edit src/app/pages/home/home.component.ts for your landing page
+ * 2. Add new pages in src/app/pages/
+ * 3. Add routes in src/app/app.routes.ts
+ * 4. Use Ctrl+Shift+D to open the Dev Panel for component reference
+ *
+ * The Dev Panel provides access to:
+ * - Theme switcher (6 Modus themes)
+ * - Color palette reference
+ * - Icon library browser
+ * - Component demos
+ */
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, DevPanelComponent],
+  template: `
+    <router-outlet />
+    @if (devPanelService.isEnabled()) {
+      <app-dev-panel />
+    }
+  `,
+  host: {
+    class: 'min-h-screen flex flex-col',
+  },
+})
+export class App implements OnInit {
+  readonly devPanelService = inject(DevPanelService);
+  private readonly themeService = inject(ThemeService);
+
+  ngOnInit(): void {
+    // Initialize theme service - this will load theme from localStorage
+    // and apply it to the document
+    this.themeService.getThemeConfig();
+  }
+}

package/templates/angular/src/app/components/README.md

@@ -0,0 +1,77 @@
+# Modus Web Components - Angular 20 Wrappers
+
+This directory contains Angular 20 standalone wrapper components for Modus Web Components. Each component is in its own file for better DX and AI-assisted coding.
+
+## Setup
+
+1. **Package Installation**: The `@trimble-oss/moduswebcomponents-angular@1.0.1-ng19` package is installed (works with Angular 20)
+2. **Initialization**: The Modus Web Components are initialized in `app.config.ts` using `APP_INITIALIZER` to define custom elements on app startup
+
+## Creating a New Wrapper Component
+
+Follow this pattern to create additional wrapper components using the Stencil-generated Angular components:
+
+```typescript
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ModusWc[ComponentName] } from '@trimble-oss/moduswebcomponents-angular';
+
+@Component({
+  selector: 'modus-[component-name]',
+  standalone: true,
+  imports: [ModusWc[ComponentName]],
+  template: `
+    <modus-wc-[component-name]
+      [prop1]="prop1"
+      [prop2]="prop2"
+      (eventName)="onEventName($event)"
+    >
+      <ng-content></ng-content>
+    </modus-wc-[component-name]>
+  `,
+})
+export class Modus[ComponentName]Component {
+  @Input() prop1: string = 'default';
+  @Input() prop2?: boolean = false;
+  
+  @Output() eventName = new EventEmitter<EventType>();
+  
+  onEventName(event: CustomEvent<EventType>): void {
+    this.eventName.emit(event.detail);
+  }
+}
+```
+
+## Key Points
+
+1. **Standalone Components**: All wrappers are standalone Angular components
+2. **Import Angular Components**: Import the Stencil-generated Angular component (e.g., `ModusWcButton`) from `@trimble-oss/moduswebcomponents-angular` and add it to the `imports` array
+3. **No CUSTOM_ELEMENTS_SCHEMA**: Not needed since we're using Angular components, not custom elements directly
+4. **Event Handling**: Angular components emit `CustomEvent`, so extract `event.detail` before emitting
+5. **Content Projection**: Use `<ng-content>` for component content
+6. **Export**: Add exports to `index.ts` for easy importing
+7. **Available Components**: All components from `@trimble-oss/moduswebcomponents-angular` can be imported (ModusWcButton, ModusWcModal, ModusWcTable, etc.)
+
+## Usage Example
+
+```typescript
+import { ModusButtonComponent } from './components';
+
+@Component({
+  selector: 'app-root',
+  imports: [ModusButtonComponent],
+  template: `
+    <modus-button 
+      color="primary" 
+      size="md"
+      (buttonClick)="onClick($event)">
+      Click Me!
+    </modus-button>
+  `,
+})
+export class App {
+  onClick(event: MouseEvent | KeyboardEvent): void {
+    console.log('Clicked!', event);
+  }
+}
+```
+

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

@@ -0,0 +1,53 @@
+/**
+ * Export all Modus Angular wrapper components
+ */
+
+export * from './modus-accordion.component';
+export * from './modus-alert.component';
+export * from './modus-autocomplete.component';
+export * from './modus-avatar.component';
+export * from './modus-badge.component';
+export * from './modus-breadcrumbs.component';
+export * from './modus-button.component';
+export * from './modus-button-group.component';
+export * from './modus-card.component';
+export * from './modus-checkbox.component';
+export * from './modus-chip.component';
+export * from './modus-collapse.component';
+export * from './modus-date.component';
+export * from './modus-dropdown-menu.component';
+export * from './modus-file-dropzone.component';
+export * from './modus-handle.component';
+export * from './modus-icon.component';
+export * from './modus-input-feedback.component';
+export * from './modus-input-label.component';
+export * from './modus-loader.component';
+export * from './modus-logo.component';
+export * from './modus-menu-item.component';
+export * from './modus-menu.component';
+export * from './modus-modal.component';
+export * from './modus-navbar.component';
+export * from './modus-number-input.component';
+export * from './modus-pagination.component';
+export * from './modus-panel.component';
+export * from './modus-progress.component';
+export * from './modus-radio.component';
+export * from './modus-rating.component';
+export * from './modus-select.component';
+export * from './modus-side-navigation.component';
+export * from './modus-skeleton.component';
+export * from './modus-slider.component';
+export * from './modus-stepper.component';
+export * from './modus-switch.component';
+export * from './modus-table.component';
+export * from './modus-tabs.component';
+export * from './modus-text-input.component';
+export * from './modus-textarea.component';
+export * from './modus-theme-switcher.component';
+export * from './modus-time-input.component';
+export * from './modus-toast.component';
+export * from './modus-toolbar.component';
+export * from './modus-tooltip.component';
+export * from './modus-typography.component';
+export * from './modus-utility-panel.component';
+export * from './theme-demo.component';

package/templates/angular/src/app/components/modus-accordion.component.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcAccordion } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusAccordionComponent}.
+ */
+export interface ModusAccordionProps {
+  /** Custom CSS class applied to the accordion element. */
+  className?: Components.ModusWcAccordion['customClass'];
+}
+
+/**
+ * Angular wrapper for the Modus accordion web component.
+ *
+ * The accordion supports projecting `<modus-collapse>` elements as children.
+ * See the collapse component documentation for additional information.
+ *
+ * @example
+ * ```html
+ * <modus-accordion>
+ *   <modus-collapse [options]="collapseOptions[0]">
+ *     <div slot="content">Collapse content</div>
+ *   </modus-collapse>
+ * </modus-accordion>
+ * ```
+ */
+@Component({
+  selector: 'modus-accordion',
+  imports: [CommonModule, ModusWcAccordion],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-accordion [customClass]="className()" (expandedChange)="handleExpandedChange($event)">
+      <ng-content />
+    </modus-wc-accordion>
+  `,
+})
+export class ModusAccordionComponent {
+  /** Custom CSS class applied to the accordion element. */
+  readonly className = input<string | undefined>();
+
+  /** Emits when a collapse expanded state is changed. */
+  readonly expandedChange = output<{ expanded: boolean; index: number }>();
+
+  /** Handles expanded change events from the Modus Accordion Web Component. */
+  handleExpandedChange(event: CustomEvent<{ expanded: boolean; index: number }>): void {
+    this.expandedChange.emit(event.detail);
+  }
+}