@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,130 @@
+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 { ModusTimeInputComponent } from '../../components/modus-time-input.component';
+
+/**
+ * Demo page showcasing the Modus Time Input component.
+ *
+ * Demonstrates time input features including:
+ * - Basic time input
+ * - Sizes
+ * - With seconds
+ * - Min/max constraints
+ * - Interactive examples
+ */
+@Component({
+  selector: 'app-time-input-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusTimeInputComponent],
+  template: `
+    <demo-page
+      title="Modus Time Input"
+      description="Time input components allow users to enter or select a time value. Use time inputs for scheduling, appointments, or any scenario requiring time selection."
+    >
+      <demo-example title="Basic Time Input" description="Simple time input with label.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-time-input inputId="start-time-input" label="Start time" value="09:00" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-time-input inputId="end-time-input" label="End time" value="17:00" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Time Input Sizes" description="Time inputs in different sizes.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-time-input inputId="small-time-input" label="Small" value="09:00" size="sm" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-time-input inputId="medium-time-input" label="Medium" value="09:00" size="md" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-time-input inputId="large-time-input" label="Large" value="09:00" size="lg" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Time Input with Seconds" description="Time inputs displaying seconds.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-time-input
+              inputId="seconds-time-input"
+              label="Time with Seconds"
+              value="09:30:45"
+              [showSeconds]="true"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-time-input
+              inputId="seconds-default-time-input"
+              label="Default Format"
+              value="09:30"
+              [showSeconds]="false"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Time Input with Constraints"
+        description="Time inputs with min and max values."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-time-input
+              inputId="min-max-time-input"
+              label="Business Hours"
+              value="09:00"
+              min="09:00"
+              max="17:00"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-time-input
+              inputId="afternoon-time-input"
+              label="Afternoon Hours"
+              value="14:00"
+              min="12:00"
+              max="18:00"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Required and Disabled States"
+        description="Time inputs in required and disabled states."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-time-input
+              inputId="required-time-input"
+              label="Required"
+              value="09:00"
+              [required]="true"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-time-input
+              inputId="disabled-time-input"
+              label="Disabled"
+              value="09:00"
+              [disabled]="true"
+            />
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class TimeInputDemoPageComponent {}

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

@@ -0,0 +1,258 @@
+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 { ModusToastComponent, type ToastPosition } from '../../components/modus-toast.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+import { ModusAlertComponent } from '../../components/modus-alert.component';
+
+/**
+ * Toast variant types for styling.
+ */
+export type ToastVariant = 'success' | 'warning' | 'error' | 'info';
+
+/**
+ * Interface for a toast item in the toasts array.
+ */
+export interface ToastItem {
+  id: string;
+  title: string;
+  description: string;
+  variant: ToastVariant;
+  dismissible: boolean;
+  position: ToastPosition;
+  delay: number | null;
+}
+
+/**
+ * Demo page showcasing the Modus Toast component.
+ *
+ * Demonstrates toast features including:
+ * - Toast variants (success, warning, error, info)
+ * - Toast positions (9 positions grouped by vertical position)
+ * - Special features (clear all)
+ * - Interactive examples
+ */
+@Component({
+  selector: 'app-toast-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusToastComponent,
+    ModusButtonComponent,
+    ModusAlertComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Toast"
+      description="Toasts deliver lightweight confirmations or alerts without disrupting workflow. Keep the message brief and allow dismissal."
+    >
+      <demo-example
+        title="Interactive Toast Triggers"
+        description="Click the buttons below to trigger different toasts in various positions and variants."
+      >
+        <div class="space-y-6">
+          <!-- Toast Variants -->
+          <div>
+            <div class="text-lg font-semibold text-foreground mb-4">Toast Variants</div>
+            <div class="flex flex-wrap gap-3">
+              <modus-button
+                color="primary"
+                variant="filled"
+                (buttonClick)="
+                  addToast('success', 'top-end', 'Success!', 'Your action completed successfully.')
+                "
+              >
+                Success Toast
+              </modus-button>
+              <modus-button
+                color="warning"
+                variant="filled"
+                (buttonClick)="
+                  addToast('warning', 'top-end', 'Warning!', 'Please review your input.')
+                "
+              >
+                Warning Toast
+              </modus-button>
+              <modus-button
+                color="danger"
+                variant="filled"
+                (buttonClick)="addToast('error', 'top-end', 'Error!', 'Something went wrong.')"
+              >
+                Error Toast
+              </modus-button>
+              <modus-button
+                color="secondary"
+                variant="filled"
+                (buttonClick)="
+                  addToast('info', 'top-end', 'Info', 'Here\\'s some helpful information.')
+                "
+              >
+                Info Toast
+              </modus-button>
+            </div>
+          </div>
+
+          <!-- Toast Positions -->
+          <div>
+            <div class="text-lg font-semibold text-foreground mb-4">Toast Positions</div>
+            <div class="space-y-4">
+              <!-- Top Positions -->
+              <div class="bg-card border-default rounded-lg p-4">
+                <div class="text-sm font-medium text-muted-foreground mb-3">Top</div>
+                <div class="flex flex-wrap gap-3">
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="
+                      addToast('info', 'top-start', 'Top Start', 'Toast in top-left corner')
+                    "
+                  >
+                    Top Start
+                  </modus-button>
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="addToast('info', 'top-center', 'Top Center', 'Toast in top-center')"
+                  >
+                    Top Center
+                  </modus-button>
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="addToast('info', 'top-end', 'Top End', 'Toast in top-right corner')"
+                  >
+                    Top End
+                  </modus-button>
+                </div>
+              </div>
+
+              <!-- Middle Positions -->
+              <div class="bg-card border-default rounded-lg p-4">
+                <div class="text-sm font-medium text-muted-foreground mb-3">Middle</div>
+                <div class="flex flex-wrap gap-3">
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="
+                      addToast('success', 'middle-start', 'Middle Start', 'Toast in middle-left')
+                    "
+                  >
+                    Middle Start
+                  </modus-button>
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="
+                      addToast('success', 'middle-center', 'Middle Center', 'Toast in center')
+                    "
+                  >
+                    Middle Center
+                  </modus-button>
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="
+                      addToast('success', 'middle-end', 'Middle End', 'Toast in middle-right')
+                    "
+                  >
+                    Middle End
+                  </modus-button>
+                </div>
+              </div>
+
+              <!-- Bottom Positions -->
+              <div class="bg-card border-default rounded-lg p-4">
+                <div class="text-sm font-medium text-muted-foreground mb-3">Bottom</div>
+                <div class="flex flex-wrap gap-3">
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="
+                      addToast('warning', 'bottom-start', 'Bottom Start', 'Toast in bottom-left')
+                    "
+                  >
+                    Bottom Start
+                  </modus-button>
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="
+                      addToast('warning', 'bottom-center', 'Bottom Center', 'Toast in bottom-center')
+                    "
+                  >
+                    Bottom Center
+                  </modus-button>
+                  <modus-button
+                    color="secondary"
+                    variant="outlined"
+                    (buttonClick)="
+                      addToast('warning', 'bottom-end', 'Bottom End', 'Toast in bottom-right')
+                    "
+                  >
+                    Bottom End
+                  </modus-button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Special Features -->
+          <div>
+            <div class="text-lg font-semibold text-foreground mb-4">Special Features</div>
+            <div class="flex flex-wrap gap-3">
+              <modus-button color="danger" variant="outlined" (buttonClick)="clearAllToasts()">
+                Clear All Toasts
+              </modus-button>
+            </div>
+          </div>
+
+          <!-- Toast Display -->
+          @for (toast of toasts(); track toast.id) {
+            <modus-toast [position]="toast.position" [delay]="toast.delay ?? undefined">
+              <modus-alert
+                [alertTitle]="toast.title"
+                [alertDescription]="toast.description"
+                [variant]="toast.variant"
+                [dismissible]="toast.dismissible"
+                (dismiss)="removeToast(toast.id)"
+              />
+            </modus-toast>
+          }
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ToastDemoPageComponent {
+  readonly toasts = signal<ToastItem[]>([]);
+
+  addToast(
+    variant: ToastVariant,
+    position: ToastPosition = 'top-end',
+    title: string,
+    description: string,
+  ): void {
+    const id = `toast-${variant}-${Date.now()}`;
+    const newToast: ToastItem = {
+      id,
+      title,
+      description,
+      variant,
+      dismissible: true,
+      position,
+      delay: variant === 'warning' ? null : 4000,
+    };
+    this.toasts.update((prev) => [...prev, newToast]);
+  }
+
+  removeToast(toastId: string): void {
+    this.toasts.update((prev) => prev.filter((toast) => toast.id !== toastId));
+  }
+
+  clearAllToasts(): void {
+    this.toasts.set([]);
+  }
+}

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

@@ -0,0 +1,54 @@
+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 { ModusToolbarComponent } from '../../components/modus-toolbar.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Demo page showcasing the Modus Toolbar component.
+ *
+ * Demonstrates toolbar features including:
+ * - Document toolbar with start, center, and end slots
+ * - Icon buttons with text labels
+ * - Different button variants and sizes
+ */
+@Component({
+  selector: 'app-toolbar-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusToolbarComponent,
+    ModusButtonComponent,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <demo-page
+      title="Modus Toolbar"
+      description="Toolbars organize actions for a focused context. Keep primary commands on the left, secondary options on the right, and maintain consistent spacing."
+    >
+      <demo-example
+        title="Document Toolbar"
+        description="Pair icon buttons with text labels when space allows."
+      >
+        <modus-toolbar>
+          <div slot="start" class="flex items-center gap-3 text-sm text-foreground">
+            <i class="modus-icons text-primary">pencil</i>
+            <div class="font-medium">Proposal draft</div>
+          </div>
+          <div slot="center" class="flex gap-2">
+            <modus-button size="sm" icon="undo" iconPosition="left">Undo</modus-button>
+            <modus-button size="sm" icon="redo" iconPosition="left">Redo</modus-button>
+          </div>
+          <div slot="end" class="flex gap-2">
+            <modus-button size="sm" variant="borderless">Share</modus-button>
+            <modus-button size="sm" color="primary">Publish</modus-button>
+          </div>
+        </modus-toolbar>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ToolbarDemoPageComponent {}

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

@@ -0,0 +1,163 @@
+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 { ModusTooltipComponent } from '../../components/modus-tooltip.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+import { ModusIconComponent } from '../../components/modus-icon.component';
+
+/**
+ * Demo page showcasing the Modus Tooltip component.
+ *
+ * Demonstrates tooltip features including:
+ * - Basic tooltip
+ * - Different positions
+ * - With buttons
+ * - With icons
+ * - Force open state
+ */
+@Component({
+  selector: 'app-tooltip-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusTooltipComponent,
+    ModusButtonComponent,
+    ModusIconComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Tooltip"
+      description="Tooltip components provide contextual information when users hover over or focus on elements. Use tooltips to provide helpful hints, additional context, or brief explanations."
+    >
+      <demo-example
+        title="Basic Tooltip"
+        description="Simple tooltip with text content."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-tooltip content="This is a helpful tooltip">
+            <modus-button color="primary">Hover me</modus-button>
+          </modus-tooltip>
+
+          <modus-tooltip content="Click to save your changes">
+            <modus-button color="secondary" icon="save_disk" iconPosition="left">Save</modus-button>
+          </modus-tooltip>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Tooltip Positions"
+        description="Tooltips in different positions relative to the element."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-tooltip content="Tooltip on top" position="top">
+            <modus-button color="primary">Top</modus-button>
+          </modus-tooltip>
+
+          <modus-tooltip content="Tooltip on right" position="right">
+            <modus-button color="primary">Right</modus-button>
+          </modus-tooltip>
+
+          <modus-tooltip content="Tooltip on bottom" position="bottom">
+            <modus-button color="primary">Bottom</modus-button>
+          </modus-tooltip>
+
+          <modus-tooltip content="Tooltip on left" position="left">
+            <modus-button color="primary">Left</modus-button>
+          </modus-tooltip>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Tooltip with Icons"
+        description="Tooltips on icon buttons and icon-only elements."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-tooltip content="Settings menu">
+            <modus-button color="tertiary" icon="settings" iconPosition="only" ariaLabel="Settings" />
+          </modus-tooltip>
+
+          <modus-tooltip content="Edit item">
+            <modus-button color="tertiary" icon="file_edit" iconPosition="only" ariaLabel="Edit" />
+          </modus-tooltip>
+
+          <modus-tooltip content="Delete item">
+            <modus-button color="danger" icon="delete" iconPosition="only" ariaLabel="Delete" />
+          </modus-tooltip>
+
+          <modus-tooltip content="Information icon">
+            <modus-icon name="info" variant="outlined" size="lg" [decorative]="false" ariaLabel="Information" />
+          </modus-tooltip>
+
+          <modus-tooltip content="Help and support">
+            <modus-icon name="help" variant="outlined" size="lg" [decorative]="false" ariaLabel="Help" />
+          </modus-tooltip>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Tooltip with Text Content"
+        description="Tooltips on text and other content elements."
+      >
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center gap-2">
+            <span class="text-sm text-foreground">Hover over the</span>
+            <modus-tooltip content="This term provides additional context when hovered">
+              <span class="text-sm text-primary underline cursor-help">highlighted term</span>
+            </modus-tooltip>
+            <span class="text-sm text-foreground">for more information.</span>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <modus-tooltip content="This is a required field that must be completed">
+              <span class="text-sm text-foreground flex items-center gap-1">
+                Required Field
+                <i class="modus-icons text-xs text-destructive" aria-hidden="true">alert</i>
+              </span>
+            </modus-tooltip>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Auto Position Tooltip"
+        description="Tooltip with automatic position detection."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-tooltip content="Auto position adjusts based on available space" position="auto">
+            <modus-button color="primary">Auto Position</modus-button>
+          </modus-tooltip>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Real-World Example"
+        description="Tooltips in a typical UI context."
+      >
+        <div class="flex flex-col gap-6 p-6 rounded-lg bg-card border-default">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <span class="text-base font-medium text-foreground">Document Editor</span>
+              <modus-tooltip content="Save your document (Ctrl+S)">
+                <modus-button color="tertiary" icon="save_disk" iconPosition="only" ariaLabel="Save" size="sm" />
+              </modus-tooltip>
+              <modus-tooltip content="Print document (Ctrl+P)">
+                <modus-button color="tertiary" icon="printer" iconPosition="only" ariaLabel="Print" size="sm" />
+              </modus-tooltip>
+              <modus-tooltip content="Share document">
+                <modus-button color="tertiary" icon="share" iconPosition="only" ariaLabel="Share" size="sm" />
+              </modus-tooltip>
+            </div>
+            <modus-tooltip content="Open settings menu">
+              <modus-button color="tertiary" icon="settings" iconPosition="only" ariaLabel="Settings" size="sm" />
+            </modus-tooltip>
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class TooltipDemoPageComponent {}
+