@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,212 @@
+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 { ModusAccordionComponent } from '../../components/modus-accordion.component';
+import { ModusCollapseComponent, type ICollapseOptions } from '../../components/modus-collapse.component';
+
+/**
+ * Demo page showcasing the Modus Accordion component.
+ *
+ * Demonstrates accordion features including:
+ * - Basic accordion with multiple panels
+ * - Bordered vs non-bordered variants
+ * - Different sizes (xs, sm, md, lg)
+ * - Icons and descriptions in headers
+ * - Expanded/collapsed states
+ * - Event handling examples
+ */
+@Component({
+  selector: 'app-accordion-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusAccordionComponent,
+    ModusCollapseComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Accordion"
+      description="Accordions organize and display collapsible content in a compact space. Use accordions to group related information and allow users to expand or collapse sections as needed."
+    >
+      <demo-example
+        title="Basic Accordion"
+        description="Simple accordion with multiple collapsible panels."
+      >
+        <modus-accordion>
+          <modus-collapse
+            [options]="{
+              title: 'Getting Started',
+              description: 'Learn the basics'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              This is the content for the getting started section. You can include any content here.
+            </div>
+          </modus-collapse>
+          <modus-collapse
+            [options]="{
+              title: 'Components',
+              description: 'Explore available components'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              Discover all the available components in the Modus design system.
+            </div>
+          </modus-collapse>
+          <modus-collapse
+            [options]="{
+              title: 'Styling',
+              description: 'Customize your design'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              Learn how to style and customize components to match your brand.
+            </div>
+          </modus-collapse>
+        </modus-accordion>
+      </demo-example>
+
+      <demo-example
+        title="Accordion Sizes"
+        description="Different sizes for various contexts and spacing needs."
+      >
+        <div class="flex flex-col gap-6">
+          <div>
+            <h4 class="text-base font-semibold mb-3 text-foreground">Extra Small (xs)</h4>
+            <modus-accordion>
+              <modus-collapse
+                [options]="{
+                  title: 'Extra Small Panel',
+                  description: 'Compact size for tight spaces',
+                  size: 'xs'
+                }"
+              >
+                <div slot="content" class="p-4 text-foreground">Extra small accordion content.</div>
+              </modus-collapse>
+            </modus-accordion>
+          </div>
+          <div>
+            <h4 class="text-base font-semibold mb-3 text-foreground">Small (sm)</h4>
+            <modus-accordion>
+              <modus-collapse
+                [options]="{
+                  title: 'Small Panel',
+                  description: 'Standard small size',
+                  size: 'sm'
+                }"
+              >
+                <div slot="content" class="p-4 text-foreground">Small accordion content.</div>
+              </modus-collapse>
+            </modus-accordion>
+          </div>
+          <div>
+            <h4 class="text-base font-semibold mb-3 text-foreground">Medium (md)</h4>
+            <modus-accordion>
+              <modus-collapse
+                [options]="{
+                  title: 'Medium Panel',
+                  description: 'Default medium size',
+                  size: 'md'
+                }"
+              >
+                <div slot="content" class="p-4 text-foreground">Medium accordion content.</div>
+              </modus-collapse>
+            </modus-accordion>
+          </div>
+          <div>
+            <h4 class="text-base font-semibold mb-3 text-foreground">Large (lg)</h4>
+            <modus-accordion>
+              <modus-collapse
+                [options]="{
+                  title: 'Large Panel',
+                  description: 'Prominent large size',
+                  size: 'lg'
+                }"
+              >
+                <div slot="content" class="p-4 text-foreground">Large accordion content.</div>
+              </modus-collapse>
+            </modus-accordion>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Icons in Headers"
+        description="Enhance accordion headers with icons for better visual communication."
+      >
+        <modus-accordion>
+          <modus-collapse
+            [options]="{
+              title: 'Settings',
+              description: 'Configure your preferences',
+              icon: 'settings',
+              iconAriaLabel: 'Settings icon'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              Settings panel with icon in the header.
+            </div>
+          </modus-collapse>
+          <modus-collapse
+            [options]="{
+              title: 'Notifications',
+              description: 'Manage your notifications',
+              icon: 'notifications',
+              iconAriaLabel: 'Notifications icon'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              Notifications panel with icon in the header.
+            </div>
+          </modus-collapse>
+          <modus-collapse
+            [options]="{
+              title: 'Security',
+              description: 'Security and privacy settings',
+              icon: 'lock',
+              iconAriaLabel: 'Security icon'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              Security panel with icon in the header.
+            </div>
+          </modus-collapse>
+        </modus-accordion>
+      </demo-example>
+
+      <demo-example
+        title="Default Expanded State"
+        description="Start with specific panels expanded by default."
+      >
+        <modus-accordion>
+          <modus-collapse
+            [expanded]="true"
+            [options]="{
+              title: 'Expanded by Default',
+              description: 'This panel starts expanded'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              This panel is expanded by default when the page loads.
+            </div>
+          </modus-collapse>
+          <modus-collapse
+            [expanded]="false"
+            [options]="{
+              title: 'Collapsed by Default',
+              description: 'This panel starts collapsed'
+            }"
+          >
+            <div slot="content" class="p-4 text-foreground">
+              This panel is collapsed by default when the page loads.
+            </div>
+          </modus-collapse>
+        </modus-accordion>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class AccordionDemoPageComponent {}

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

@@ -0,0 +1,108 @@
+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 { ModusAlertComponent } from '../../components/modus-alert.component';
+
+/**
+ * Demo page showcasing the Modus Alert component.
+ *
+ * Demonstrates alert features including:
+ * - Alert variants (info, success, warning, error)
+ * - Dismissible vs persistent alerts
+ * - With and without custom icons
+ * - Different roles (alert, status, etc.)
+ * - Interactive examples with dismiss handling
+ */
+@Component({
+  selector: 'app-alert-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusAlertComponent],
+  template: `
+    <demo-page
+      title="Modus Alert"
+      description="Alerts communicate important messages to users. Use alerts to notify users about success, warnings, errors, or informational messages."
+    >
+      <demo-example
+        title="Alert Variants"
+        description="Different alert variants for various message types and contexts."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-alert
+            alertTitle="Info Alert"
+            alertDescription="This is an informational message."
+            variant="info"
+          />
+          <modus-alert
+            alertTitle="Success Alert"
+            alertDescription="Your action was completed successfully."
+            variant="success"
+          />
+          <modus-alert
+            alertTitle="Warning Alert"
+            alertDescription="Please review this important warning."
+            variant="warning"
+          />
+          <modus-alert
+            alertTitle="Error Alert"
+            alertDescription="An error occurred. Please try again."
+            variant="error"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Dismissible Alerts"
+        description="Alerts that can be dismissed by users with a close button."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-alert
+            alertTitle="Dismissible Info Alert"
+            alertDescription="You can close this alert."
+            variant="info"
+            [dismissible]="true"
+          />
+          <modus-alert
+            alertTitle="Dismissible Success Alert"
+            alertDescription="This alert can be dismissed."
+            variant="success"
+            [dismissible]="true"
+          />
+          <modus-alert
+            alertTitle="Dismissible Warning Alert"
+            alertDescription="Close this alert when you're done."
+            variant="warning"
+            [dismissible]="true"
+          />
+          <modus-alert
+            alertTitle="Dismissible Error Alert"
+            alertDescription="Dismiss this error alert after reviewing."
+            variant="error"
+            [dismissible]="true"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Alerts with Custom Icons"
+        description="Enhance alerts with custom icons for better visual communication."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-alert
+            alertTitle="Notification"
+            alertDescription="You have new messages."
+            variant="info"
+            icon="notifications"
+          />
+          <modus-alert
+            alertTitle="File Uploaded"
+            alertDescription="Your file has been uploaded successfully."
+            variant="success"
+            icon="upload"
+          />
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class AlertDemoPageComponent {}

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

@@ -0,0 +1,174 @@
+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 { ModusAutocompleteComponent } from '../../components/modus-autocomplete.component';
+import type { IAutocompleteItem } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Demo page showcasing the Modus Autocomplete component.
+ *
+ * Demonstrates autocomplete features including:
+ * - Basic single-select autocomplete
+ * - Multi-select with chips
+ * - Different sizes and states
+ * - Custom no-results content
+ * - Loading states with spinner
+ * - Debounce and minimum character examples
+ */
+@Component({
+  selector: 'app-autocomplete-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusAutocompleteComponent],
+  template: `
+    <demo-page
+      title="Modus Autocomplete"
+      description="Autocomplete provides input suggestions as users type. Use autocomplete to help users find and select from a list of options quickly and efficiently."
+    >
+      <demo-example
+        title="Basic Autocomplete"
+        description="Simple single-select autocomplete with a list of options."
+      >
+        <modus-autocomplete
+          label="Search Countries"
+          placeholder="Type to search..."
+          [items]="countryItems()"
+          [value]="selectedCountry()"
+          (itemSelect)="handleCountrySelect($event)"
+        />
+      </demo-example>
+
+      <demo-example
+        title="Multi-Select Autocomplete"
+        description="Allow users to select multiple items with chips displayed for selected values."
+      >
+        <modus-autocomplete
+          label="Select Skills"
+          placeholder="Type to search skills..."
+          [items]="skillItems()"
+          [multiSelect]="true"
+          (itemSelect)="handleSkillSelect($event)"
+        />
+        @if (selectedSkills().length > 0) {
+          <div class="mt-4 p-4 rounded-lg bg-muted text-muted-foreground">
+            <div class="font-semibold mb-2">Selected Skills:</div>
+            <div class="text-sm">{{ selectedSkills().join(', ') }}</div>
+          </div>
+        }
+      </demo-example>
+
+      <demo-example
+        title="Autocomplete Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-autocomplete
+            label="Small Autocomplete"
+            placeholder="Small size..."
+            [items]="sizeItems()"
+            size="sm"
+          />
+          <modus-autocomplete
+            label="Medium Autocomplete"
+            placeholder="Medium size..."
+            [items]="sizeItems()"
+            size="md"
+          />
+          <modus-autocomplete
+            label="Large Autocomplete"
+            placeholder="Large size..."
+            [items]="sizeItems()"
+            size="lg"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Disabled and Read-Only States"
+        description="Autocomplete in disabled and read-only states."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-autocomplete
+            label="Disabled Autocomplete"
+            placeholder="This is disabled"
+            [items]="stateItems()"
+            [disabled]="true"
+          />
+          <modus-autocomplete
+            label="Read-Only Autocomplete"
+            placeholder="This is read-only"
+            [items]="stateItems()"
+            value="Read-only value"
+            [readOnly]="true"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Loading State"
+        description="Show a spinner while fetching or processing autocomplete results."
+      >
+        <modus-autocomplete
+          label="Search with Loading"
+          placeholder="Type to search..."
+          [items]="loadingItems()"
+        />
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class AutocompleteDemoPageComponent {
+  readonly selectedCountry = signal<string>('');
+  readonly selectedSkills = signal<string[]>([]);
+
+  readonly countryItems = signal<IAutocompleteItem[]>([
+    { label: 'United States', value: 'us', visibleInMenu: true },
+    { label: 'Canada', value: 'ca', visibleInMenu: true },
+    { label: 'United Kingdom', value: 'uk', visibleInMenu: true },
+    { label: 'Australia', value: 'au', visibleInMenu: true },
+    { label: 'Germany', value: 'de', visibleInMenu: true },
+    { label: 'France', value: 'fr', visibleInMenu: true },
+    { label: 'Japan', value: 'jp', visibleInMenu: true },
+  ]);
+
+  readonly skillItems = signal<IAutocompleteItem[]>([
+    { label: 'Angular', value: 'angular', visibleInMenu: true },
+    { label: 'React', value: 'react', visibleInMenu: true },
+    { label: 'Vue.js', value: 'vue', visibleInMenu: true },
+    { label: 'TypeScript', value: 'typescript', visibleInMenu: true },
+    { label: 'JavaScript', value: 'javascript', visibleInMenu: true },
+    { label: 'Node.js', value: 'nodejs', visibleInMenu: true },
+    { label: 'Python', value: 'python', visibleInMenu: true },
+  ]);
+
+  readonly sizeItems = signal<IAutocompleteItem[]>([
+    { label: 'Option 1', value: '1', visibleInMenu: true },
+    { label: 'Option 2', value: '2', visibleInMenu: true },
+    { label: 'Option 3', value: '3', visibleInMenu: true },
+  ]);
+
+  readonly stateItems = signal<IAutocompleteItem[]>([
+    { label: 'Option A', value: 'a', visibleInMenu: true },
+    { label: 'Option B', value: 'b', visibleInMenu: true },
+  ]);
+
+  readonly loadingItems = signal<IAutocompleteItem[]>([
+    { label: 'Result 1', value: '1', visibleInMenu: true },
+    { label: 'Result 2', value: '2', visibleInMenu: true },
+  ]);
+
+  handleCountrySelect(item: IAutocompleteItem): void {
+    this.selectedCountry.set(item.value);
+    console.log('Selected country:', item);
+  }
+
+  handleSkillSelect(item: IAutocompleteItem): void {
+    const current = this.selectedSkills();
+    if (current.includes(item.value)) {
+      this.selectedSkills.set(current.filter((v) => v !== item.value));
+    } else {
+      this.selectedSkills.set([...current, item.value]);
+    }
+    console.log('Selected skills:', this.selectedSkills());
+  }
+}

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

@@ -0,0 +1,149 @@
+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 { ModusAvatarComponent } from '../../components/modus-avatar.component';
+
+/**
+ * Demo page showcasing the Modus Avatar component.
+ *
+ * Demonstrates avatar features including:
+ * - Different sizes (xs, sm, md, lg)
+ * - Shapes (circle, square)
+ * - With and without image sources
+ * - Fallback behavior demonstration
+ * - Custom styling examples
+ */
+@Component({
+  selector: 'app-avatar-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusAvatarComponent],
+  template: `
+    <demo-page
+      title="Modus Avatar"
+      description="Avatars represent users or entities in the interface. Use avatars to personalize user experiences and provide visual identity."
+    >
+      <demo-example
+        title="Avatar Sizes"
+        description="Different sizes for various contexts and display needs."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="Extra Small Avatar" size="xs" initials="X S" />
+            <span class="text-xs text-muted-foreground">Extra Small (xs)</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="Small Avatar" size="sm" initials="SM" />
+            <span class="text-xs text-muted-foreground">Small (sm)</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="Medium Avatar" size="md" initials="MD" />
+            <span class="text-xs text-muted-foreground">Medium (md)</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="Large Avatar" size="lg" initials="LG" />
+            <span class="text-xs text-muted-foreground">Large (lg)</span>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Avatar Shapes"
+        description="Circle and square shapes for different design styles."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="Circle Avatar" shape="circle" initials="C" size="md" />
+            <span class="text-xs text-muted-foreground">Circle</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="Square Avatar" shape="square" initials="S" size="md" />
+            <span class="text-xs text-muted-foreground">Square</span>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Avatars with Images"
+        description="Avatars displaying user profile images."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <modus-avatar
+            alt="User Avatar"
+            imgSrc="https://i.pravatar.cc/150?img=1"
+            size="md"
+            shape="circle"
+          />
+          <modus-avatar
+            alt="User Avatar"
+            imgSrc="https://i.pravatar.cc/150?img=2"
+            size="md"
+            shape="circle"
+          />
+          <modus-avatar
+            alt="User Avatar"
+            imgSrc="https://i.pravatar.cc/150?img=3"
+            size="md"
+            shape="circle"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Avatars with Initials"
+        description="Avatars displaying user initials when no image is available."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <modus-avatar alt="John Doe" initials="J D" size="md" shape="circle" />
+          <modus-avatar alt="Jane Smith" initials="J S" size="md" shape="circle" />
+          <modus-avatar alt="Bob Johnson" initials="B J" size="md" shape="circle" />
+          <modus-avatar alt="Alice Brown" initials="A B" size="md" shape="circle" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Fallback Behavior"
+        description="Avatars automatically fall back to initials when image fails to load."
+      >
+        <div class="flex flex-wrap items-center gap-6">
+          <modus-avatar
+            alt="User Avatar"
+            imgSrc="https://invalid-url.com/image.jpg"
+            initials="F B"
+            size="md"
+            shape="circle"
+          />
+          <div class="text-sm text-muted-foreground">
+            <div class="font-semibold mb-1">Fallback to Initials</div>
+            <div>When an image fails to load, the avatar automatically displays initials.</div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Size Comparison"
+        description="Visual comparison of all avatar sizes side by side."
+      >
+        <div class="flex flex-wrap items-end gap-8">
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="XS Avatar" size="xs" initials="XS" shape="circle" />
+            <span class="text-xs text-muted-foreground">xs</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="SM Avatar" size="sm" initials="SM" shape="circle" />
+            <span class="text-xs text-muted-foreground">sm</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="MD Avatar" size="md" initials="MD" shape="circle" />
+            <span class="text-xs text-muted-foreground">md</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-avatar alt="LG Avatar" size="lg" initials="LG" shape="circle" />
+            <span class="text-xs text-muted-foreground">lg</span>
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class AvatarDemoPageComponent {}