@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,330 @@
+import { Component, computed, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusInputLabelComponent } from '../../components/modus-input-label.component';
+import { ModusTextInputComponent } from '../../components/modus-text-input.component';
+import { ModusCheckboxComponent } from '../../components/modus-checkbox.component';
+import { ModusRadioComponent } from '../../components/modus-radio.component';
+import { ModusDateComponent } from '../../components/modus-date.component';
+import { ModusNumberInputComponent } from '../../components/modus-number-input.component';
+import { ModusInputFeedbackComponent } from '../../components/modus-input-feedback.component';
+import type { IInputFeedbackProp } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Demo page showcasing the Modus Input Label component.
+ *
+ * Demonstrates input label features including:
+ * - Basic labels
+ * - Required labels
+ * - Labels with different form controls
+ * - Label sizes
+ * - Label accessibility
+ */
+@Component({
+  selector: 'app-input-label-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusInputLabelComponent,
+    ModusTextInputComponent,
+    ModusCheckboxComponent,
+    ModusRadioComponent,
+    ModusDateComponent,
+    ModusNumberInputComponent,
+    ModusInputFeedbackComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Input Label"
+      description="Input labels provide clear identification for form controls. Always use labels to make forms accessible and user-friendly."
+    >
+      <demo-example title="Basic Label" description="Simple label for form inputs.">
+        <div class="flex flex-col gap-2">
+          <modus-input-label forId="basic-input" labelText="Email Address" />
+          <modus-text-input inputId="basic-input" placeholder="user@example.com" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Required Label"
+        description="Labels with required indicator for mandatory fields."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="required-input" labelText="First Name" [required]="true" />
+            <modus-text-input
+              inputId="required-input"
+              placeholder="Enter first name"
+              [required]="true"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="required-email" labelText="Email" [required]="true" />
+            <modus-text-input
+              inputId="required-email"
+              type="email"
+              placeholder="user@example.com"
+              [required]="true"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Labels with Different Form Controls"
+        description="Input labels work with various form control types."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="checkbox-input" labelText="Accept Terms" [required]="true" />
+            <modus-checkbox
+              inputId="checkbox-input"
+              label="I agree to the terms and conditions"
+              [required]="true"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="radio-input" labelText="Select Option" />
+            <div class="flex flex-col gap-2">
+              <modus-radio
+                inputId="radio-input"
+                label="Option A"
+                name="radio-demo"
+                [value]="true"
+              />
+              <modus-radio
+                inputId="radio-input-b"
+                label="Option B"
+                name="radio-demo"
+                [value]="false"
+              />
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-date inputId="date-input" label="Pick a date" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="number-input"
+              label="Quantity"
+              placeholder="0"
+              [step]="1"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Label Sizes" description="Input labels in different sizes.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="small-label" labelText="Small Label" size="sm" />
+            <modus-text-input inputId="small-label" placeholder="Enter text" size="sm" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="medium-label" labelText="Medium Label (Default)" size="md" />
+            <modus-text-input inputId="medium-label" placeholder="Enter text" size="md" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="large-label" labelText="Large Label" size="lg" />
+            <modus-text-input inputId="large-label" placeholder="Enter text" size="lg" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Real-World Form Example"
+        description="Complete form example with proper labels and validation feedback."
+      >
+        <div class="flex flex-col gap-6 p-6 rounded-lg bg-card border-default">
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="form-first-name" labelText="First Name" [required]="true" />
+            <modus-text-input
+              inputId="form-first-name"
+              placeholder="Enter first name"
+              [required]="true"
+              [value]="form.controls.firstName.value ?? ''"
+              [feedback]="firstNameFeedback()"
+              (inputChange)="handleFirstNameChange($event)"
+              (inputBlur)="handleFirstNameBlur()"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="form-last-name" labelText="Last Name" [required]="true" />
+            <modus-text-input
+              inputId="form-last-name"
+              placeholder="Enter last name"
+              [required]="true"
+              [value]="form.controls.lastName.value ?? ''"
+              [feedback]="lastNameFeedback()"
+              (inputChange)="handleLastNameChange($event)"
+              (inputBlur)="handleLastNameBlur()"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="form-email" labelText="Email Address" [required]="true" />
+            <modus-text-input
+              inputId="form-email"
+              type="email"
+              placeholder="user@example.com"
+              [required]="true"
+              [value]="form.controls.email.value ?? ''"
+              [feedback]="emailFeedback()"
+              (inputChange)="handleEmailChange($event)"
+              (inputBlur)="handleEmailBlur()"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-input-label forId="form-checkbox" labelText="Agreement" [required]="true" />
+            <modus-checkbox
+              inputId="form-checkbox"
+              label="I agree to the terms and conditions"
+              [required]="true"
+              [value]="form.controls.agreement.value ?? false"
+              (inputChange)="handleAgreementChange($event)"
+              (inputBlur)="handleAgreementBlur()"
+            />
+            @if (agreementFeedback()) {
+            <modus-input-feedback
+              [level]="agreementFeedback()!.level"
+              [message]="agreementFeedback()!.message"
+            />
+            }
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class InputLabelDemoPageComponent {
+  private readonly fb = new FormBuilder();
+
+  readonly form = this.fb.group({
+    firstName: ['', [Validators.required, Validators.minLength(2)]],
+    lastName: ['', [Validators.required, Validators.minLength(2)]],
+    email: ['', [Validators.required, Validators.email]],
+    agreement: [false, Validators.requiredTrue],
+  });
+
+  // Track touched state for each field
+  readonly touchedFields = signal<Set<string>>(new Set());
+
+  // Computed feedback for firstName
+  readonly firstNameFeedback = computed<IInputFeedbackProp | undefined>(() => {
+    const control = this.form.controls.firstName;
+    const isTouched = this.touchedFields().has('firstName');
+    if (!isTouched || !control.errors) return undefined;
+
+    if (control.errors['required']) {
+      return { level: 'error', message: 'First name is required.' };
+    }
+    if (control.errors['minlength']) {
+      return { level: 'error', message: 'First name must be at least 2 characters.' };
+    }
+    return undefined;
+  });
+
+  // Computed feedback for lastName
+  readonly lastNameFeedback = computed<IInputFeedbackProp | undefined>(() => {
+    const control = this.form.controls.lastName;
+    const isTouched = this.touchedFields().has('lastName');
+    if (!isTouched || !control.errors) return undefined;
+
+    if (control.errors['required']) {
+      return { level: 'error', message: 'Last name is required.' };
+    }
+    if (control.errors['minlength']) {
+      return { level: 'error', message: 'Last name must be at least 2 characters.' };
+    }
+    return undefined;
+  });
+
+  // Computed feedback for email
+  readonly emailFeedback = computed<IInputFeedbackProp | undefined>(() => {
+    const control = this.form.controls.email;
+    const isTouched = this.touchedFields().has('email');
+    if (!isTouched || !control.errors) return undefined;
+
+    if (control.errors['required']) {
+      return { level: 'error', message: 'Email address is required.' };
+    }
+    if (control.errors['email']) {
+      return { level: 'error', message: 'Please enter a valid email address.' };
+    }
+    return undefined;
+  });
+
+  // Computed feedback for agreement checkbox
+  readonly agreementFeedback = computed<IInputFeedbackProp | undefined>(() => {
+    const control = this.form.controls.agreement;
+    const isTouched = this.touchedFields().has('agreement');
+    if (!isTouched || !control.errors) return undefined;
+
+    if (control.errors['required']) {
+      return { level: 'error', message: 'You must agree to the terms and conditions.' };
+    }
+    return undefined;
+  });
+
+  handleFirstNameChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.form.controls.firstName.setValue(target.value);
+    this.markFieldTouched('firstName');
+  }
+
+  handleFirstNameBlur(): void {
+    this.markFieldTouched('firstName');
+  }
+
+  handleLastNameChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.form.controls.lastName.setValue(target.value);
+    this.markFieldTouched('lastName');
+  }
+
+  handleLastNameBlur(): void {
+    this.markFieldTouched('lastName');
+  }
+
+  handleEmailChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.form.controls.email.setValue(target.value);
+    this.markFieldTouched('email');
+  }
+
+  handleEmailBlur(): void {
+    this.markFieldTouched('email');
+  }
+
+  handleAgreementChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    const checked = target.type === 'checkbox' ? target.checked : Boolean(target.value);
+    this.form.controls.agreement.setValue(checked);
+    this.markFieldTouched('agreement');
+  }
+
+  handleAgreementBlur(): void {
+    this.markFieldTouched('agreement');
+  }
+
+  private markFieldTouched(fieldName: string): void {
+    this.touchedFields.update((fields) => {
+      const newFields = new Set(fields);
+      newFields.add(fieldName);
+      return newFields;
+    });
+  }
+}

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

@@ -0,0 +1,143 @@
+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 { ModusLoaderComponent } from '../../components/modus-loader.component';
+
+/**
+ * Demo page showcasing the Modus Loader component.
+ *
+ * Demonstrates loader features including:
+ * - All six loader variants (spinner, ball, bars, dots, infinity, ring)
+ * - Color options with theme-aware colors
+ * - Size options (xs, sm, md, lg)
+ * - Usage examples in real application contexts
+ */
+@Component({
+  selector: 'app-loader-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusLoaderComponent],
+  template: `
+    <demo-page
+      title="Modus Loader"
+      description="Loaders communicate that content is on the way. Select a variant that fits the space and avoid pairing multiple animations together."
+    >
+      <demo-example
+        title="All Variants"
+        description="Six different animation styles to choose from based on your use case."
+      >
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" size="md" />
+            <div class="text-sm text-foreground-80">Spinner</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="ball" size="md" />
+            <div class="text-sm text-foreground-80">Ball</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="bars" size="md" />
+            <div class="text-sm text-foreground-80">Bars</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="dots" size="md" />
+            <div class="text-sm text-foreground-80">Dots</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="infinity" size="md" />
+            <div class="text-sm text-foreground-80">Infinity</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="ring" size="md" />
+            <div class="text-sm text-foreground-80">Ring</div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Color Options"
+        description="Theme-aware colors that automatically adapt to light and dark themes."
+      >
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" color="primary" size="md" />
+            <div class="text-sm text-foreground-80">Primary</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" color="secondary" size="md" />
+            <div class="text-sm text-foreground-80">Secondary</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" color="accent" size="md" />
+            <div class="text-sm text-foreground-80">Accent</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" color="success" size="md" />
+            <div class="text-sm text-foreground-80">Success</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" color="warning" size="md" />
+            <div class="text-sm text-foreground-80">Warning</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" color="error" size="md" />
+            <div class="text-sm text-foreground-80">Error</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" color="info" size="md" />
+            <div class="text-sm text-foreground-80">Info</div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Size Options"
+        description="Four size tokens from extra small to large for different contexts."
+      >
+        <div class="flex items-center justify-center gap-8">
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" size="xs" />
+            <div class="text-sm text-foreground-80">XS (16px)</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" size="sm" />
+            <div class="text-sm text-foreground-80">SM (20px)</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" size="md" />
+            <div class="text-sm text-foreground-80">MD (24px)</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-loader variant="spinner" size="lg" />
+            <div class="text-sm text-foreground-80">LG (32px)</div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Usage Examples"
+        description="Common patterns for using loaders in real applications."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex items-center gap-3">
+            <modus-loader variant="spinner" size="md" />
+            <div class="text-sm text-foreground-80">Syncing records…</div>
+          </div>
+          <div class="flex items-center gap-2">
+            <modus-loader variant="dots" size="sm" color="secondary" />
+            <div class="text-sm text-foreground-80">Preparing report</div>
+          </div>
+          <div class="flex items-center gap-3">
+            <modus-loader variant="bars" size="sm" color="success" />
+            <div class="text-sm text-foreground-80">Upload complete</div>
+          </div>
+          <div class="flex items-center gap-3">
+            <modus-loader variant="ring" size="lg" color="warning" />
+            <div class="text-lg text-foreground">Processing large dataset…</div>
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class LoaderDemoPageComponent {}

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

@@ -0,0 +1,191 @@
+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 { ModusLogoComponent, LogoName } from '../../components/modus-logo.component';
+
+/**
+ * Demo page showcasing the Modus Logo component.
+ *
+ * Demonstrates logo features including:
+ * - Trimble product logos (19 logos)
+ * - Viewpoint product logos (17 logos)
+ * - Full logos vs emblem (icon-only) variants
+ * - Custom sizing with Tailwind classes
+ * - Theme awareness (automatic light/dark switching)
+ */
+@Component({
+  selector: 'app-logo-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusLogoComponent],
+  template: `
+    <demo-page
+      title="Modus Logo"
+      description="Display Trimble and Viewpoint product logos with consistent branding. Logos automatically switch between light and dark variants based on the current theme."
+    >
+      <demo-example
+        title="Trimble Product Logos"
+        description="Official Trimble product logos. Logos contain embedded brand colors and should not be modified."
+      >
+        <div class="grid grid-cols-2 gap-8">
+          @for (logo of trimbleLogos; track logo.name) {
+            <div
+              class="flex flex-col items-center gap-4 p-6 bg-muted rounded-lg"
+            >
+              <div class="h-20 flex items-center justify-center">
+                <modus-logo [name]="logo.name" customClass="max-h-20 max-w-64" />
+              </div>
+              <div class="text-sm text-muted-foreground text-center">{{ logo.display }}</div>
+              <code class="text-xs bg-background px-2 py-1 rounded">{{ logo.name }}</code>
+            </div>
+          }
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Viewpoint Product Logos"
+        description="Official Viewpoint product logos with proper brand colors."
+      >
+        <div class="grid grid-cols-2 gap-8">
+          @for (logo of viewpointLogos; track logo.name) {
+            <div
+              class="flex flex-col items-center gap-4 p-6 bg-muted rounded-lg"
+            >
+              <div class="h-20 flex items-center justify-center">
+                <modus-logo [name]="logo.name" customClass="max-h-20 max-w-64" />
+              </div>
+              <div class="text-sm text-muted-foreground text-center">{{ logo.display }}</div>
+              <code class="text-xs bg-background px-2 py-1 rounded">{{ logo.name }}</code>
+            </div>
+          }
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Emblem Variants"
+        description="Icon-only versions of logos for compact spaces like favicons, app icons, or navigation."
+      >
+        <div class="flex flex-wrap items-center gap-8">
+          @for (logo of featuredLogos; track logo.name) {
+            <div class="flex flex-col items-center gap-2">
+              <div
+                class="w-16 h-16 flex items-center justify-center bg-card rounded-lg border-default"
+              >
+                <modus-logo [name]="logo.name" [emblem]="true" customClass="w-10 h-10" />
+              </div>
+              <div class="text-xs text-foreground-60">{{ logo.display }}</div>
+            </div>
+          }
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Size Variations"
+        description="Control logo size using Tailwind CSS classes via the customClass prop."
+      >
+        <div class="flex flex-wrap items-end gap-8">
+          <div class="flex flex-col items-center gap-2">
+            <modus-logo name="trimble" customClass="h-6 w-auto" />
+            <div class="text-xs text-foreground-60">Small (h-6)</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-logo name="trimble" customClass="h-10 w-auto" />
+            <div class="text-xs text-foreground-60">Medium (h-10)</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-logo name="trimble" customClass="h-16 w-auto" />
+            <div class="text-xs text-foreground-60">Large (h-16)</div>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <modus-logo name="trimble" customClass="h-24 w-auto" />
+            <div class="text-xs text-foreground-60">Extra Large (h-24)</div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Theme Awareness"
+        description="Logos automatically switch between light and dark variants based on the data-theme attribute. Try switching themes to see the change."
+      >
+        <div class="flex flex-wrap items-center gap-8">
+          <div class="flex flex-col items-center gap-3 p-6 bg-card rounded-lg border-default">
+            <modus-logo name="trimble" customClass="h-12 w-auto" />
+            <div class="text-sm text-foreground-60">Trimble</div>
+          </div>
+          <div class="flex flex-col items-center gap-3 p-6 bg-card rounded-lg border-default">
+            <modus-logo name="connect" customClass="h-12 w-auto" />
+            <div class="text-sm text-foreground-60">Trimble Connect</div>
+          </div>
+          <div class="flex flex-col items-center gap-3 p-6 bg-card rounded-lg border-default">
+            <modus-logo name="viewpoint" customClass="h-12 w-auto" />
+            <div class="text-sm text-foreground-60">Viewpoint</div>
+          </div>
+        </div>
+        <div class="mt-4 p-4 bg-muted rounded-lg">
+          <div class="text-sm text-foreground-80">
+            <div class="font-semibold mb-1">How it works</div>
+            <div>
+              The logo component observes the data-theme attribute on the HTML element and
+              automatically loads the appropriate light or dark SVG variant. No additional
+              configuration is required.
+            </div>
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class LogoDemoPageComponent {
+  /** Trimble product logos (19 logos) */
+  readonly trimbleLogos: { name: LogoName; display: string }[] = [
+    { name: 'trimble', display: 'Trimble' },
+    { name: 'siteworks', display: 'Siteworks' },
+    { name: 'earthworks', display: 'Earthworks' },
+    { name: 'financials', display: 'Financials' },
+    { name: 'worksmanager', display: 'WorksManager' },
+    { name: 'connect', display: 'Connect' },
+    { name: 'unity_construct', display: 'Unity Construct' },
+    { name: 'trade_servicelive', display: 'Trade ServiceLive' },
+    { name: 'buildable', display: 'Buildable' },
+    { name: 'livecount', display: 'LiveCount' },
+    { name: 'supplier_xchange', display: 'Supplier Xchange' },
+    { name: 'app_xchange', display: 'App Xchange' },
+    { name: 'trimble_unity', display: 'Trimble Unity' },
+    { name: 'sketchup', display: 'SketchUp' },
+    { name: 'pc_miler', display: 'PC Miler' },
+    { name: 'copilot', display: 'CoPilot' },
+    { name: 'trimble_pay', display: 'Trimble Pay' },
+    { name: 'projectsight', display: 'ProjectSight' },
+    { name: 'demand_planning', display: 'Demand Planning' },
+  ];
+
+  /** Viewpoint product logos (17 logos) */
+  readonly viewpointLogos: { name: LogoName; display: string }[] = [
+    { name: 'viewpoint', display: 'Viewpoint' },
+    { name: 'viewpoint_analytics', display: 'Analytics' },
+    { name: 'viewpoint_epayments', display: 'ePayments' },
+    { name: 'viewpoint_estimating', display: 'Estimating' },
+    { name: 'viewpoint_field_management', display: 'Field Management' },
+    { name: 'viewpoint_field_time', display: 'Field Time' },
+    { name: 'viewpoint_financial_controls', display: 'Financial Controls' },
+    { name: 'viewpoint_hr_management', display: 'HR Management' },
+    { name: 'viewpoint_jobpac_connect', display: 'Jobpac Connect' },
+    { name: 'viewpoint_procontractor', display: 'ProContractor' },
+    { name: 'viewpoint_spectrum', display: 'Spectrum' },
+    { name: 'viewpoint_team', display: 'Team' },
+    { name: 'viewpoint_vista', display: 'Vista' },
+    { name: 'viewpoint_spectrum_service_tech', display: 'Spectrum Service Tech' },
+    { name: 'viewpoint_for_projects', display: 'For Projects' },
+    { name: 'viewpoint_vista_field_service', display: 'Vista Field Service' },
+    { name: 'viewpoint_field_view', display: 'Field View' },
+  ];
+
+  /** Featured logos for emblem demonstration */
+  readonly featuredLogos: { name: LogoName; display: string }[] = [
+    { name: 'trimble', display: 'Trimble' },
+    { name: 'connect', display: 'Connect' },
+    { name: 'sketchup', display: 'SketchUp' },
+    { name: 'viewpoint', display: 'Viewpoint' },
+    { name: 'viewpoint_vista', display: 'Vista' },
+  ];
+}