@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,161 @@
+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 { ModusRadioComponent } from '../../components/modus-radio.component';
+import { ModusInputLabelComponent } from '../../components/modus-input-label.component';
+
+/**
+ * Demo page showcasing the Modus Radio component.
+ *
+ * Demonstrates radio button features including:
+ * - Basic radio groups
+ * - Sizes
+ * - Disabled state
+ * - Required fields
+ * - With labels
+ */
+@Component({
+  selector: 'app-radio-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusRadioComponent,
+    ModusInputLabelComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Radio"
+      description="Radio buttons allow users to select a single option from a group. Use radio buttons when only one option can be selected at a time."
+    >
+      <demo-example
+        title="Basic Radio Group"
+        description="Simple radio button group with multiple options."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="option-a" labelText="Select Option" />
+            <div class="flex flex-col gap-2">
+              <modus-radio inputId="option-a" label="Option A" name="basic-group" [value]="true" />
+              <modus-radio inputId="option-b" label="Option B" name="basic-group" [value]="false" />
+              <modus-radio inputId="option-c" label="Option C" name="basic-group" [value]="false" />
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Radio Button Sizes"
+        description="Radio buttons in different sizes."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="small-radio" labelText="Small" />
+            <div class="flex flex-col gap-2">
+              <modus-radio inputId="small-radio" label="Small Option" name="small-group" size="sm" [value]="true" />
+              <modus-radio inputId="small-radio-b" label="Another Small Option" name="small-group" size="sm" [value]="false" />
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="medium-radio" labelText="Medium (Default)" />
+            <div class="flex flex-col gap-2">
+              <modus-radio inputId="medium-radio" label="Medium Option" name="medium-group" size="md" [value]="true" />
+              <modus-radio inputId="medium-radio-b" label="Another Medium Option" name="medium-group" size="md" [value]="false" />
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="large-radio" labelText="Large" />
+            <div class="flex flex-col gap-2">
+              <modus-radio inputId="large-radio" label="Large Option" name="large-group" size="lg" [value]="true" />
+              <modus-radio inputId="large-radio-b" label="Another Large Option" name="large-group" size="lg" [value]="false" />
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Required Radio Group"
+        description="Radio buttons marked as required."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="required-a" labelText="Required Selection" [required]="true" />
+            <div class="flex flex-col gap-2">
+              <modus-radio inputId="required-a" label="Yes" name="required-group" [required]="true" [value]="true" />
+              <modus-radio inputId="required-b" label="No" name="required-group" [required]="true" [value]="false" />
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Disabled Radio Buttons"
+        description="Radio buttons in disabled state."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="disabled-a" labelText="Disabled Options" />
+            <div class="flex flex-col gap-2">
+              <modus-radio inputId="disabled-a" label="Disabled Option 1" name="disabled-group" [disabled]="true" [value]="true" />
+              <modus-radio inputId="disabled-b" label="Disabled Option 2" name="disabled-group" [disabled]="true" [value]="false" />
+              <modus-radio inputId="disabled-c" label="Enabled Option" name="disabled-group" [disabled]="false" [value]="false" />
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Interactive Example"
+        description="Radio buttons with two-way binding and event handling."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="interactive-a" labelText="Choose Your Plan" />
+            <div class="flex flex-col gap-2">
+              <modus-radio
+                inputId="interactive-a"
+                label="Free Plan"
+                name="interactive-group"
+                [value]="selectedOption() === 'free'"
+                (inputChange)="handleRadioChange('free')"
+              />
+              <modus-radio
+                inputId="interactive-b"
+                label="Pro Plan"
+                name="interactive-group"
+                [value]="selectedOption() === 'pro'"
+                (inputChange)="handleRadioChange('pro')"
+              />
+              <modus-radio
+                inputId="interactive-c"
+                label="Enterprise Plan"
+                name="interactive-group"
+                [value]="selectedOption() === 'enterprise'"
+                (inputChange)="handleRadioChange('enterprise')"
+              />
+            </div>
+          </div>
+          @if (selectedOption()) {
+            <div class="p-4 rounded-lg bg-card border-default">
+              <p class="text-sm text-foreground">
+                <strong>Selected Option:</strong> {{ selectedOption() }}
+              </p>
+            </div>
+          }
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class RadioDemoPageComponent {
+  readonly selectedOption = signal<string | null>(null);
+
+  handleRadioChange(value: string): void {
+    this.selectedOption.set(value);
+  }
+}
+

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

@@ -0,0 +1,97 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusRatingComponent } from '../../components/modus-rating.component';
+
+/**
+ * Demo page showcasing the Modus Rating component.
+ *
+ * Demonstrates rating features including:
+ * - Star ratings
+ * - Smiley ratings
+ * - Half ratings
+ * - Different sizes
+ * - Interactive ratings
+ */
+@Component({
+  selector: 'app-rating-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusRatingComponent],
+  template: `
+    <demo-page
+      title="Modus Rating"
+      description="Rating components allow users to provide feedback through visual ratings. Use ratings for reviews, surveys, or any scenario requiring user opinion."
+    >
+      <demo-example title="Star Rating" description="Star-based rating system.">
+        <div class="flex flex-col gap-6">
+          <modus-rating variant="star" [value]="0" [count]="5" />
+          <modus-rating variant="star" [value]="2.5" [count]="5" />
+          <modus-rating variant="star" [value]="5" [count]="5" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Star Rating with Half Steps"
+        description="Star ratings that allow half-step increments."
+      >
+        <div class="flex flex-col gap-6">
+          <modus-rating variant="star" [value]="2.5" [count]="5" [allowHalf]="true" />
+          <modus-rating variant="star" [value]="3.5" [count]="5" [allowHalf]="true" />
+          <modus-rating variant="star" [value]="4.5" [count]="5" [allowHalf]="true" />
+        </div>
+      </demo-example>
+
+      <demo-example title="Smiley Rating" description="Smiley face-based rating system.">
+        <div class="flex flex-col gap-6">
+          <modus-rating variant="smiley" [value]="1" [count]="5" />
+          <modus-rating variant="smiley" [value]="3" [count]="5" />
+          <modus-rating variant="smiley" [value]="5" [count]="5" />
+        </div>
+      </demo-example>
+
+      <demo-example title="Rating Sizes" description="Ratings in different sizes.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">Small</p>
+            <modus-rating variant="star" [value]="3" [count]="5" size="sm" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">Medium (Default)</p>
+            <modus-rating variant="star" [value]="3" [count]="5" size="md" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">Large</p>
+            <modus-rating variant="star" [value]="3" [count]="5" size="lg" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Custom Rating Count" description="Ratings with custom number of items.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">3 Stars</p>
+            <modus-rating variant="star" [value]="2" [count]="3" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">10 Stars</p>
+            <modus-rating variant="star" [value]="7" [count]="10" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Disabled Rating" description="Read-only rating display.">
+        <div class="flex flex-col gap-6">
+          <modus-rating variant="star" [value]="4" [count]="5" [disabled]="true" />
+          <p class="text-sm text-muted-foreground">
+            Disabled ratings are useful for displaying read-only ratings.
+          </p>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class RatingDemoPageComponent {}

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

@@ -0,0 +1,107 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusSelectComponent } from '../../components/modus-select.component';
+import type { ISelectOption } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Demo page showcasing the Modus Select component.
+ *
+ * Demonstrates select features including:
+ * - Basic select
+ * - Sizes
+ * - Required fields
+ * - With labels
+ * - Interactive examples
+ */
+@Component({
+  selector: 'app-select-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusSelectComponent],
+  template: `
+    <demo-page
+      title="Modus Select"
+      description="Select components provide a dropdown menu for choosing from a list of options. Use selects when you have multiple options and want to save space compared to radio buttons."
+    >
+      <demo-example title="Basic Select" description="Simple select dropdown with options.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-select
+              inputId="country-select"
+              label="Choose a country"
+              [options]="countryOptions"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-select
+              inputId="language-select"
+              label="Select Language"
+              [options]="languageOptions"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Select Sizes" description="Select dropdowns in different sizes.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-select inputId="small-select" label="Small" [options]="sizeOptions" size="sm" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-select
+              inputId="medium-select"
+              label="Medium"
+              [options]="sizeOptions"
+              size="md"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-select inputId="large-select" label="Large" [options]="sizeOptions" size="lg" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Disabled Select" description="Select dropdowns in disabled state.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-select
+              inputId="disabled-select"
+              label="Disabled"
+              [options]="countryOptions"
+              [disabled]="true"
+            />
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class SelectDemoPageComponent {
+  readonly countryOptions: ISelectOption[] = [
+    { label: 'United States', value: 'us' },
+    { label: 'Canada', value: 'ca' },
+    { label: 'Mexico', value: 'mx' },
+    { label: 'United Kingdom', value: 'uk' },
+    { label: 'Germany', value: 'de' },
+    { label: 'France', value: 'fr' },
+    { label: 'Japan', value: 'jp' },
+  ];
+
+  readonly languageOptions: ISelectOption[] = [
+    { label: 'English', value: 'en' },
+    { label: 'Spanish', value: 'es' },
+    { label: 'French', value: 'fr' },
+    { label: 'German', value: 'de' },
+    { label: 'Japanese', value: 'ja' },
+  ];
+
+  readonly sizeOptions: ISelectOption[] = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ];
+}

package/templates/angular/src/app/demos/shared/demo-example-clean.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Renders a clean, unstyled container for a demo example.
+ *
+ * Similar to DemoExampleComponent but with a cleaner background style
+ * using dashed borders instead of solid card background.
+ * Used primarily on the landing page for feature cards.
+ *
+ * @example
+ * ```html
+ * <demo-example-clean title="Modern Stack" description="Built with Angular 20">
+ *   <div>Feature content here</div>
+ * </demo-example-clean>
+ * ```
+ */
+@Component({
+  selector: 'demo-example-clean',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex flex-col gap-4 rounded-lg bg-background p-6 border-dashed">
+      <div class="flex flex-col gap-1">
+        <div class="text-lg font-medium text-foreground">{{ title() }}</div>
+        <div class="text-sm text-foreground opacity-80">{{ description() }}</div>
+      </div>
+      <div class="flex flex-col gap-4">
+        <ng-content />
+      </div>
+    </div>
+  `,
+})
+export class DemoExampleCleanComponent {
+  /** The title of the demo example */
+  readonly title = input.required<string>();
+
+  /** A description of the demo example */
+  readonly description = input<string>('');
+}

package/templates/angular/src/app/demos/shared/demo-example.component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Renders a styled container for a demo example.
+ *
+ * Provides a card-based container with:
+ * - Title and description
+ * - Content projection for example content
+ * - Consistent styling using design system colors
+ *
+ * @example
+ * ```html
+ * <demo-example title="Button Variants" description="Different button styles">
+ *   <modus-button>Primary</modus-button>
+ * </demo-example>
+ * ```
+ */
+@Component({
+  selector: 'demo-example',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex flex-col gap-4 rounded-lg p-6 bg-background border-default">
+      <div class="flex flex-col gap-1">
+        <div class="text-lg font-medium text-foreground">{{ title() }}</div>
+        <div class="text-sm text-foreground-80">{{ description() }}</div>
+      </div>
+      <div class="flex flex-col gap-4">
+        <ng-content />
+      </div>
+    </div>
+  `,
+})
+export class DemoExampleComponent {
+  /** The title of the demo example */
+  readonly title = input.required<string>();
+
+  /** A description of the demo example */
+  readonly description = input<string>('');
+}

package/templates/angular/src/app/demos/shared/demo-page.component.ts

@@ -0,0 +1,97 @@
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Renders a standard layout for a demo page.
+ *
+ * Provides a consistent page structure with:
+ * - Optional back button navigation
+ * - Page title and description
+ * - Content projection for demo examples
+ *
+ * @example
+ * ```html
+ * <demo-page title="Button Demo" description="Demonstrates button component features">
+ *   <demo-example title="Variants">...</demo-example>
+ * </demo-page>
+ * ```
+ */
+@Component({
+  selector: 'demo-page',
+  standalone: true,
+  imports: [CommonModule, ModusButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="max-w-6xl mx-auto p-8 bg-background">
+      @if (showBackButton()) {
+        <div class="flex items-center gap-4 mb-6">
+          <modus-button
+            variant="filled"
+            color="tertiary"
+            size="md"
+            icon="arrow_left"
+            iconPosition="left"
+            (buttonClick)="handleBackClick()"
+          >
+            Component List
+          </modus-button>
+        </div>
+      }
+      <div class="text-center mb-12">
+        <div class="text-4xl font-semibold mb-4 text-foreground">{{ title() }}</div>
+        <div class="text-lg leading-relaxed text-foreground text-center">{{ description() }}</div>
+      </div>
+      <div class="flex flex-col gap-6">
+        <ng-content />
+      </div>
+
+      <!-- Footer -->
+      <div class="text-center pt-8 box-content">
+        <div class="flex items-center justify-center gap-3 mb-3">
+          <img
+            src="/angular-icon.svg"
+            alt="Angular"
+            class="h-6 w-6"
+            aria-hidden="true"
+          />
+          <div class="text-foreground-40">+</div>
+          <img
+            src="/vite.svg"
+            alt="Vite"
+            class="h-6 w-6"
+            aria-hidden="true"
+          />
+        </div>
+        <div class="text-sm font-mono text-foreground-40">
+          2026 Modus Angular App v1.0.0 + Angular 20 + Vite + Tailwind CSS -
+          Created by Julian Oczkowski
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class DemoPageComponent {
+  private router = inject(Router);
+
+  /** The title of the demo page */
+  readonly title = input.required<string>();
+
+  /** A description of the demo page */
+  readonly description = input.required<string>();
+
+  /** Whether to show the back button (default: true) */
+  readonly showBackButton = input<boolean>(true);
+
+  /** Optional URL to navigate to when back button is clicked (defaults to /dev/components) */
+  readonly backUrl = input<string>('/dev/components');
+
+  /**
+   * Handles the click event for the "Component List" button, navigating to the components gallery.
+   * Always navigates to /dev/components instead of using browser history.
+   */
+  handleBackClick(): void {
+    this.router.navigate(['/dev/components']);
+  }
+}

package/templates/angular/src/app/demos/shared/index.ts

@@ -0,0 +1,3 @@
+export { DemoPageComponent } from './demo-page.component';
+export { DemoExampleComponent } from './demo-example.component';
+export { DemoExampleCleanComponent } from './demo-example-clean.component';