@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,148 @@
+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 { ModusBadgeComponent } from '../../components/modus-badge.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+import { ModusAvatarComponent } from '../../components/modus-avatar.component';
+
+/**
+ * Demo page showcasing the Modus Badge component.
+ *
+ * Demonstrates badge features including:
+ * - Color variants (primary, secondary, tertiary, success, warning, danger, high-contrast)
+ * - Badge variants (filled, text, counter)
+ * - Different sizes (sm, md, lg)
+ * - Usage with other components (buttons, avatars)
+ */
+@Component({
+  selector: 'app-badge-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusBadgeComponent,
+    ModusButtonComponent,
+    ModusAvatarComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Badge"
+      description="Badges are small status indicators that display counts, labels, or states. Use badges to highlight important information or indicate status."
+    >
+      <demo-example
+        title="Badge Colors"
+        description="Different color variants for various semantic meanings."
+      >
+        <div class="flex flex-wrap items-center gap-4">
+          <modus-badge color="primary">Primary</modus-badge>
+          <modus-badge color="secondary">Secondary</modus-badge>
+          <modus-badge color="tertiary">Tertiary</modus-badge>
+          <modus-badge color="success">Success</modus-badge>
+          <modus-badge color="warning">Warning</modus-badge>
+          <modus-badge color="danger">Danger</modus-badge>
+          <modus-badge color="high-contrast">High Contrast</modus-badge>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Badge Variants"
+        description="Different visual styles for badges."
+      >
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-wrap items-center gap-4">
+            <modus-badge variant="filled" color="primary">Filled</modus-badge>
+            <modus-badge variant="outlined" color="primary">Outlined</modus-badge>
+            <modus-badge variant="text" color="primary">Text</modus-badge>
+            <modus-badge variant="counter" color="primary">Counter</modus-badge>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Badge Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div class="flex flex-wrap items-center gap-4">
+          <modus-badge size="sm" color="primary">Small</modus-badge>
+          <modus-badge size="md" color="primary">Medium</modus-badge>
+          <modus-badge size="lg" color="primary">Large</modus-badge>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Badges with Numbers"
+        description="Use badges to display counts and numeric values."
+      >
+        <div class="flex flex-wrap items-center gap-4">
+          <modus-badge color="primary">5</modus-badge>
+          <modus-badge color="success">12</modus-badge>
+          <modus-badge color="warning">99+</modus-badge>
+          <modus-badge color="danger">1,234</modus-badge>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Badges on Buttons"
+        description="Combine badges with buttons to show counts or status."
+      >
+        <div class="flex flex-wrap items-center gap-4">
+          <modus-button color="primary">
+            Notifications
+            <modus-badge color="danger" size="sm" variant="counter">3</modus-badge>
+          </modus-button>
+          <modus-button color="secondary">
+            Messages
+            <modus-badge color="primary" size="sm" variant="counter">12</modus-badge>
+          </modus-button>
+          <modus-button color="tertiary">
+            Updates
+            <modus-badge color="success" size="sm" variant="counter">5</modus-badge>
+          </modus-button>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Badges on Avatars"
+        description="Use badges to indicate status or notifications on avatars."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="relative">
+            <modus-avatar alt="User" initials="JD" size="md" shape="circle" />
+            <div class="absolute -top-1 -right-1">
+              <modus-badge color="success" size="sm" variant="counter">●</modus-badge>
+            </div>
+          </div>
+          <div class="relative">
+            <modus-avatar alt="User" initials="JS" size="md" shape="circle" />
+            <div class="absolute -top-1 -right-1">
+              <modus-badge color="danger" size="sm" variant="counter">3</modus-badge>
+            </div>
+          </div>
+          <div class="relative">
+            <modus-avatar alt="User" initials="BJ" size="md" shape="circle" />
+            <div class="absolute -top-1 -right-1">
+              <modus-badge color="warning" size="sm" variant="counter">!</modus-badge>
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Status Indicators"
+        description="Use badges as status indicators for different states."
+      >
+        <div class="flex flex-wrap items-center gap-4">
+          <modus-badge color="success" variant="filled">Active</modus-badge>
+          <modus-badge color="warning" variant="filled">Pending</modus-badge>
+          <modus-badge color="danger" variant="filled">Inactive</modus-badge>
+          <modus-badge color="primary" variant="filled">New</modus-badge>
+          <modus-badge color="secondary" variant="filled">Draft</modus-badge>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class BadgeDemoPageComponent {}
+

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

@@ -0,0 +1,96 @@
+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 { ModusBreadcrumbsComponent } from '../../components/modus-breadcrumbs.component';
+import type { IBreadcrumb } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Demo page showcasing the Modus Breadcrumbs component.
+ *
+ * Demonstrates breadcrumb features including:
+ * - Basic breadcrumb navigation
+ * - Different sizes (sm, md, lg)
+ * - Interactive navigation examples
+ * - Long path truncation examples
+ * - Accessibility features demonstration
+ */
+@Component({
+  selector: 'app-breadcrumbs-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusBreadcrumbsComponent],
+  template: `
+    <demo-page
+      title="Modus Breadcrumbs"
+      description="Breadcrumbs show the hierarchical path to the current page. Use breadcrumbs to help users understand their location and navigate back through the application structure."
+    >
+      <demo-example
+        title="Basic Breadcrumbs"
+        description="Simple breadcrumb navigation showing the current path."
+      >
+        <modus-breadcrumbs [items]="basicItems()" />
+      </demo-example>
+
+      <demo-example
+        title="Breadcrumb Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div class="flex flex-col gap-4">
+          <div>
+            <h4 class="text-base font-semibold mb-2 text-foreground">Small (sm)</h4>
+            <modus-breadcrumbs [items]="sizeItems()" size="sm" />
+          </div>
+          <div>
+            <h4 class="text-base font-semibold mb-2 text-foreground">Medium (md)</h4>
+            <modus-breadcrumbs [items]="sizeItems()" size="md" />
+          </div>
+          <div>
+            <h4 class="text-base font-semibold mb-2 text-foreground">Large (lg)</h4>
+            <modus-breadcrumbs [items]="sizeItems()" size="lg" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Deep Navigation Path"
+        description="Breadcrumbs showing a deep navigation hierarchy."
+      >
+        <modus-breadcrumbs [items]="deepPathItems()" />
+      </demo-example>
+
+      <demo-example
+        title="Breadcrumbs with Long Labels"
+        description="Breadcrumbs handle long labels gracefully with truncation."
+      >
+        <modus-breadcrumbs [items]="longLabelItems()" />
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class BreadcrumbsDemoPageComponent {
+  readonly basicItems = signal<IBreadcrumb[]>([
+    { label: 'Home', url: '/' },
+    { label: 'Components', url: '/components' },
+    { label: 'Breadcrumbs' },
+  ]);
+
+  readonly sizeItems = signal<IBreadcrumb[]>([
+    { label: 'Home', url: '/' },
+    { label: 'Library', url: '/library' },
+    { label: 'Data' },
+  ]);
+
+  readonly deepPathItems = signal<IBreadcrumb[]>([
+    { label: 'Home', url: '/' },
+    { label: 'Projects', url: '/projects' },
+    { label: 'Project Alpha', url: '/projects/alpha' },
+    { label: 'Settings', url: '/projects/alpha/settings' },
+    { label: 'Team' },
+  ]);
+
+  readonly longLabelItems = signal<IBreadcrumb[]>([
+    { label: 'Home', url: '/' },
+    { label: 'This is a very long breadcrumb label', url: '/long' },
+    { label: 'Another extremely long breadcrumb item name here' },
+  ]);
+}

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

@@ -0,0 +1,256 @@
+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 { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Demo page showcasing the Modus Button component.
+ *
+ * Demonstrates all button features including:
+ * - Variants (primary, secondary, tertiary, warning, danger)
+ * - Styles (filled, outlined, borderless)
+ * - Sizes (xs, sm, md, lg)
+ * - Icons (left, right, only positions)
+ * - Icon sizes and colored icons
+ */
+@Component({
+  selector: 'app-button-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusButtonComponent],
+  template: `
+    <demo-page
+      title="Modus Button"
+      description="Buttons trigger actions and provide clear call-to-action elements. Use primary buttons for the main action, secondary for supporting actions, and tertiary for subtle actions."
+    >
+      <demo-example
+        title="Button Variants"
+        description="Different button styles for various use cases and visual hierarchy."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-button color="primary">Primary</modus-button>
+          <modus-button color="secondary">Secondary</modus-button>
+          <modus-button color="tertiary">Tertiary</modus-button>
+          <modus-button color="warning">Warning</modus-button>
+          <modus-button color="danger">Danger</modus-button>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Button Styles"
+        description="Different visual styles to match your design needs."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-button variant="filled">Filled</modus-button>
+          <modus-button variant="outlined">Outlined</modus-button>
+          <modus-button variant="borderless">Borderless</modus-button>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Button Sizes"
+        description="Various sizes for different contexts and touch targets."
+      >
+        <div class="flex flex-wrap items-center gap-4">
+          <modus-button size="xs">Extra Small</modus-button>
+          <modus-button size="sm">Small</modus-button>
+          <modus-button size="md">Medium</modus-button>
+          <modus-button size="lg">Large</modus-button>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Buttons with Icons"
+        description="Enhance buttons with icons for better visual communication."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-button icon="save_disk" iconPosition="left">Save File</modus-button>
+          <modus-button icon="download" iconPosition="right">Download</modus-button>
+          <modus-button icon="settings" iconPosition="only" ariaLabel="Settings" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Button Icon Sizes"
+        description="Icon sizes automatically adapt to button size, or can be explicitly controlled."
+      >
+        <div class="space-y-6">
+          <!-- Automatic sizing based on button size -->
+          <div>
+            <h4 class="text-base font-semibold mb-3">Automatic Icon Sizing (by Button Size)</h4>
+            <div class="flex flex-wrap items-center gap-4">
+              <modus-button size="xs" icon="star" iconPosition="left">Extra Small</modus-button>
+              <modus-button size="sm" icon="star" iconPosition="left">Small</modus-button>
+              <modus-button size="md" icon="star" iconPosition="left">Medium</modus-button>
+              <modus-button size="lg" icon="star" iconPosition="left">Large</modus-button>
+            </div>
+          </div>
+
+          <!-- Icon-only buttons with automatic sizing -->
+          <div>
+            <h4 class="text-base font-semibold mb-3">Icon-Only Buttons (Automatic Sizing)</h4>
+            <div class="flex flex-wrap items-center gap-4">
+              <modus-button
+                size="xs"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (XS)"
+              />
+              <modus-button
+                size="sm"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (SM)"
+              />
+              <modus-button
+                size="md"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (MD)"
+              />
+              <modus-button
+                size="lg"
+                icon="settings"
+                iconPosition="only"
+                ariaLabel="Settings (LG)"
+              />
+            </div>
+          </div>
+
+          <!-- Custom icon sizes -->
+          <div>
+            <h4 class="text-base font-semibold mb-3">Custom Icon Sizes (Explicit Control)</h4>
+            <div class="flex flex-wrap items-center gap-4">
+              <modus-button icon="star" iconSize="text-xs" iconPosition="left"
+                >Tiny Icon</modus-button
+              >
+              <modus-button icon="star" iconSize="text-sm" iconPosition="left"
+                >Small Icon</modus-button
+              >
+              <modus-button icon="star" iconSize="text-lg" iconPosition="left"
+                >Large Icon</modus-button
+              >
+              <modus-button icon="star" iconSize="text-2xl" iconPosition="left"
+                >XL Icon</modus-button
+              >
+            </div>
+          </div>
+
+          <!-- Mixed sizes for comparison -->
+          <div>
+            <h4 class="text-base font-semibold mb-3">Size Comparison</h4>
+            <div class="flex flex-wrap items-center gap-4">
+              <modus-button size="lg" icon="download" iconSize="text-sm" iconPosition="left"
+                >Large Button, Small Icon</modus-button
+              >
+              <modus-button size="sm" icon="download" iconSize="text-xl" iconPosition="left"
+                >Small Button, Large Icon</modus-button
+              >
+              <modus-button
+                size="md"
+                icon="check_circle"
+                iconSize="text-3xl"
+                iconPosition="only"
+                ariaLabel="Success (Huge Icon)"
+              />
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Icon Sizes"
+        description="Different icon sizes using Modus font scale for various contexts."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <!-- Micro icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-2xs">star</i>
+            <span class="text-xs text-muted-foreground">2xs (8px)</span>
+          </div>
+
+          <!-- Small icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-xs">star</i>
+            <span class="text-xs text-muted-foreground">xs (10px)</span>
+          </div>
+
+          <!-- Secondary icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-sm">star</i>
+            <span class="text-xs text-muted-foreground">sm (12px)</span>
+          </div>
+
+          <!-- Base icons (Modus default) -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-base">star</i>
+            <span class="text-xs text-muted-foreground">base (14px)</span>
+          </div>
+
+          <!-- Standard icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-lg">star</i>
+            <span class="text-xs text-muted-foreground">lg (16px)</span>
+          </div>
+
+          <!-- Large icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-xl">star</i>
+            <span class="text-xs text-muted-foreground">xl (18px)</span>
+          </div>
+
+          <!-- Prominent icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-2xl">star</i>
+            <span class="text-xs text-muted-foreground">2xl (20px)</span>
+          </div>
+
+          <!-- Display icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-3xl">star</i>
+            <span class="text-xs text-muted-foreground">3xl (24px)</span>
+          </div>
+
+          <!-- Hero icons -->
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-4xl">star</i>
+            <span class="text-xs text-muted-foreground">4xl (30px)</span>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Colored Icons"
+        description="Icons with different semantic colors from the 9-color design system."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-2xl text-primary">info</i>
+            <span class="text-xs text-muted-foreground">Primary</span>
+          </div>
+
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-2xl text-success">check_circle</i>
+            <span class="text-xs text-muted-foreground">Success</span>
+          </div>
+
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-2xl text-warning">warning</i>
+            <span class="text-xs text-muted-foreground">Warning</span>
+          </div>
+
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-2xl text-destructive">alert</i>
+            <span class="text-xs text-muted-foreground">Error</span>
+          </div>
+
+          <div class="flex flex-col items-center gap-2">
+            <i class="modus-icons text-2xl text-muted-foreground">help</i>
+            <span class="text-xs text-muted-foreground">Muted</span>
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ButtonDemoPageComponent {}