@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcButtonGroup } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusButtonGroupComponent}.
+ */
+export interface ModusButtonGroupProps {
+  /** Variant applied to all buttons within the group. */
+  variant?: Components.ModusWcButtonGroup['variant'];
+  /** Color applied to all buttons within the group. */
+  color?: Components.ModusWcButtonGroup['color'];
+  /** Disable all buttons within the group. */
+  disabled?: Components.ModusWcButtonGroup['disabled'];
+  /** Layout orientation for the group. */
+  orientation?: Components.ModusWcButtonGroup['orientation'];
+  /** Selection behavior for the group. */
+  selectionType?: Components.ModusWcButtonGroup['selectionType'];
+  /** Accessible label for the group. */
+  ariaLabel?: string;
+}
+
+/**
+ * Angular wrapper for the Modus button group web component.
+ */
+@Component({
+  selector: 'modus-button-group',
+  imports: [CommonModule, ModusWcButtonGroup],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-button-group
+      [variant]="variant()"
+      [color]="color()"
+      [disabled]="disabled()"
+      [orientation]="orientation()"
+      [selectionType]="selectionType()"
+      [attr.aria-label]="ariaLabel()"
+      (buttonGroupClick)="handleButtonGroupClick($event)"
+      (buttonSelectionChange)="handleButtonSelectionChange($event)"
+    >
+      <ng-content />
+    </modus-wc-button-group>
+  `,
+})
+export class ModusButtonGroupComponent {
+  /** Variant applied to all buttons within the group. */
+  readonly variant = input<Components.ModusWcButtonGroup['variant'] | undefined>('outlined');
+
+  /** Color applied to all buttons within the group. */
+  readonly color = input<Components.ModusWcButtonGroup['color'] | undefined>();
+
+  /** Disable all buttons within the group. */
+  readonly disabled = input<Components.ModusWcButtonGroup['disabled'] | undefined>(false);
+
+  /** Layout orientation for the group. */
+  readonly orientation = input<Components.ModusWcButtonGroup['orientation'] | undefined>('horizontal');
+
+  /** Selection behavior for the group. */
+  readonly selectionType = input<Components.ModusWcButtonGroup['selectionType'] | undefined>('default');
+
+  /** Accessible label for the group. */
+  readonly ariaLabel = input<string | undefined>();
+
+  /** Emits when a button in the group is clicked. */
+  readonly buttonGroupClick = output<{ button: HTMLElement; isSelected: boolean }>();
+
+  /** Emits when the group selection changes. */
+  readonly buttonSelectionChange = output<{ selectedButtons: HTMLElement[] }>();
+
+  handleButtonGroupClick(
+    event: CustomEvent<{ button: HTMLElement; isSelected: boolean }>,
+  ): void {
+    this.buttonGroupClick.emit(event.detail);
+  }
+
+  handleButtonSelectionChange(
+    event: CustomEvent<{ selectedButtons: HTMLElement[] }>,
+  ): void {
+    this.buttonSelectionChange.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,292 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcButton } from '@trimble-oss/moduswebcomponents-angular';
+
+/**
+ * Button color variant
+ */
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+
+/**
+ * Button style variant
+ */
+export type ButtonVariant = 'filled' | 'outlined' | 'borderless';
+
+/**
+ * Button size
+ */
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Button shape
+ */
+export type ButtonShape = 'rectangle' | 'square' | 'circle';
+
+/**
+ * Icon position relative to button text
+ */
+export type IconPosition = 'left' | 'right' | 'only';
+
+/**
+ * Props for the ModusButton component
+ */
+export interface ModusButtonProps {
+  /** The color of the button */
+  color?: ButtonColor;
+  /** The variant of the button */
+  variant?: ButtonVariant;
+  /** The size of the button */
+  size?: ButtonSize;
+  /** The shape of the button */
+  shape?: ButtonShape;
+  /** Whether the button is disabled */
+  disabled?: boolean;
+  /** Whether the button should take up the full width */
+  fullWidth?: boolean;
+  /** Whether the button is pressed (for toggle buttons) */
+  pressed?: boolean;
+  /** The type of the button */
+  type?: 'button' | 'submit' | 'reset';
+  /** An icon to display in the button */
+  icon?: string;
+  /** The position of the icon relative to the button text */
+  iconPosition?: IconPosition;
+  /** Icon size using Tailwind text utilities. If not provided, size is determined by button size and icon position */
+  iconSize?:
+    | 'text-2xs'
+    | 'text-xs'
+    | 'text-sm'
+    | 'text-base'
+    | 'text-lg'
+    | 'text-xl'
+    | 'text-2xl'
+    | 'text-3xl'
+    | 'text-4xl';
+  /** The ARIA label for the button */
+  ariaLabel?: string;
+  /** A callback function to handle button clicks */
+  onButtonClick?: () => void;
+  /** A custom CSS class to apply to the button */
+  className?: string;
+}
+
+/**
+ * Renders a Modus button component with full customization support.
+ *
+ * @example
+ * ```html
+ * <!-- Basic button -->
+ * <modus-button>Click me</modus-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Icon button with custom styling -->
+ * <modus-button
+ *   icon="add"
+ *   iconPosition="left"
+ *   color="primary"
+ *   size="lg"
+ *   (buttonClick)="handleClick()"
+ * >
+ *   Add Item
+ * </modus-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Icon-only button with accessibility -->
+ * <modus-button
+ *   icon="settings"
+ *   iconPosition="only"
+ *   ariaLabel="Open settings"
+ *   (buttonClick)="openSettings()"
+ * ></modus-button>
+ * ```
+ */
+@Component({
+  selector: 'modus-button',
+  standalone: true,
+  imports: [CommonModule, ModusWcButton],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-button
+      [color]="color()"
+      [variant]="variant()"
+      [size]="size()"
+      [shape]="shape()"
+      [disabled]="disabled()"
+      [fullWidth]="fullWidth()"
+      [pressed]="pressed()"
+      [type]="type()"
+      [customClass]="className()"
+      [attr.aria-label]="getAriaLabel()"
+      (buttonClick)="handleButtonClick($event)"
+    >
+      @if (icon() && iconPosition() === 'left') {
+      <i class="modus-icons {{ getIconSize() }} mr-2">{{ icon() }}</i>
+      }
+      <ng-content></ng-content>
+      @if (icon() && iconPosition() === 'right') {
+      <i class="modus-icons {{ getIconSize() }} ml-2">{{ icon() }}</i>
+      } @if (icon() && iconPosition() === 'only') {
+      <i class="modus-icons {{ getIconSize() }}">{{ icon() }}</i>
+      }
+    </modus-wc-button>
+  `,
+})
+export class ModusButtonComponent {
+  /** The color of the button */
+  readonly color = input<ButtonColor>('primary');
+
+  /** The variant of the button */
+  readonly variant = input<ButtonVariant>('filled');
+
+  /** The size of the button */
+  readonly size = input<ButtonSize>('md');
+
+  /** The shape of the button */
+  readonly shape = input<ButtonShape>('rectangle');
+
+  /** Whether the button is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Whether the button should take up the full width */
+  readonly fullWidth = input<boolean>(false);
+
+  /** Whether the button is pressed (for toggle buttons) */
+  readonly pressed = input<boolean>(false);
+
+  /** The type of the button */
+  readonly type = input<'button' | 'submit' | 'reset'>('button');
+
+  /** An icon to display in the button */
+  readonly icon = input<string | undefined>();
+
+  /** The position of the icon relative to the button text */
+  readonly iconPosition = input<IconPosition>('left');
+
+  /** Icon size using Tailwind text utilities. If not provided, size is determined by button size and icon position */
+  readonly iconSize = input<
+    | 'text-2xs'
+    | 'text-xs'
+    | 'text-sm'
+    | 'text-base'
+    | 'text-lg'
+    | 'text-xl'
+    | 'text-2xl'
+    | 'text-3xl'
+    | 'text-4xl'
+  >();
+
+  /** The ARIA label for the button */
+  readonly ariaLabel = input<string | undefined>();
+
+  /** A custom CSS class to apply to the button */
+  readonly className = input<string | undefined>();
+
+  /** Callback function for button clicks (optional) */
+  readonly onButtonClick = input<(() => void) | undefined>();
+
+  /** Event emitter for button clicks */
+  readonly buttonClick = output<MouseEvent | KeyboardEvent>();
+
+  /**
+   * Handles button click events from the Modus Web Component
+   *
+   * Emits the event to parent components and calls the optional callback
+   *
+   * @param event - The click or keyboard event from the button (from Stencil CustomEvent)
+   */
+  handleButtonClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    // Stop event propagation to prevent double-firing
+    event.stopPropagation();
+
+    if (!this.disabled()) {
+      // Extract the actual event from CustomEvent detail
+      const actualEvent = event.detail;
+
+      // Emit Angular event
+      this.buttonClick.emit(actualEvent);
+
+      // Call React-like callback if provided
+      const callback = this.onButtonClick();
+      if (callback) {
+        callback();
+      }
+    }
+  }
+
+  /**
+   * Determines the appropriate icon size based on button size, icon position, and explicit iconSize input.
+   *
+   * @returns The Tailwind text utility class for icon sizing
+   */
+  getIconSize(): string {
+    // If iconSize is explicitly provided, use it
+    const explicitSize = this.iconSize();
+    if (explicitSize) {
+      return explicitSize;
+    }
+
+    // Determine size based on button size and icon position
+    const buttonSize = this.size();
+    const position = this.iconPosition();
+
+    // Icon-only buttons are generally larger
+    if (position === 'only') {
+      switch (buttonSize) {
+        case 'xs':
+          return 'text-sm'; // 12px
+        case 'sm':
+          return 'text-base'; // 14px
+        case 'md':
+          return 'text-xl'; // 18px (current default)
+        case 'lg':
+          return 'text-2xl'; // 20px
+        default:
+          return 'text-xl'; // 18px default
+      }
+    }
+
+    // Icons with text (left/right position)
+    switch (buttonSize) {
+      case 'xs':
+        return 'text-xs'; // 10px
+      case 'sm':
+        return 'text-sm'; // 12px
+      case 'md':
+        return 'text-lg'; // 16px (current default)
+      case 'lg':
+        return 'text-xl'; // 18px
+      default:
+        return 'text-lg'; // 16px default
+    }
+  }
+
+  /**
+   * Generates appropriate ARIA label for accessibility.
+   *
+   * For icon-only buttons, ensures proper accessibility by returning
+   * the provided ariaLabel or falling back to undefined.
+   *
+   * @returns The appropriate ARIA label or undefined
+   */
+  getAriaLabel(): string | undefined {
+    const ariaLabelValue = this.ariaLabel();
+    if (ariaLabelValue) {
+      return ariaLabelValue;
+    }
+
+    // For icon-only buttons, ariaLabel should be provided
+    // If not provided, the component will rely on default ARIA behavior
+    if (this.iconPosition() === 'only' && !ariaLabelValue) {
+      // Note: In a production app, you might want to extract text content
+      // from ng-content as a fallback, but that requires ViewChild and
+      // content projection which is more complex
+      return undefined;
+    }
+
+    return undefined;
+  }
+}

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

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcCard } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusCardComponent}.
+ */
+export interface ModusCardProps {
+  /** Applies background coverage to figures provided in the header slot. */
+  backgroundFigure?: Components.ModusWcCard['backgroundFigure'];
+  /** Enables the bordered card style. */
+  bordered?: Components.ModusWcCard['bordered'];
+  /** Optional CSS class applied to the card. */
+  className?: Components.ModusWcCard['customClass'];
+  /** Layout orientation for the card content. */
+  layout?: Components.ModusWcCard['layout'];
+  /** Controls the internal padding density. */
+  padding?: Components.ModusWcCard['padding'];
+}
+
+/**
+ * Angular wrapper for the Modus card web component.
+ *
+ * Cards provide a flexible container for grouping related content with optional
+ * header and footer slots.
+ *
+ * @example
+ * ```html
+ * <modus-card layout="vertical" padding="normal">
+ *   <h3 slot="header">Project Overview</h3>
+ *   <p>Important summary information lives here.</p>
+ *   <div slot="footer">Updated 5 minutes ago</div>
+ * </modus-card>
+ * ```
+ */
+@Component({
+  selector: 'modus-card',
+  imports: [CommonModule, ModusWcCard],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-card
+      [backgroundFigure]="backgroundFigure()"
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [layout]="layout()"
+      [padding]="padding()"
+    >
+      <ng-content select="[slot='header']" slot="header" />
+      <ng-content select="[slot='title']" slot="title" />
+      <ng-content select="[slot='subtitle']" slot="subtitle" />
+      <ng-content />
+      <ng-content select="[slot='actions']" slot="actions" />
+      <ng-content select="[slot='footer']" slot="footer" />
+    </modus-wc-card>
+  `,
+})
+export class ModusCardComponent {
+  /** Applies background coverage to figures provided in the header slot. */
+  readonly backgroundFigure = input<boolean | undefined>();
+
+  /** Enables the bordered card style. */
+  readonly bordered = input<boolean | undefined>();
+
+  /** Optional CSS class applied to the card. */
+  readonly className = input<string | undefined>();
+
+  /** Layout orientation for the card content. */
+  readonly layout = input<'vertical' | 'horizontal' | undefined>('vertical');
+
+  /** Controls the internal padding density. */
+  readonly padding = input<'normal' | 'compact' | undefined>('normal');
+}

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

@@ -0,0 +1,117 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcCheckbox } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusCheckboxComponent}.
+ */
+export interface ModusCheckboxProps {
+  /** Custom CSS class applied to the checkbox input. */
+  className?: Components.ModusWcCheckbox['customClass'];
+  /** Whether the checkbox is disabled. */
+  disabled?: Components.ModusWcCheckbox['disabled'];
+  /** Indeterminate visual state for tri-state checkboxes. */
+  indeterminate?: Components.ModusWcCheckbox['indeterminate'];
+  /** Identifier applied to the checkbox input element. */
+  inputId?: Components.ModusWcCheckbox['inputId'];
+  /** Tab index applied to the checkbox input. */
+  inputTabIndex?: Components.ModusWcCheckbox['inputTabIndex'];
+  /** Optional label rendered alongside the checkbox. */
+  label?: Components.ModusWcCheckbox['label'];
+  /** Name attribute submitted in form payloads. */
+  name?: Components.ModusWcCheckbox['name'];
+  /** Marks the checkbox as required. */
+  required?: Components.ModusWcCheckbox['required'];
+  /** Size token controlling checkbox dimensions. */
+  size?: ModusSize;
+  /** Bound value indicating whether the checkbox is selected. */
+  value?: Components.ModusWcCheckbox['value'];
+}
+
+/**
+ * Angular wrapper for the Modus checkbox web component.
+ *
+ * @example
+ * ```html
+ * <modus-checkbox
+ *   label="Accept terms"
+ *   [value]="acceptTerms()"
+ *   (valueChange)="acceptTerms.set($event)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-checkbox',
+  imports: [CommonModule, ModusWcCheckbox],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-checkbox
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [indeterminate]="indeterminate()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [label]="label()"
+      [name]="name()"
+      [required]="required()"
+      [size]="size()"
+      [value]="value()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+    />
+  `,
+})
+export class ModusCheckboxComponent {
+  /** Custom CSS class applied to the checkbox input. */
+  readonly className = input<string | undefined>();
+
+  /** Whether the checkbox is disabled. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Indeterminate visual state for tri-state checkboxes. */
+  readonly indeterminate = input<boolean | undefined>(false);
+
+  /** Identifier applied to the checkbox input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the checkbox input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Optional label rendered alongside the checkbox. */
+  readonly label = input<string | undefined>();
+
+  /** Name attribute submitted in form payloads. */
+  readonly name = input<string | undefined>('');
+
+  /** Marks the checkbox as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Size token controlling checkbox dimensions. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Bound value indicating whether the checkbox is selected. */
+  readonly value = input<boolean | undefined>(false);
+
+  /** Emits when the checkbox loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the checkbox value changes. */
+  readonly inputChange = output<InputEvent>();
+
+  /** Emits when the checkbox gains focus. */
+  readonly inputFocus = output<FocusEvent>();
+
+  handleBlur(event: CustomEvent<FocusEvent>): void {
+    this.inputBlur.emit(event.detail);
+  }
+
+  handleChange(event: CustomEvent<InputEvent>): void {
+    this.inputChange.emit(event.detail);
+  }
+
+  handleFocus(event: CustomEvent<FocusEvent>): void {
+    this.inputFocus.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,97 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcChip } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusChipComponent}.
+ */
+export interface ModusChipProps {
+  /** Marks the chip as active. */
+  active?: Components.ModusWcChip['active'];
+  /** Custom CSS class applied to the chip wrapper. */
+  className?: Components.ModusWcChip['customClass'];
+  /** Disables user interaction. */
+  disabled?: Components.ModusWcChip['disabled'];
+  /** Highlights the chip error state. */
+  hasError?: Components.ModusWcChip['hasError'];
+  /** Text label rendered inside the chip. */
+  label?: Components.ModusWcChip['label'];
+  /** Visual shape of the chip. */
+  shape?: Components.ModusWcChip['shape'];
+  /** Displays the remove icon button. */
+  showRemove?: Components.ModusWcChip['showRemove'];
+  /** Size token controlling chip dimensions. */
+  size?: ModusSize;
+  /** Visual variant controlling background and outline. */
+  variant?: Components.ModusWcChip['variant'];
+}
+
+/**
+ * Angular wrapper for the Modus chip web component.
+ *
+ * Chips are compact elements for displaying selections or filters. Use the
+ * `(chipClick)` and `(chipRemove)` outputs to respond to user interaction.
+ */
+@Component({
+  selector: 'modus-chip',
+  imports: [CommonModule, ModusWcChip],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-chip
+      [active]="active()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [hasError]="hasError()"
+      [label]="label()"
+      [shape]="shape()"
+      [showRemove]="showRemove()"
+      [size]="size()"
+      [variant]="variant()"
+      (chipClick)="handleChipClick($event)"
+      (chipRemove)="handleChipRemove($event)"
+    />
+  `,
+})
+export class ModusChipComponent {
+  /** Marks the chip as active. */
+  readonly active = input<boolean | undefined>(false);
+
+  /** Custom CSS class applied to the chip wrapper. */
+  readonly className = input<string | undefined>();
+
+  /** Disables user interaction. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Highlights the chip error state. */
+  readonly hasError = input<boolean | undefined>(false);
+
+  /** Text label rendered inside the chip. */
+  readonly label = input<string | undefined>();
+
+  /** Visual shape of the chip. */
+  readonly shape = input<'rectangle' | 'circle' | undefined>('rectangle');
+
+  /** Displays the remove icon button. */
+  readonly showRemove = input<boolean | undefined>(false);
+
+  /** Size token controlling chip dimensions. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Visual variant controlling background and outline. */
+  readonly variant = input<'filled' | 'outline' | undefined>('filled');
+
+  /** Emits when the chip is clicked. */
+  readonly chipClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the remove icon is activated. */
+  readonly chipRemove = output<MouseEvent | KeyboardEvent>();
+
+  handleChipClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.chipClick.emit(event.detail);
+  }
+
+  handleChipRemove(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.chipRemove.emit(event.detail);
+  }
+}