@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,133 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcAlert } from '@trimble-oss/moduswebcomponents-angular';
+
+/**
+ * Configuration options for the ModusAlertComponent.
+ */
+export interface ModusAlertProps {
+  /**
+   * The title text displayed at the top of the alert.
+   */
+  alertTitle: string;
+  /**
+   * Optional description text providing additional context for the alert.
+   */
+  alertDescription?: string;
+  /**
+   * Custom CSS class applied to the alert container for advanced styling needs.
+   */
+  className?: string;
+  /**
+   * Number of milliseconds before the alert automatically dismisses. When undefined, the alert remains visible.
+   */
+  delay?: number;
+  /**
+   * Enables a close button to allow the user to dismiss the alert manually.
+   */
+  dismissible?: boolean;
+  /**
+   * The Modus icon name rendered alongside the alert content.
+   */
+  icon?: string;
+  /**
+   * Visual variant that controls the alert color and semantics.
+   */
+  variant?: 'error' | 'info' | 'success' | 'warning';
+  /**
+   * ARIA role for the alert element.
+   */
+  role?: 'alert' | 'log' | 'marquee' | 'status' | 'timer';
+  /**
+   * Accessible label describing the purpose of the alert when no visible text is provided.
+   */
+  ariaLabel?: string;
+  /**
+   * Callback executed after the alert dispatches its dismiss event.
+   */
+  onDismiss?: () => void;
+}
+
+/**
+ * Angular wrapper for the Modus Web Component alert.
+ *
+ * This component exposes a typed, signal-based API that mirrors the Stencil component while
+ * providing a familiar Angular template syntax. Consumers can declaratively control the alert
+ * content, attach to dismiss events, and project arbitrary HTML via the default slot.
+ *
+ * @example
+ * ```html
+ * <modus-alert
+ *   alertTitle="Changes saved"
+ *   alertDescription="Updates were applied successfully."
+ *   variant="success"
+ *   dismissible
+ *   (dismiss)="handleDismiss()"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-alert',
+  imports: [CommonModule, ModusWcAlert],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-alert
+      [alertTitle]="alertTitle()"
+      [alertDescription]="alertDescription()"
+      [customClass]="className()"
+      [delay]="delay()"
+      [dismissible]="dismissible()"
+      [icon]="icon()"
+      [variant]="variant()"
+      [attr.role]="role()"
+      [attr.aria-label]="ariaLabel()"
+      (dismissClick)="handleDismissClick()"
+    >
+      <ng-content select="[slot='content']" slot="content" />
+      <ng-content select="[slot='button']" slot="button" />
+    </modus-wc-alert>
+  `,
+})
+export class ModusAlertComponent {
+  /** The title text displayed at the top of the alert. */
+  readonly alertTitle = input.required<string>();
+
+  /** Optional description text providing additional context for the alert. */
+  readonly alertDescription = input<string | undefined>();
+
+  /** Custom CSS class applied to the alert container for advanced styling needs. */
+  readonly className = input<string | undefined>();
+
+  /** Number of milliseconds before the alert automatically dismisses. */
+  readonly delay = input<number | undefined>();
+
+  /** Enables a close button to allow the user to dismiss the alert manually. */
+  readonly dismissible = input<boolean>(false);
+
+  /** The Modus icon name rendered alongside the alert content. */
+  readonly icon = input<string | undefined>();
+
+  /** Visual variant that controls the alert color and semantics. */
+  readonly variant = input<'error' | 'info' | 'success' | 'warning'>('info');
+
+  /** ARIA role for the alert element. */
+  readonly role = input<'alert' | 'log' | 'marquee' | 'status' | 'timer' | undefined>();
+
+  /** Accessible label describing the purpose of the alert when no visible text is provided. */
+  readonly ariaLabel = input<string | undefined>();
+
+  /** Callback executed after the alert dispatches its dismiss event. */
+  readonly onDismiss = input<(() => void) | undefined>();
+
+  /** Notifies consumers when the alert is dismissed. */
+  readonly dismiss = output<void>();
+
+  /** Handles the dismiss event emitted by the Modus Web Component. */
+  handleDismissClick(): void {
+    const callback = this.onDismiss();
+    if (callback) {
+      callback();
+    }
+    this.dismiss.emit();
+  }
+}

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

@@ -0,0 +1,262 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcAutocomplete } from '@trimble-oss/moduswebcomponents-angular';
+import type {
+  Components,
+  IAutocompleteItem,
+  IAutocompleteNoResults,
+  ModusSize,
+} from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusAutocompleteComponent}.
+ */
+export interface ModusAutocompleteProps {
+  /** Indicates that the autocomplete should have a border. */
+  bordered?: Components.ModusWcAutocomplete['bordered'];
+  /** Custom CSS class applied to the host element. */
+  className?: Components.ModusWcAutocomplete['customClass'];
+  /** The debounce timeout in milliseconds. Set to 0 to disable debouncing. */
+  debounceMs?: Components.ModusWcAutocomplete['debounceMs'];
+  /** Disables the autocomplete. */
+  disabled?: Components.ModusWcAutocomplete['disabled'];
+  /** Show the clear button within the input field. */
+  includeClear?: Components.ModusWcAutocomplete['includeClear'];
+  /** Show the search icon within the input field. */
+  includeSearch?: Components.ModusWcAutocomplete['includeSearch'];
+  /** The ID of the input element. */
+  inputId?: Components.ModusWcAutocomplete['inputId'];
+  /** Tab index applied to the input. */
+  inputTabIndex?: Components.ModusWcAutocomplete['inputTabIndex'];
+  /** The items to display in the menu. */
+  items?: IAutocompleteItem[];
+  /** Label text displayed above the autocomplete. */
+  label?: Components.ModusWcAutocomplete['label'];
+  /** Whether the menu should remain open after an item is selected. */
+  leaveMenuOpen?: Components.ModusWcAutocomplete['leaveMenuOpen'];
+  /** The minimum number of characters required to render the menu. */
+  minChars?: Components.ModusWcAutocomplete['minChars'];
+  /** Whether the input allows multiple items to be selected. */
+  multiSelect?: Components.ModusWcAutocomplete['multiSelect'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcAutocomplete['name'];
+  /** The content to display when no results are found. */
+  noResults?: IAutocompleteNoResults;
+  /** Placeholder text displayed when empty. */
+  placeholder?: Components.ModusWcAutocomplete['placeholder'];
+  /** Prevents editing when true. */
+  readOnly?: Components.ModusWcAutocomplete['readOnly'];
+  /** Marks the field as required. */
+  required?: Components.ModusWcAutocomplete['required'];
+  /** Whether to show the menu whenever the input has focus. */
+  showMenuOnFocus?: Components.ModusWcAutocomplete['showMenuOnFocus'];
+  /** The size of the autocomplete (input and menu). */
+  size?: ModusSize;
+  /** A spinner that appears when set to true. */
+  showSpinner?: Components.ModusWcAutocomplete['showSpinner'];
+  /** Current input value. */
+  value?: Components.ModusWcAutocomplete['value'];
+  /** Maximum number of chips to display. */
+  maxChips?: Components.ModusWcAutocomplete['maxChips'];
+  /** Custom item selection handler. */
+  customItemSelect?: Components.ModusWcAutocomplete['customItemSelect'];
+  /** Custom input change handler. */
+  customInputChange?: Components.ModusWcAutocomplete['customInputChange'];
+  /** Custom key down handler. */
+  customKeyDown?: Components.ModusWcAutocomplete['customKeyDown'];
+  /** Custom blur handler. */
+  customBlur?: Components.ModusWcAutocomplete['customBlur'];
+  /** Minimum width for the text input in pixels. */
+  minInputWidth?: Components.ModusWcAutocomplete['minInputWidth'];
+}
+
+/**
+ * Angular wrapper for the Modus autocomplete web component.
+ *
+ * The autocomplete component supports custom menu items and custom icons via slots:
+ * - `menu-items` slot: For custom menu item content
+ * - `custom-icon` slot: For custom icon in the input field
+ *
+ * @example
+ * ```html
+ * <modus-autocomplete
+ *   label="Search"
+ *   [items]="searchItems"
+ *   [value]="searchValue()"
+ *   (itemSelect)="handleItemSelect($event)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-autocomplete',
+  imports: [CommonModule, ModusWcAutocomplete],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-autocomplete
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [debounceMs]="debounceMs()"
+      [disabled]="disabled()"
+      [includeClear]="includeClear()"
+      [includeSearch]="includeSearch()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [items]="items()"
+      [label]="label()"
+      [leaveMenuOpen]="leaveMenuOpen()"
+      [minChars]="minChars()"
+      [multiSelect]="multiSelect()"
+      [name]="name()"
+      [noResults]="noResults()"
+      [placeholder]="placeholder()"
+      [readOnly]="readOnly()"
+      [required]="required()"
+      [showMenuOnFocus]="showMenuOnFocus()"
+      [size]="size()"
+      [showSpinner]="showSpinner()"
+      [value]="value()"
+      [maxChips]="maxChips()"
+      [customItemSelect]="customItemSelect()"
+      [customInputChange]="customInputChange()"
+      [customKeyDown]="customKeyDown()"
+      [customBlur]="customBlur()"
+      [minInputWidth]="minInputWidth()"
+      (chipRemove)="handleChipRemove($event)"
+      (chipsExpansionChange)="handleChipsExpansionChange($event)"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+      (itemSelect)="handleItemSelect($event)"
+    >
+      <ng-content select="[slot='menu-items']" slot="menu-items" />
+      <ng-content select="[slot='custom-icon']" slot="custom-icon" />
+    </modus-wc-autocomplete>
+  `,
+})
+export class ModusAutocompleteComponent {
+  /** Indicates that the autocomplete should have a border. */
+  readonly bordered = input<boolean | undefined>(true);
+
+  /** Custom CSS class applied to the host element. */
+  readonly className = input<string | undefined>();
+
+  /** The debounce timeout in milliseconds. Set to 0 to disable debouncing. */
+  readonly debounceMs = input<number | undefined>(300);
+
+  /** Disables the autocomplete. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Show the clear button within the input field. */
+  readonly includeClear = input<boolean | undefined>(false);
+
+  /** Show the search icon within the input field. */
+  readonly includeSearch = input<boolean | undefined>(false);
+
+  /** The ID of the input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** The items to display in the menu. */
+  readonly items = input<IAutocompleteItem[] | undefined>([]);
+
+  /** Label text displayed above the autocomplete. */
+  readonly label = input<string | undefined>();
+
+  /** Whether the menu should remain open after an item is selected. */
+  readonly leaveMenuOpen = input<boolean | undefined>(false);
+
+  /** The minimum number of characters required to render the menu. */
+  readonly minChars = input<number>(0);
+
+  /** Whether the input allows multiple items to be selected. */
+  readonly multiSelect = input<boolean | undefined>(false);
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | undefined>();
+
+  /** The content to display when no results are found. */
+  readonly noResults = input<IAutocompleteNoResults | undefined>();
+
+  /** Placeholder text displayed when empty. */
+  readonly placeholder = input<string>('');
+
+  /** Prevents editing when true. */
+  readonly readOnly = input<boolean | undefined>(false);
+
+  /** Marks the field as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Whether to show the menu whenever the input has focus. */
+  readonly showMenuOnFocus = input<boolean | undefined>(false);
+
+  /** The size of the autocomplete (input and menu). */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** A spinner that appears when set to true. */
+  readonly showSpinner = input<boolean | undefined>(false);
+
+  /** Current input value. */
+  readonly value = input<string>('');
+
+  /** Maximum number of chips to display. */
+  readonly maxChips = input<number | undefined>(-1);
+
+  /** Custom item selection handler. */
+  readonly customItemSelect = input<((item: IAutocompleteItem) => void) | undefined>();
+
+  /** Custom input change handler. */
+  readonly customInputChange = input<((value: string) => void) | undefined>();
+
+  /** Custom key down handler. */
+  readonly customKeyDown = input<((event: KeyboardEvent) => void) | undefined>();
+
+  /** Custom blur handler. */
+  readonly customBlur = input<((event: FocusEvent) => void) | undefined>();
+
+  /** Minimum width for the text input in pixels. */
+  readonly minInputWidth = input<number | undefined>(10);
+
+  /** Emits when a selected item chip is removed. */
+  readonly chipRemove = output<IAutocompleteItem>();
+
+  /** Emits when chips expansion state changes. */
+  readonly chipsExpansionChange = output<{ expanded: boolean }>();
+
+  /** Emits when the input loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the input value changes. */
+  readonly inputChange = output<Event>();
+
+  /** Emits when the input gains focus. */
+  readonly inputFocus = output<FocusEvent>();
+
+  /** Emits when a menu item is selected. */
+  readonly itemSelect = output<IAutocompleteItem>();
+
+  handleChipRemove(event: CustomEvent<IAutocompleteItem>): void {
+    this.chipRemove.emit(event.detail);
+  }
+
+  handleChipsExpansionChange(event: CustomEvent<{ expanded: boolean }>): void {
+    this.chipsExpansionChange.emit(event.detail);
+  }
+
+  handleBlur(event: CustomEvent<FocusEvent>): void {
+    this.inputBlur.emit(event.detail);
+  }
+
+  handleChange(event: CustomEvent<Event>): void {
+    this.inputChange.emit(event.detail);
+  }
+
+  handleFocus(event: CustomEvent<FocusEvent>): void {
+    this.inputFocus.emit(event.detail);
+  }
+
+  handleItemSelect(event: CustomEvent<IAutocompleteItem>): void {
+    this.itemSelect.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcAvatar } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, DaisySize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusAvatarComponent}.
+ */
+export interface ModusAvatarProps {
+  /** Accessible description for the avatar image or initials. */
+  alt: Components.ModusWcAvatar['alt'];
+  /** Optional CSS class applied to the host element. */
+  className?: Components.ModusWcAvatar['customClass'];
+  /** Optional image source displayed inside the avatar. */
+  imgSrc?: Components.ModusWcAvatar['imgSrc'];
+  /** Initials displayed when no image source is provided. */
+  initials?: Components.ModusWcAvatar['initials'];
+  /** Shape of the avatar container. */
+  shape?: Components.ModusWcAvatar['shape'];
+  /** Size token applied to the avatar. */
+  size?: DaisySize;
+}
+
+/**
+ * Angular wrapper for the Modus avatar web component.
+ *
+ * The avatar supports projecting arbitrary content and can display an image or initials.
+ * Use the `shape` and `size` inputs to control the appearance.
+ *
+ * @example
+ * ```html
+ * <modus-avatar
+ *   alt="Ada Lovelace"
+ *   imgSrc="/assets/ada.png"
+ *   shape="circle"
+ *   size="lg"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-avatar',
+  imports: [CommonModule, ModusWcAvatar],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-avatar
+      [alt]="alt()"
+      [customClass]="className()"
+      [imgSrc]="imgSrc()"
+      [initials]="initials()"
+      [shape]="shape()"
+      [size]="size()"
+    >
+      <ng-content />
+    </modus-wc-avatar>
+  `,
+})
+export class ModusAvatarComponent {
+  /** Accessible description for the avatar image or initials. */
+  readonly alt = input.required<string>();
+
+  /** Optional CSS class applied to the host element. */
+  readonly className = input<string | undefined>();
+
+  /** Optional image source displayed inside the avatar. */
+  readonly imgSrc = input<string>('');
+
+  /** Initials displayed when no image source is provided. */
+  readonly initials = input<string>('');
+
+  /** Shape of the avatar container. */
+  readonly shape = input<'circle' | 'square'>('circle');
+
+  /** Size token applied to the avatar. */
+  readonly size = input<DaisySize>('md');
+}

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

@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcBadge } from '@trimble-oss/moduswebcomponents-angular';
+
+/**
+ * Available color tokens for the Modus badge component.
+ */
+export type ModusBadgeColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'high-contrast'
+  | 'success'
+  | 'warning'
+  | 'danger';
+
+/**
+ * Badge sizing tokens supported by the underlying web component.
+ */
+export type ModusBadgeSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Render variants that control badge appearance.
+ */
+export type ModusBadgeVariant = 'counter' | 'filled' | 'outlined' | 'text';
+
+/**
+ * Input properties for the ModusBadgeComponent wrapper.
+ */
+export interface ModusBadgeProps {
+  /** Sets the badge color palette. */
+  color?: ModusBadgeColor;
+  /** Custom CSS class applied to the badge element. */
+  className?: string;
+  /** Controls the badge size token. */
+  size?: ModusBadgeSize;
+  /** Selects the badge visual variant. */
+  variant?: ModusBadgeVariant;
+  /** Accessible label describing the badge when used without text. */
+  ariaLabel?: string;
+}
+
+/**
+ * Angular wrapper for the Modus Web Component badge.
+ *
+ * Consumers can bind to the strongly typed inputs and project arbitrary content inside the badge slot.
+ *
+ * @example
+ * ```html
+ * <modus-badge color="success" variant="filled">Ready</modus-badge>
+ * ```
+ */
+@Component({
+  selector: 'modus-badge',
+  imports: [CommonModule, ModusWcBadge],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-badge
+      [color]="color()"
+      [customClass]="className()"
+      [size]="size()"
+      [variant]="variant()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </modus-wc-badge>
+  `,
+})
+export class ModusBadgeComponent {
+  /** Sets the badge color palette. */
+  readonly color = input<ModusBadgeColor>('primary');
+
+  /** Custom CSS class applied to the badge element. */
+  readonly className = input<string | undefined>();
+
+  /** Controls the badge size token. */
+  readonly size = input<ModusBadgeSize>('md');
+
+  /** Selects the badge visual variant. */
+  readonly variant = input<ModusBadgeVariant>('filled');
+
+  /** Accessible label describing the badge when used without text. */
+  readonly ariaLabel = input<string | undefined>();
+}

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

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcBreadcrumbs } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, IBreadcrumb, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusBreadcrumbsComponent}.
+ */
+export interface ModusBreadcrumbsProps {
+  /** CSS class applied to the breadcrumbs host element. */
+  className?: Components.ModusWcBreadcrumbs['customClass'];
+  /** Items describing each breadcrumb entry. */
+  items: IBreadcrumb[];
+  /** Size token applied to the breadcrumb links. */
+  size?: ModusSize;
+}
+
+/**
+ * Angular wrapper for the Modus breadcrumbs web component.
+ *
+ * Use this component to render navigational breadcrumbs with Modus styling.
+ * Each breadcrumb item can define text, href, icon, and click handlers.
+ *
+ * @example
+ * ```html
+ * <modus-breadcrumbs
+ *   [items]="[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Library', href: '/library' },
+ *     { label: 'Data', current: true }
+ *   ]"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-breadcrumbs',
+  imports: [CommonModule, ModusWcBreadcrumbs],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-breadcrumbs
+      [customClass]="className()"
+      [items]="items()"
+      [size]="size()"
+      (breadcrumbClick)="handleBreadcrumbClick($event)"
+    />
+  `,
+})
+export class ModusBreadcrumbsComponent {
+  /** CSS class applied to the breadcrumbs host element. */
+  readonly className = input<string | undefined>();
+
+  /** Items describing each breadcrumb entry. */
+  readonly items = input.required<IBreadcrumb[]>();
+
+  /** Size token applied to the breadcrumb links. */
+  readonly size = input<ModusSize | undefined>();
+
+  /** Emits when a breadcrumb item is activated. */
+  readonly breadcrumbClick = output<IBreadcrumb>();
+
+  /** Handles the breadcrumb click event from the web component. */
+  handleBreadcrumbClick(event: CustomEvent<IBreadcrumb>): void {
+    this.breadcrumbClick.emit(event.detail);
+  }
+}