@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,168 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcTextarea } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, IInputFeedbackProp, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusTextareaComponent}.
+ */
+export interface ModusTextareaProps {
+  /** Controls automatic correction in inputted text. */
+  autoCorrect?: Components.ModusWcTextarea['autoCorrect'];
+  /** Indicates that the input should have a border. */
+  bordered?: Components.ModusWcTextarea['bordered'];
+  /** Custom CSS class applied to the textarea. */
+  className?: Components.ModusWcTextarea['customClass'];
+  /** Disables the textarea. */
+  disabled?: Components.ModusWcTextarea['disabled'];
+  /** A hint to the browser for which enter key to display. */
+  enterkeyhint?: Components.ModusWcTextarea['enterkeyhint'];
+  /** Feedback configuration rendered below the textarea. */
+  feedback?: IInputFeedbackProp;
+  /** Identifier applied to the textarea element. */
+  inputId?: Components.ModusWcTextarea['inputId'];
+  /** Tab index applied to the textarea. */
+  inputTabIndex?: Components.ModusWcTextarea['inputTabIndex'];
+  /** Label text displayed above the textarea. */
+  label?: Components.ModusWcTextarea['label'];
+  /** Maximum number of characters allowed. */
+  maxLength?: Components.ModusWcTextarea['maxLength'];
+  /** Minimum number of characters required. */
+  minLength?: Components.ModusWcTextarea['minLength'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcTextarea['name'];
+  /** Placeholder text displayed when empty. */
+  placeholder?: Components.ModusWcTextarea['placeholder'];
+  /** Prevents editing when true. */
+  readonly?: Components.ModusWcTextarea['readonly'];
+  /** Marks the field as required. */
+  required?: Components.ModusWcTextarea['required'];
+  /** Number of visible text lines. */
+  rows?: Components.ModusWcTextarea['rows'];
+  /** Control size token. */
+  size?: ModusSize;
+  /** Current textarea value. */
+  value?: Components.ModusWcTextarea['value'];
+}
+
+/**
+ * Angular wrapper for the Modus textarea web component.
+ *
+ * @example
+ * ```html
+ * <modus-textarea
+ *   label="Comments"
+ *   [rows]="4"
+ *   [value]="comments()"
+ *   (inputChange)="comments.set($event.target.value)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-textarea',
+  imports: [CommonModule, ModusWcTextarea],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-textarea
+      [autoCorrect]="autoCorrect()"
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [enterkeyhint]="enterkeyhint()"
+      [feedback]="feedback()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [label]="label()"
+      [maxLength]="maxLength()"
+      [minLength]="minLength()"
+      [name]="name()"
+      [placeholder]="placeholder()"
+      [readonly]="readonly()"
+      [required]="required()"
+      [rows]="rows()"
+      [size]="size()"
+      [value]="value()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+    />
+  `,
+})
+export class ModusTextareaComponent {
+  /** Controls automatic correction in inputted text. */
+  readonly autoCorrect = input<'on' | 'off' | undefined>();
+
+  /** Indicates that the input should have a border. */
+  readonly bordered = input<boolean | undefined>(true);
+
+  /** Custom CSS class applied to the textarea. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the textarea. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** A hint to the browser for which enter key to display. */
+  readonly enterkeyhint = input<
+    'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined
+  >();
+
+  /** Feedback configuration rendered below the textarea. */
+  readonly feedback = input<IInputFeedbackProp | undefined>();
+
+  /** Identifier applied to the textarea element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the textarea. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Label text displayed above the textarea. */
+  readonly label = input<string | undefined>();
+
+  /** Maximum number of characters allowed. */
+  readonly maxLength = input<number | undefined>();
+
+  /** Minimum number of characters required. */
+  readonly minLength = input<number | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | 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);
+
+  /** Number of visible text lines. */
+  readonly rows = input<number | undefined>();
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Current textarea value. */
+  readonly value = input<string>('');
+
+  /** Emits when the textarea loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the value changes. */
+  readonly inputChange = output<InputEvent>();
+
+  /** Emits when the textarea 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-theme-switcher.component.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcThemeSwitcher } from '@trimble-oss/moduswebcomponents-angular';
+import { ThemeMode, ThemeName, ThemeConfig } from '../services/theme.service';
+
+/**
+ * Angular wrapper component for Modus Theme Switcher.
+ *
+ * A component that allows users to toggle between light and dark themes.
+ */
+@Component({
+  selector: 'modus-theme-switcher',
+  standalone: true,
+  imports: [CommonModule, ModusWcThemeSwitcher],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-theme-switcher
+      [customClass]="className()"
+      [attr.aria-label]="ariaLabel()"
+      (themeChange)="onThemeChange($event)"
+    ></modus-wc-theme-switcher>
+  `,
+})
+export class ModusThemeSwitcherComponent {
+  /** Custom CSS class applied to the theme switcher element. */
+  readonly className = input<string | undefined>();
+
+  /** Accessible label for the theme switcher */
+  readonly ariaLabel = input<string | undefined>('Toggle theme');
+
+  /** Event emitted when theme is changed */
+  readonly themeChange = output<ThemeConfig>();
+
+  onThemeChange(event: Event): void {
+    const customEvent = event as CustomEvent<{ theme: string; mode: string }>;
+    if (customEvent && customEvent.detail) {
+      // The event detail contains { theme, mode }
+      const config: ThemeConfig = {
+        theme: customEvent.detail.theme as ThemeName,
+        mode: customEvent.detail.mode as ThemeMode,
+      };
+      this.themeChange.emit(config);
+    }
+  }
+}

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

@@ -0,0 +1,172 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcTimeInput } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, IInputFeedbackProp, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusTimeInputComponent}.
+ */
+export interface ModusTimeInputProps {
+  /** Hint for form autofill feature. */
+  autoComplete?: Components.ModusWcTimeInput['autoComplete'];
+  /** Indicates that the input should have a border. */
+  bordered?: Components.ModusWcTimeInput['bordered'];
+  /** Custom CSS class applied to the input. */
+  className?: Components.ModusWcTimeInput['customClass'];
+  /** The options to display in the time input dropdown. */
+  datalistOptions?: Components.ModusWcTimeInput['datalistOptions'];
+  /** Whether the form control is disabled. */
+  disabled?: Components.ModusWcTimeInput['disabled'];
+  /** Feedback configuration rendered below the input. */
+  feedback?: IInputFeedbackProp;
+  /** The ID of the input element. */
+  inputId?: Components.ModusWcTimeInput['inputId'];
+  /** Tab index applied to the input. */
+  inputTabIndex?: Components.ModusWcTimeInput['inputTabIndex'];
+  /** ID of a `<datalist>` element that contains pre-defined time options. */
+  datalistId?: Components.ModusWcTimeInput['datalistId'];
+  /** Label text displayed above the input. */
+  label?: Components.ModusWcTimeInput['label'];
+  /** Maximum value. Format: `HH:mm`, `HH:mm:ss`. */
+  max?: Components.ModusWcTimeInput['max'];
+  /** Minimum value. Format: `HH:mm`, `HH:mm:ss`. */
+  min?: Components.ModusWcTimeInput['min'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcTimeInput['name'];
+  /** Prevents editing when true. */
+  readOnly?: Components.ModusWcTimeInput['readOnly'];
+  /** Marks the field as required. */
+  required?: Components.ModusWcTimeInput['required'];
+  /** Displays the time input format as `HH:mm:ss` if `true`. */
+  showSeconds?: Components.ModusWcTimeInput['showSeconds'];
+  /** Control size token. */
+  size?: ModusSize;
+  /** Specifies the granularity that the `value` must adhere to. */
+  step?: Components.ModusWcTimeInput['step'];
+  /** Current time value. Format: `HH:mm` or `HH:mm:ss`. */
+  value?: Components.ModusWcTimeInput['value'];
+}
+
+/**
+ * Angular wrapper for the Modus time input web component.
+ *
+ * @example
+ * ```html
+ * <modus-time-input
+ *   label="Start time"
+ *   [value]="startTime()"
+ *   (inputChange)="startTime.set($event.target.value)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-time-input',
+  imports: [CommonModule, ModusWcTimeInput],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-time-input
+      [autoComplete]="autoComplete()"
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [datalistOptions]="datalistOptions()"
+      [disabled]="disabled()"
+      [feedback]="feedback()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [datalistId]="datalistId()"
+      [label]="label()"
+      [max]="max()"
+      [min]="min()"
+      [name]="name()"
+      [readOnly]="readOnly()"
+      [required]="required()"
+      [showSeconds]="showSeconds()"
+      [size]="size()"
+      [step]="step()"
+      [value]="value()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+    />
+  `,
+})
+export class ModusTimeInputComponent {
+  /** Hint for form autofill feature. */
+  readonly autoComplete = input<'on' | 'off' | undefined>();
+
+  /** Indicates that the input should have a border. */
+  readonly bordered = input<boolean | undefined>(true);
+
+  /** Custom CSS class applied to the input. */
+  readonly className = input<string | undefined>();
+
+  /** The options to display in the time input dropdown. */
+  readonly datalistOptions = input<string[]>([]);
+
+  /** Whether the form control is disabled. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Feedback configuration rendered below the input. */
+  readonly feedback = input<IInputFeedbackProp | undefined>();
+
+  /** The ID of the input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** ID of a `<datalist>` element that contains pre-defined time options. */
+  readonly datalistId = input<string | undefined>();
+
+  /** Label text displayed above the input. */
+  readonly label = input<string | undefined>();
+
+  /** Maximum value. Format: `HH:mm`, `HH:mm:ss`. */
+  readonly max = input<string | undefined>();
+
+  /** Minimum value. Format: `HH:mm`, `HH:mm:ss`. */
+  readonly min = input<string | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | undefined>();
+
+  /** Prevents editing when true. */
+  readonly readOnly = input<boolean | undefined>(false);
+
+  /** Marks the field as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Displays the time input format as `HH:mm:ss` if `true`. */
+  readonly showSeconds = input<boolean | undefined>(false);
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Specifies the granularity that the `value` must adhere to. */
+  readonly step = input<number | undefined>();
+
+  /** Current time value. Format: `HH:mm` or `HH:mm:ss`. */
+  readonly value = input<string>('');
+
+  /** Emits when the input loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the value changes. */
+  readonly inputChange = output<Event>();
+
+  /** Emits when the input gains focus. */
+  readonly inputFocus = output<FocusEvent>();
+
+  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);
+  }
+}
+

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

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcToast } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Toast position in the parent container.
+ */
+export type ToastPosition =
+  | 'top-start'
+  | 'top-center'
+  | 'top-end'
+  | 'middle-start'
+  | 'middle-center'
+  | 'middle-end'
+  | 'bottom-start'
+  | 'bottom-center'
+  | 'bottom-end';
+
+/**
+ * Props supported by the {@link ModusToastComponent}.
+ */
+export interface ModusToastProps {
+  /** Custom CSS class applied to the toast element. */
+  className?: Components.ModusWcToast['customClass'];
+  /** Time taken to dismiss the toast in milliseconds. */
+  delay?: Components.ModusWcToast['delay'];
+  /** The position of the toast in the parent container. */
+  position?: ToastPosition;
+}
+
+/**
+ * Angular wrapper for the Modus toast web component.
+ *
+ * The toast component supports projecting arbitrary content inside the toast slot.
+ *
+ * @example
+ * ```html
+ * <modus-toast position="top-end" [delay]="5000">
+ *   <div>Toast message content</div>
+ * </modus-toast>
+ * ```
+ */
+@Component({
+  selector: 'modus-toast',
+  imports: [CommonModule, ModusWcToast],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-toast [customClass]="className()" [delay]="delay()" [position]="position()">
+      <ng-content />
+    </modus-wc-toast>
+  `,
+})
+export class ModusToastComponent {
+  /** Custom CSS class applied to the toast element. */
+  readonly className = input<string | undefined>();
+
+  /** Time taken to dismiss the toast in milliseconds. */
+  readonly delay = input<number | undefined>();
+
+  /** The position of the toast in the parent container. */
+  readonly position = input<ToastPosition | undefined>('top-end');
+}

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

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcToolbar } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusToolbarComponent}.
+ */
+export interface ModusToolbarProps {
+  /** Custom CSS class applied to the toolbar element. */
+  className?: Components.ModusWcToolbar['customClass'];
+}
+
+/**
+ * Angular wrapper for the Modus toolbar web component.
+ *
+ * Used to organize content across the entire page with start, center, and end slots.
+ *
+ * @example
+ * ```html
+ * <modus-toolbar>
+ *   <button slot="start">Start</button>
+ *   <div slot="center">Center Content</div>
+ *   <button slot="end">End</button>
+ * </modus-toolbar>
+ * ```
+ */
+@Component({
+  selector: 'modus-toolbar',
+  imports: [CommonModule, ModusWcToolbar],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-toolbar [customClass]="className()">
+      <ng-content select="[slot='start']" slot="start" />
+      <ng-content select="[slot='center']" slot="center" />
+      <ng-content select="[slot='end']" slot="end" />
+    </modus-wc-toolbar>
+  `,
+})
+export class ModusToolbarComponent {
+  /** Custom CSS class applied to the toolbar element. */
+  readonly className = input<string | undefined>();
+}

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

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcTooltip } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusTooltipComponent}.
+ */
+export interface ModusTooltipProps {
+  /** The text content of the tooltip. */
+  content?: Components.ModusWcTooltip['content'];
+  /** Custom CSS class applied to the tooltip element. */
+  className?: Components.ModusWcTooltip['customClass'];
+  /** Disables displaying the tooltip on hover. */
+  disabled?: Components.ModusWcTooltip['disabled'];
+  /** Use this attribute to force the tooltip to remain open. */
+  forceOpen?: Components.ModusWcTooltip['forceOpen'];
+  /** The ID of the tooltip element. */
+  tooltipId?: Components.ModusWcTooltip['tooltipId'];
+  /** The position that the tooltip will render in relation to the element. */
+  position?: Components.ModusWcTooltip['position'];
+}
+
+/**
+ * Angular wrapper for the Modus tooltip web component.
+ *
+ * The tooltip can be dismissed by pressing the Escape key when hovering over it.
+ * When forceOpen is enabled, the tooltip will remain open and can only be closed
+ * by setting forceOpen to false.
+ *
+ * @example
+ * ```html
+ * <modus-tooltip content="This is a tooltip" position="top">
+ *   <button>Hover me</button>
+ * </modus-tooltip>
+ * ```
+ */
+@Component({
+  selector: 'modus-tooltip',
+  imports: [CommonModule, ModusWcTooltip],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-tooltip
+      [content]="content()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [forceOpen]="forceOpen()"
+      [tooltipId]="tooltipId()"
+      [position]="position()"
+      (dismissEscape)="handleDismissEscape()"
+    >
+      <ng-content />
+    </modus-wc-tooltip>
+  `,
+})
+export class ModusTooltipComponent {
+  /** The text content of the tooltip. */
+  readonly content = input<string>('');
+
+  /** Custom CSS class applied to the tooltip element. */
+  readonly className = input<string | undefined>();
+
+  /** Disables displaying the tooltip on hover. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Use this attribute to force the tooltip to remain open. */
+  readonly forceOpen = input<boolean | undefined>();
+
+  /** The ID of the tooltip element. */
+  readonly tooltipId = input<string | undefined>();
+
+  /** The position that the tooltip will render in relation to the element. */
+  readonly position = input<'auto' | 'top' | 'right' | 'bottom' | 'left' | undefined>('auto');
+
+  /** Emits when the tooltip is dismissed via Escape key. */
+  readonly dismissEscape = output<void>();
+
+  /** Handles tooltip dismissal via Escape key. */
+  handleDismissEscape(): void {
+    this.dismissEscape.emit();
+  }
+}
+

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

@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcTypography } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Typography hierarchy options.
+ */
+export type TypographyHierarchy = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+
+/**
+ * Typography size options.
+ */
+export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+/**
+ * Typography weight options.
+ */
+export type TypographyWeight = 'light' | 'normal' | 'semibold' | 'bold';
+
+/**
+ * Props supported by the {@link ModusTypographyComponent}.
+ */
+export interface ModusTypographyProps {
+  /** Custom CSS class applied to the typography element. */
+  className?: Components.ModusWcTypography['customClass'];
+  /** The hierarchy of the typography component. */
+  hierarchy?: TypographyHierarchy;
+  /** The size of the font. */
+  size?: TypographySize;
+  /** The weight of the text. */
+  weight?: TypographyWeight;
+}
+
+/**
+ * Angular wrapper for the Modus typography web component.
+ *
+ * Used to render text with different sizes, hierarchy, and weights.
+ *
+ * Note: When using heading elements (h1-h6), the default heading CSS styling can be accessed
+ * without modifying the default size (size="md") and weight (weight="normal") properties.
+ * Default styling can be overridden by providing your own custom values for the size or weight
+ * properties from the available options.
+ *
+ * @example
+ * ```html
+ * <modus-typography hierarchy="h1" size="xl" weight="bold">
+ *   Heading Text
+ * </modus-typography>
+ * ```
+ */
+@Component({
+  selector: 'modus-typography',
+  imports: [CommonModule, ModusWcTypography],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-typography
+      [customClass]="className()"
+      [hierarchy]="hierarchy()"
+      [size]="size()"
+      [weight]="weight()"
+    >
+      <ng-content />
+    </modus-wc-typography>
+  `,
+})
+export class ModusTypographyComponent {
+  /** Custom CSS class applied to the typography element. */
+  readonly className = input<string | undefined>();
+
+  /** The hierarchy of the typography component. */
+  readonly hierarchy = input<TypographyHierarchy>('p');
+
+  /** The size of the font. */
+  readonly size = input<TypographySize | undefined>('md');
+
+  /** The weight of the text. */
+  readonly weight = input<TypographyWeight | undefined>('normal');
+}