@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,318 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusTabsComponent } from '../../components/modus-tabs.component';
+import type { ITab } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Demo page showcasing the Modus Tabs component.
+ *
+ * Demonstrates all tabs features including:
+ * - Basic bordered tabs for dashboards
+ * - Compact boxed tabs for cards and sidebars
+ * - Icon-only tabs for compact navigation
+ * - Icon + Label combinations
+ * - Label-only tabs
+ * - Disabled tabs
+ * - Interactive tab switching with state tracking
+ */
+@Component({
+  selector: 'app-tabs-demo-page',
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusTabsComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <demo-page
+      title="Modus Tabs"
+      description="Tabs organize content into logical sections without leaving the page. Keep labels short and related."
+    >
+      <!-- Project Tabs (Bordered) -->
+      <demo-example
+        title="Project tabs"
+        description="Bordered tabs pair well with dashboards and keep the content anchored."
+      >
+        <modus-tabs
+          [tabs]="projectTabs"
+          [activeTabIndex]="projectActiveTab()"
+          tabStyle="bordered"
+          size="md"
+          (tabChange)="handleProjectTabChange($event)"
+        >
+          <div slot="tab-0" class="text-sm text-foreground-80 py-2">
+            Review highlights, key metrics, and quick actions for the current project.
+          </div>
+          <div slot="tab-1" class="text-sm text-foreground-80 py-2">
+            Explore recent updates in chronological order to stay informed.
+          </div>
+          <div slot="tab-2" class="text-sm text-foreground-80 py-2">
+            Access shared documents and media assets that support this initiative.
+          </div>
+        </modus-tabs>
+      </demo-example>
+
+      <!-- Compact Tabs (Boxed) -->
+      <demo-example
+        title="Compact tabs"
+        description="Use the small size when tabs sit inside cards or sidebars."
+      >
+        <modus-tabs
+          [tabs]="compactTabs"
+          [activeTabIndex]="compactActiveTab()"
+          tabStyle="boxed"
+          size="sm"
+          (tabChange)="handleCompactTabChange($event)"
+        >
+          <div slot="tab-0" class="text-sm text-foreground-80 py-2">
+            Outline the work and align on timelines.
+          </div>
+          <div slot="tab-1" class="text-sm text-foreground-80 py-2">
+            Track progress as each milestone is completed.
+          </div>
+          <div slot="tab-2" class="text-sm text-foreground-80 py-2">
+            Capture lessons learned and share with the team.
+          </div>
+        </modus-tabs>
+      </demo-example>
+
+      <!-- Icon-only Tabs -->
+      <demo-example
+        title="Icon-only tabs"
+        description="Use icons without labels for compact navigation. Include aria-label for accessibility."
+      >
+        <modus-tabs
+          [tabs]="iconOnlyTabs"
+          [activeTabIndex]="iconOnlyActiveTab()"
+          tabStyle="bordered"
+          size="sm"
+          (tabChange)="handleIconOnlyTabChange($event)"
+        >
+          <div slot="tab-0" class="text-sm text-foreground-80 py-2">
+            Overview of your key metrics and recent activity.
+          </div>
+          <div slot="tab-1" class="text-sm text-foreground-80 py-2">
+            Detailed charts and performance insights.
+          </div>
+          <div slot="tab-2" class="text-sm text-foreground-80 py-2">
+            Geographic data and location-based information.
+          </div>
+          <div slot="tab-3" class="text-sm text-foreground-80 py-2">
+            View your latest notifications and alerts.
+          </div>
+        </modus-tabs>
+      </demo-example>
+
+      <!-- Icon + Label Tabs -->
+      <demo-example
+        title="Icon + Label tabs"
+        description="Combine icons with labels for clear navigation. Icons can be positioned left or right."
+      >
+        <modus-tabs
+          [tabs]="iconLabelTabs"
+          [activeTabIndex]="iconLabelActiveTab()"
+          tabStyle="bordered"
+          size="md"
+          (tabChange)="handleIconLabelTabChange($event)"
+        >
+          <div slot="tab-0" class="text-sm text-foreground-80 py-2">
+            Overview of your key metrics and recent activity.
+          </div>
+          <div slot="tab-1" class="text-sm text-foreground-80 py-2">
+            Detailed charts and performance insights.
+          </div>
+          <div slot="tab-2" class="text-sm text-foreground-80 py-2">
+            Configure your application settings and preferences.
+          </div>
+          <div slot="tab-3" class="text-sm text-foreground-80 py-2">
+            Find answers to common questions and get support.
+          </div>
+        </modus-tabs>
+      </demo-example>
+
+      <!-- Label-only Tabs -->
+      <demo-example
+        title="Label-only tabs"
+        description="Text-only tabs work well for simple navigation without visual clutter."
+      >
+        <modus-tabs
+          [tabs]="labelOnlyTabs"
+          [activeTabIndex]="labelOnlyActiveTab()"
+          tabStyle="boxed"
+          size="lg"
+          (tabChange)="handleLabelOnlyTabChange($event)"
+        >
+          <div slot="tab-0" class="text-sm text-foreground-80 py-2">
+            High-level summary of the current project status.
+          </div>
+          <div slot="tab-1" class="text-sm text-foreground-80 py-2">
+            Comprehensive information about all project aspects.
+          </div>
+          <div slot="tab-2" class="text-sm text-foreground-80 py-2">
+            Complete timeline of changes and updates.
+          </div>
+          <div slot="tab-3" class="text-sm text-foreground-80 py-2">
+            Configuration options and preferences.
+          </div>
+        </modus-tabs>
+      </demo-example>
+
+      <!-- Disabled Tabs -->
+      <demo-example
+        title="Disabled tabs"
+        description="Disable tabs that are not currently available or relevant."
+      >
+        <modus-tabs
+          [tabs]="disabledTabs"
+          [activeTabIndex]="disabledActiveTab()"
+          tabStyle="bordered"
+          size="md"
+          (tabChange)="handleDisabledTabChange($event)"
+        >
+          <div slot="tab-0" class="text-sm text-foreground-80 py-2">
+            This tab is currently active and functional.
+          </div>
+          <div slot="tab-1" class="text-sm text-foreground-80 py-2">
+            This content is not accessible due to disabled tab.
+          </div>
+          <div slot="tab-2" class="text-sm text-foreground-80 py-2">
+            Another active tab with different content.
+          </div>
+          <div slot="tab-3" class="text-sm text-foreground-80 py-2">
+            This content is also not accessible.
+          </div>
+        </modus-tabs>
+      </demo-example>
+
+      <!-- Interactive Example -->
+      <demo-example
+        title="Interactive example"
+        description="Switch tabs to see the event handling and state tracking in action."
+      >
+        <modus-tabs
+          [tabs]="interactiveTabs"
+          [activeTabIndex]="interactiveActiveTab()"
+          tabStyle="bordered"
+          size="md"
+          (tabChange)="handleInteractiveTabChange($event)"
+        >
+          <div slot="tab-0" class="text-sm text-foreground-80 py-2">
+            <div class="flex flex-col gap-2">
+              <div class="font-medium">Home Content</div>
+              <div>Welcome to the home section. Navigate between tabs to explore.</div>
+            </div>
+          </div>
+          <div slot="tab-1" class="text-sm text-foreground-80 py-2">
+            <div class="flex flex-col gap-2">
+              <div class="font-medium">Profile Content</div>
+              <div>View and manage your profile settings here.</div>
+            </div>
+          </div>
+          <div slot="tab-2" class="text-sm text-foreground-80 py-2">
+            <div class="flex flex-col gap-2">
+              <div class="font-medium">Messages Content</div>
+              <div>Check your recent messages and notifications.</div>
+            </div>
+          </div>
+        </modus-tabs>
+
+        @if (tabChangeCount() > 0) {
+          <div class="mt-4 p-4 rounded-lg bg-muted text-muted-foreground">
+            <div class="font-semibold mb-2">Tab Change Event</div>
+            <div class="text-sm">Total tab switches: {{ tabChangeCount() }}</div>
+            @if (lastTabChange()) {
+              <div class="text-xs mt-1 text-muted-foreground">
+                Last change: Tab {{ lastTabChange()!.previousTab }} to Tab
+                {{ lastTabChange()!.newTab }}
+              </div>
+            }
+          </div>
+        }
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class TabsDemoPageComponent {
+  // Project tabs data
+  readonly projectTabs: ITab[] = [{ label: 'Summary' }, { label: 'Activity' }, { label: 'Files' }];
+  readonly projectActiveTab = signal(0);
+
+  // Compact tabs data
+  readonly compactTabs: ITab[] = [{ label: 'Plan' }, { label: 'Deliver' }, { label: 'Review' }];
+  readonly compactActiveTab = signal(0);
+
+  // Icon-only tabs data
+  readonly iconOnlyTabs: ITab[] = [
+    { icon: 'dashboard' },
+    { icon: 'bar_graph' },
+    { icon: 'map' },
+    { icon: 'notifications' },
+  ];
+  readonly iconOnlyActiveTab = signal(0);
+
+  // Icon + Label tabs data
+  readonly iconLabelTabs: ITab[] = [
+    { icon: 'dashboard', label: 'Dashboard', iconPosition: 'left' },
+    { icon: 'bar_graph', label: 'Analytics', iconPosition: 'left' },
+    { icon: 'settings', label: 'Settings', iconPosition: 'right' },
+    { icon: 'help', label: 'Help', iconPosition: 'right' },
+  ];
+  readonly iconLabelActiveTab = signal(0);
+
+  // Label-only tabs data
+  readonly labelOnlyTabs: ITab[] = [
+    { label: 'Overview' },
+    { label: 'Details' },
+    { label: 'History' },
+    { label: 'Settings' },
+  ];
+  readonly labelOnlyActiveTab = signal(0);
+
+  // Disabled tabs data
+  readonly disabledTabs: ITab[] = [
+    { label: 'Active Tab', icon: 'check' },
+    { label: 'Disabled Tab', icon: 'lock', disabled: true },
+    { label: 'Another Active', icon: 'star' },
+    { label: 'Also Disabled', disabled: true },
+  ];
+  readonly disabledActiveTab = signal(0);
+
+  // Interactive tabs data
+  readonly interactiveTabs: ITab[] = [
+    { label: 'Home', icon: 'house' },
+    { label: 'Profile', icon: 'user' },
+    { label: 'Messages', icon: 'email' },
+  ];
+  readonly interactiveActiveTab = signal(0);
+  readonly tabChangeCount = signal(0);
+  readonly lastTabChange = signal<{ previousTab: number; newTab: number } | null>(null);
+
+  // Tab change handlers
+  handleProjectTabChange(event: { previousTab: number; newTab: number }): void {
+    this.projectActiveTab.set(event.newTab);
+  }
+
+  handleCompactTabChange(event: { previousTab: number; newTab: number }): void {
+    this.compactActiveTab.set(event.newTab);
+  }
+
+  handleIconOnlyTabChange(event: { previousTab: number; newTab: number }): void {
+    this.iconOnlyActiveTab.set(event.newTab);
+  }
+
+  handleIconLabelTabChange(event: { previousTab: number; newTab: number }): void {
+    this.iconLabelActiveTab.set(event.newTab);
+  }
+
+  handleLabelOnlyTabChange(event: { previousTab: number; newTab: number }): void {
+    this.labelOnlyActiveTab.set(event.newTab);
+  }
+
+  handleDisabledTabChange(event: { previousTab: number; newTab: number }): void {
+    this.disabledActiveTab.set(event.newTab);
+  }
+
+  handleInteractiveTabChange(event: { previousTab: number; newTab: number }): void {
+    this.interactiveActiveTab.set(event.newTab);
+    this.tabChangeCount.update((count) => count + 1);
+    this.lastTabChange.set(event);
+  }
+}

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

@@ -0,0 +1,160 @@
+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 { ModusTextInputComponent } from '../../components/modus-text-input.component';
+
+/**
+ * Demo page showcasing the Modus Text Input component.
+ *
+ * Demonstrates text input features including:
+ * - Basic text input
+ * - Input types (email, password, etc.)
+ * - Sizes
+ * - With clear button
+ * - With search icon
+ * - Interactive examples
+ */
+@Component({
+  selector: 'app-text-input-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusTextInputComponent],
+  template: `
+    <demo-page
+      title="Modus Text Input"
+      description="Text input components provide a way for users to enter text data. Use text inputs for names, emails, passwords, and any other text-based form data."
+    >
+      <demo-example title="Input Types" description="Text inputs with different input types.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="text-type-input"
+              label="Text"
+              type="text"
+              placeholder="Enter text"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="email-type-input"
+              label="Email"
+              type="email"
+              placeholder="user@example.com"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="password-type-input"
+              label="Password"
+              type="password"
+              placeholder="Enter password"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="url-type-input"
+              label="URL"
+              type="url"
+              placeholder="https://example.com"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="tel-type-input"
+              label="Phone"
+              type="tel"
+              placeholder="+1 (555) 123-4567"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Text Input Sizes" description="Text inputs in different sizes.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="small-text-input"
+              label="Small"
+              placeholder="Enter text"
+              size="sm"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="medium-text-input"
+              label="Medium"
+              placeholder="Enter text"
+              size="md"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="large-text-input"
+              label="Large"
+              placeholder="Enter text"
+              size="lg"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Text Input with Icons"
+        description="Text inputs with clear button or search icon."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="clear-input"
+              label="With Clear"
+              placeholder="Type to search..."
+              [includeClear]="true"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="search-input"
+              label="Search"
+              placeholder="Search..."
+              [includeSearch]="true"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Required and Disabled States"
+        description="Text inputs in required and disabled states."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="required-input"
+              label="Required"
+              placeholder="This field is required"
+              [required]="true"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-text-input
+              inputId="disabled-input"
+              label="Disabled"
+              placeholder="Cannot edit"
+              [disabled]="true"
+              value="Disabled value"
+            />
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class TextInputDemoPageComponent {}

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

@@ -0,0 +1,95 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusTextareaComponent } from '../../components/modus-textarea.component';
+import type { IInputFeedbackProp } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Demo page showcasing the Modus Textarea component.
+ *
+ * Demonstrates textarea features including:
+ * - Customer feedback (default size)
+ * - Detailed notes (increased height with info feedback)
+ * - Feedback states (info, success, error)
+ */
+@Component({
+  selector: 'app-textarea-demo-page',
+  imports: [DemoPageComponent, DemoExampleComponent, ModusTextareaComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <demo-page
+      title="Modus Textarea"
+      description="Textareas support longer responses or feedback. Offer guidance on what to include and set an appropriate height."
+    >
+      <!-- Customer Feedback Example (from React) -->
+      <demo-example
+        title="Customer Feedback"
+        description="Use the default size for two to three sentence responses."
+      >
+        <modus-textarea
+          label="Share feedback"
+          placeholder="Tell us what worked well and what can improve."
+          [rows]="4"
+        />
+      </demo-example>
+
+      <!-- Detailed Notes Example (from React) -->
+      <demo-example
+        title="Detailed Notes"
+        description="Increase the height when expecting longer entries."
+      >
+        <modus-textarea label="Site visit notes" [rows]="6" [feedback]="siteVisitFeedback" />
+      </demo-example>
+
+      <!-- Feedback States -->
+      <demo-example
+        title="Feedback States"
+        description="Display validation feedback with info, success, and error states."
+      >
+        <div class="flex flex-col gap-6">
+          <modus-textarea
+            label="Info feedback"
+            placeholder="Enter details..."
+            [rows]="3"
+            [feedback]="infoFeedback"
+          />
+          <modus-textarea
+            label="Success feedback"
+            placeholder="Enter details..."
+            [rows]="3"
+            value="Valid input provided."
+            [feedback]="successFeedback"
+          />
+          <modus-textarea
+            label="Error feedback"
+            placeholder="Enter details..."
+            [rows]="3"
+            [feedback]="errorFeedback"
+          />
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class TextareaDemoPageComponent {
+  // Feedback configurations
+  readonly siteVisitFeedback: IInputFeedbackProp = {
+    level: 'info',
+    message: 'Include location details and follow-up actions.',
+  };
+
+  readonly infoFeedback: IInputFeedbackProp = {
+    level: 'info',
+    message: 'This is helpful information about the field.',
+  };
+
+  readonly successFeedback: IInputFeedbackProp = {
+    level: 'success',
+    message: 'Great! Your input looks good.',
+  };
+
+  readonly errorFeedback: IInputFeedbackProp = {
+    level: 'error',
+    message: 'This field is required. Please enter a value.',
+  };
+}

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

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusThemeSwitcherComponent } from '../../components/modus-theme-switcher.component';
+
+/**
+ * Demo page showcasing the Modus Theme Switcher component.
+ *
+ * Demonstrates theme switching functionality including:
+ * - Basic theme toggle between light and dark modes
+ * - System preference detection
+ * - Theme change event handling
+ */
+@Component({
+  selector: 'app-theme-switcher-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusThemeSwitcherComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <demo-page
+      title="Modus Theme Switcher"
+      description="The theme switcher toggles between Modus light and dark modes. Place it in the header or settings where users expect personalization controls."
+      [showBackButton]="false"
+    >
+      <demo-example
+        title="Theme toggle"
+        description="Use the default configuration to respect system preferences and allow quick switching."
+      >
+        <div class="flex items-center gap-4">
+          <modus-theme-switcher [ariaLabel]="'Switch theme'" />
+          <div class="text-sm text-foreground-80">Toggle between light and dark experiences.</div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ThemeSwitcherDemoPageComponent {}