@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/app/components/modus-input-feedback.component.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcInputFeedback } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, IInputFeedbackLevel, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusInputFeedbackComponent}.
+ */
+export interface ModusInputFeedbackProps {
+  /** Custom CSS class applied to the container. */
+  className?: Components.ModusWcInputFeedback['customClass'];
+  /** Icon override rendered before the message. */
+  icon?: Components.ModusWcInputFeedback['icon'];
+  /** Feedback level controlling icon and color. */
+  level: IInputFeedbackLevel;
+  /** Feedback message text. */
+  message?: Components.ModusWcInputFeedback['message'];
+  /** Control size token. */
+  size?: ModusSize;
+}
+
+/**
+ * Angular wrapper for the Modus input feedback web component.
+ */
+@Component({
+  selector: 'modus-input-feedback',
+  imports: [CommonModule, ModusWcInputFeedback],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-input-feedback
+      [customClass]="className()"
+      [icon]="icon()"
+      [level]="level()"
+      [message]="message()"
+      [size]="size()"
+    />
+  `,
+})
+export class ModusInputFeedbackComponent {
+  /** Custom CSS class applied to the container. */
+  readonly className = input<string | undefined>();
+
+  /** Icon override rendered before the message. */
+  readonly icon = input<string | undefined>();
+
+  /** Feedback level controlling icon and color. */
+  readonly level = input.required<IInputFeedbackLevel>();
+
+  /** Feedback message text. */
+  readonly message = input<string | undefined>();
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+}

package/templates/angular/src/app/components/modus-input-label.component.ts

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcInputLabel } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusInputLabelComponent}.
+ */
+export interface ModusInputLabelProps {
+  /** Additional classes for custom styling. */
+  className?: Components.ModusWcInputLabel['customClass'];
+  /** The `for` attribute mapping to the associated input id. */
+  forId?: Components.ModusWcInputLabel['forId'];
+  /** The primary label text. */
+  labelText?: Components.ModusWcInputLabel['labelText'];
+  /** Indicates whether the label represents a required field. */
+  required?: Components.ModusWcInputLabel['required'];
+  /** Label size token. */
+  size?: ModusSize;
+  /** Optional secondary text displayed beneath the label. */
+  subLabelText?: Components.ModusWcInputLabel['subLabelText'];
+}
+
+/**
+ * Angular wrapper for the Modus input label web component.
+ */
+@Component({
+  selector: 'modus-input-label',
+  imports: [CommonModule, ModusWcInputLabel],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-input-label
+      [customClass]="className()"
+      [forId]="forId()"
+      [labelText]="labelText()"
+      [required]="required()"
+      [size]="size()"
+      [subLabelText]="subLabelText()"
+    >
+      <ng-content />
+    </modus-wc-input-label>
+  `,
+})
+export class ModusInputLabelComponent {
+  /** Additional classes for custom styling. */
+  readonly className = input<string | undefined>();
+
+  /** The `for` attribute mapping to the associated input id. */
+  readonly forId = input<string | undefined>();
+
+  /** The primary label text. */
+  readonly labelText = input<string | undefined>();
+
+  /** Indicates whether the label represents a required field. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Label size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Optional secondary text displayed beneath the label. */
+  readonly subLabelText = input<string | undefined>();
+}

package/templates/angular/src/app/components/modus-loader.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcLoader } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, DaisySize, LoaderColor, LoaderVariant } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusLoaderComponent}.
+ */
+export interface ModusLoaderProps {
+  /** Loader color token. */
+  color?: LoaderColor;
+  /** Optional CSS class applied to the loader element. */
+  className?: Components.ModusWcLoader['customClass'];
+  /** Loader size token. */
+  size?: DaisySize;
+  /** Loader variant (spinner style). */
+  variant?: LoaderVariant;
+}
+
+/**
+ * Angular wrapper for the Modus loader web component.
+ */
+@Component({
+  selector: 'modus-loader',
+  imports: [CommonModule, ModusWcLoader],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-loader
+      [color]="color()"
+      [customClass]="className()"
+      [size]="size()"
+      [variant]="variant()"
+    />
+  `,
+})
+export class ModusLoaderComponent {
+  /** Loader color token. */
+  readonly color = input<LoaderColor | undefined>('primary');
+
+  /** Optional CSS class applied to the loader element. */
+  readonly className = input<string | undefined>();
+
+  /** Loader size token. */
+  readonly size = input<DaisySize | undefined>('md');
+
+  /** Loader variant (spinner style). */
+  readonly variant = input<LoaderVariant | undefined>('spinner');
+}

package/templates/angular/src/app/components/modus-logo.component.ts

@@ -0,0 +1,115 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcLogo } from '@trimble-oss/moduswebcomponents-angular';
+
+/**
+ * Available logo names for the ModusLogo component.
+ *
+ * Includes 19 Trimble product logos and 17 Viewpoint product logos.
+ */
+export type LogoName =
+  // Trimble Products (19)
+  | 'trimble'
+  | 'siteworks'
+  | 'earthworks'
+  | 'financials'
+  | 'worksmanager'
+  | 'connect'
+  | 'unity_construct'
+  | 'trade_servicelive'
+  | 'buildable'
+  | 'livecount'
+  | 'supplier_xchange'
+  | 'app_xchange'
+  | 'trimble_unity'
+  | 'sketchup'
+  | 'pc_miler'
+  | 'copilot'
+  | 'trimble_pay'
+  | 'projectsight'
+  | 'demand_planning'
+  // Viewpoint Products (17)
+  | 'viewpoint'
+  | 'viewpoint_analytics'
+  | 'viewpoint_epayments'
+  | 'viewpoint_estimating'
+  | 'viewpoint_field_management'
+  | 'viewpoint_field_time'
+  | 'viewpoint_financial_controls'
+  | 'viewpoint_hr_management'
+  | 'viewpoint_jobpac_connect'
+  | 'viewpoint_procontractor'
+  | 'viewpoint_spectrum'
+  | 'viewpoint_team'
+  | 'viewpoint_vista'
+  | 'viewpoint_spectrum_service_tech'
+  | 'viewpoint_for_projects'
+  | 'viewpoint_vista_field_service'
+  | 'viewpoint_field_view';
+
+/**
+ * Input properties for the ModusLogoComponent wrapper.
+ */
+export interface ModusLogoProps {
+  /** The name of the logo to display (required). */
+  name: LogoName;
+  /** Show emblem version (icon only) instead of full logo. */
+  emblem?: boolean;
+  /** Custom CSS class to apply to the logo container (useful for sizing). */
+  customClass?: string;
+  /** Alt text for accessibility. If not provided, defaults to the logo name. */
+  alt?: string;
+}
+
+/**
+ * Angular wrapper for the Modus logo web component.
+ *
+ * Renders Trimble and Viewpoint product logos with support for full logos
+ * and emblem (icon-only) variants. Automatically switches between light
+ * and dark theme variants based on the current data-theme attribute.
+ *
+ * @example
+ * ```html
+ * <!-- Basic Trimble logo -->
+ * <modus-logo name="trimble" />
+ *
+ * <!-- Emblem (icon-only) version -->
+ * <modus-logo name="trimble" [emblem]="true" />
+ *
+ * <!-- With custom alt text and sizing -->
+ * <modus-logo
+ *   name="connect"
+ *   alt="Trimble Connect Platform"
+ *   customClass="w-32"
+ * />
+ *
+ * <!-- Viewpoint product logo -->
+ * <modus-logo name="viewpoint_vista" />
+ * ```
+ */
+@Component({
+  selector: 'modus-logo',
+  imports: [CommonModule, ModusWcLogo],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-logo
+      [name]="name()"
+      [emblem]="emblem()"
+      [customClass]="customClass()"
+      [alt]="alt()"
+    />
+  `,
+})
+export class ModusLogoComponent {
+  /** The name of the logo to display (required). */
+  readonly name = input.required<LogoName>();
+
+  /** Show emblem version (icon only) instead of full logo. */
+  readonly emblem = input<boolean>(false);
+
+  /** Custom CSS class to apply to the logo container (useful for sizing). */
+  readonly customClass = input<string | undefined>();
+
+  /** Alt text for accessibility. If not provided, defaults to the logo name. */
+  readonly alt = input<string | undefined>();
+}

package/templates/angular/src/app/components/modus-menu-item.component.ts

@@ -0,0 +1,116 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcMenuItem } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusMenuItemComponent}.
+ */
+export interface ModusMenuItemProps {
+  /** Adds a border to the menu item. */
+  bordered?: Components.ModusWcMenuItem['bordered'];
+  /** Displays a checkbox at the start of the menu item. */
+  checkbox?: Components.ModusWcMenuItem['checkbox'];
+  /** Custom CSS class applied to the menu item. */
+  className?: Components.ModusWcMenuItem['customClass'];
+  /** Disables the item. */
+  disabled?: Components.ModusWcMenuItem['disabled'];
+  /** Highlights the item as focused. */
+  focused?: Components.ModusWcMenuItem['focused'];
+  /** Text label rendered inside the item. */
+  label: Components.ModusWcMenuItem['label'];
+  /** Icon name displayed before the label. */
+  startIcon?: Components.ModusWcMenuItem['startIcon'];
+  /** Marks the item as selected. */
+  selected?: Components.ModusWcMenuItem['selected'];
+  /** Item size token. */
+  size?: ModusSize;
+  /** Sub-label text displayed beneath the label. */
+  subLabel?: Components.ModusWcMenuItem['subLabel'];
+  /** Tooltip content shown on hover. */
+  tooltipContent?: Components.ModusWcMenuItem['tooltipContent'];
+  /** Tooltip position relative to the item. */
+  tooltipPosition?: Components.ModusWcMenuItem['tooltipPosition'];
+  /** Unique value emitted when the item is selected. */
+  value: Components.ModusWcMenuItem['value'];
+}
+
+/**
+ * Angular wrapper for the Modus menu item web component.
+ */
+@Component({
+  selector: 'modus-menu-item',
+  imports: [CommonModule, ModusWcMenuItem],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-menu-item
+      [bordered]="bordered()"
+      [checkbox]="checkbox()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [focused]="focused()"
+      [label]="label()"
+      [startIcon]="startIcon()"
+      [attr.start-icon]="startIcon()"
+      [selected]="selected()"
+      [attr.selected]="selected() ? '' : null"
+      [size]="size()"
+      [subLabel]="subLabel()"
+      [tooltipContent]="tooltipContent()"
+      [tooltipPosition]="tooltipPosition()"
+      [value]="value()"
+      (itemSelect)="handleItemSelect($event)"
+    >
+      <ng-content select="[slot='start-icon']" slot="start-icon" />
+    </modus-wc-menu-item>
+  `,
+})
+export class ModusMenuItemComponent {
+  /** Adds a border to the menu item. */
+  readonly bordered = input<boolean | undefined>(false);
+
+  /** Displays a checkbox at the start of the menu item. */
+  readonly checkbox = input<boolean | undefined>(false);
+
+  /** Custom CSS class applied to the menu item. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the item. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Highlights the item as focused. */
+  readonly focused = input<boolean | undefined>(false);
+
+  /** Text label rendered inside the item. */
+  readonly label = input.required<string>();
+
+  /** Icon name displayed before the label. */
+  readonly startIcon = input<string | undefined>();
+
+  /** Marks the item as selected. */
+  readonly selected = input<boolean | undefined>(false);
+
+  /** Item size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Sub-label text displayed beneath the label. */
+  readonly subLabel = input<string | undefined>();
+
+  /** Tooltip content shown on hover. */
+  readonly tooltipContent = input<string | undefined>();
+
+  /** Tooltip position relative to the item. */
+  readonly tooltipPosition = input<'auto' | 'top' | 'right' | 'bottom' | 'left' | undefined>(
+    'auto'
+  );
+
+  /** Unique value emitted when the item is selected. */
+  readonly value = input.required<string>();
+
+  /** Emits when the item is selected. */
+  readonly itemSelect = output<{ value: string }>();
+
+  handleItemSelect(event: CustomEvent<{ value: string }>): void {
+    this.itemSelect.emit(event.detail);
+  }
+}

package/templates/angular/src/app/components/modus-menu.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcMenu } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize, Orientation } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusMenuComponent}.
+ */
+export interface ModusMenuProps {
+  /** Indicates that the menu should have a border. */
+  bordered?: Components.ModusWcMenu['bordered'];
+  /** Custom CSS class applied to the menu element. */
+  className?: Components.ModusWcMenu['customClass'];
+  /** Menu orientation. */
+  orientation?: Orientation;
+  /** Menu size token. */
+  size?: ModusSize;
+}
+
+/**
+ * Angular wrapper for the Modus menu web component.
+ */
+@Component({
+  selector: 'modus-menu',
+  imports: [CommonModule, ModusWcMenu],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-menu
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [orientation]="orientation()"
+      [size]="size()"
+      (menuFocusout)="handleFocusOut($event)"
+    >
+      <ng-content />
+    </modus-wc-menu>
+  `,
+})
+export class ModusMenuComponent {
+  /** Indicates that the menu should have a border. */
+  readonly bordered = input<boolean | undefined>(false);
+
+  /** Custom CSS class applied to the menu element. */
+  readonly className = input<string | undefined>();
+
+  /** Menu orientation. */
+  readonly orientation = input<Orientation | undefined>('vertical');
+
+  /** Menu size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Emits when focus leaves the menu. */
+  readonly menuFocusout = output<FocusEvent>();
+
+  handleFocusOut(event: CustomEvent<FocusEvent>): void {
+    this.menuFocusout.emit(event.detail);
+  }
+}

package/templates/angular/src/app/components/modus-modal.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcModal } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusModalComponent}.
+ */
+export interface ModusModalProps {
+  /** Modal backdrop behavior. */
+  backdrop?: Components.ModusWcModal['backdrop'];
+  /** Custom CSS class applied to the modal container. */
+  className?: Components.ModusWcModal['customClass'];
+  /** Renders the modal fullscreen. */
+  fullscreen?: Components.ModusWcModal['fullscreen'];
+  /** Required identifier applied to the underlying dialog element. */
+  modalId: Components.ModusWcModal['modalId'];
+  /** Vertical positioning of the modal. */
+  position?: Components.ModusWcModal['position'];
+  /** Toggles the close button in the header. */
+  showClose?: Components.ModusWcModal['showClose'];
+  /** Toggles the fullscreen icon button. */
+  showFullscreenToggle?: Components.ModusWcModal['showFullscreenToggle'];
+}
+
+/**
+ * Angular wrapper for the Modus modal web component.
+ */
+@Component({
+  selector: 'modus-modal',
+  imports: [CommonModule, ModusWcModal],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-modal
+      [backdrop]="backdrop()"
+      [customClass]="className()"
+      [fullscreen]="fullscreen()"
+      [modalId]="modalId()"
+      [position]="position()"
+      [showClose]="showClose()"
+      [showFullscreenToggle]="showFullscreenToggle()"
+    >
+      <ng-content select="[slot='header']" slot="header" />
+      <ng-content select="[slot='content']" slot="content" />
+      <ng-content select="[slot='footer']" slot="footer" />
+    </modus-wc-modal>
+  `,
+})
+export class ModusModalComponent {
+  /** Modal backdrop behavior. */
+  readonly backdrop = input<'default' | 'static' | undefined>('default');
+
+  /** Custom CSS class applied to the modal container. */
+  readonly className = input<string | undefined>();
+
+  /** Renders the modal fullscreen. */
+  readonly fullscreen = input<boolean | undefined>(false);
+
+  /** Required identifier applied to the underlying dialog element. */
+  readonly modalId = input.required<string>();
+
+  /** Vertical positioning of the modal. */
+  readonly position = input<'bottom' | 'center' | 'top' | undefined>('center');
+
+  /** Toggles the close button in the header. */
+  readonly showClose = input<boolean | undefined>(true);
+
+  /** Toggles the fullscreen icon button. */
+  readonly showFullscreenToggle = input<boolean | undefined>(false);
+}