@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,102 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcRadio } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusRadioComponent}.
+ */
+export interface ModusRadioProps {
+  /** Custom CSS class applied to the radio input. */
+  className?: Components.ModusWcRadio['customClass'];
+  /** Disables the radio control. */
+  disabled?: Components.ModusWcRadio['disabled'];
+  /** Identifier applied to the input element. */
+  inputId?: Components.ModusWcRadio['inputId'];
+  /** Tab index applied to the input. */
+  inputTabIndex?: Components.ModusWcRadio['inputTabIndex'];
+  /** Label displayed alongside the radio. */
+  label?: Components.ModusWcRadio['label'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcRadio['name'];
+  /** Marks the control as required. */
+  required?: Components.ModusWcRadio['required'];
+  /** Radio size token. */
+  size?: ModusSize;
+  /** Boolean value representing the checked state. */
+  value?: Components.ModusWcRadio['value'];
+}
+
+/**
+ * Angular wrapper for the Modus radio web component.
+ */
+@Component({
+  selector: 'modus-radio',
+  imports: [CommonModule, ModusWcRadio],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-radio
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [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 ModusRadioComponent {
+  /** Custom CSS class applied to the radio input. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the radio control. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Identifier applied to the input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Label displayed alongside the radio. */
+  readonly label = input<string | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | undefined>('');
+
+  /** Marks the control as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Radio size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Boolean value representing the checked state. */
+  readonly value = input<boolean | undefined>(false);
+
+  /** Emits when the input loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the value changes. */
+  readonly inputChange = output<InputEvent>();
+
+  /** Emits when the input 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-rating.component.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcRating } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, IRatingChange, ModusSize, ModusWcRatingVariant } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusRatingComponent}.
+ */
+export interface ModusRatingProps {
+  /** Enables half step ratings for supported variants. */
+  allowHalf?: Components.ModusWcRating['allowHalf'];
+  /** Number of rating items displayed. */
+  count?: Components.ModusWcRating['count'];
+  /** Optional CSS class applied to the rating container. */
+  className?: Components.ModusWcRating['customClass'];
+  /** Disables user interaction. */
+  disabled?: Components.ModusWcRating['disabled'];
+  /** Function providing accessible labels for each rating value. */
+  getAriaLabelText?: Components.ModusWcRating['getAriaLabelText'];
+  /** Control size token. */
+  size?: ModusSize;
+  /** Current rating value. */
+  value?: Components.ModusWcRating['value'];
+  /** Rating visualization variant. */
+  variant?: ModusWcRatingVariant;
+}
+
+/**
+ * Angular wrapper for the Modus rating web component.
+ */
+@Component({
+  selector: 'modus-rating',
+  imports: [CommonModule, ModusWcRating],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-rating
+      [allowHalf]="allowHalf()"
+      [count]="count()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [getAriaLabelText]="getAriaLabelText()"
+      [size]="size()"
+      [value]="value()"
+      [variant]="variant()"
+      (ratingChange)="handleRatingChange($event)"
+    />
+  `,
+})
+export class ModusRatingComponent {
+  /** Enables half step ratings for supported variants. */
+  readonly allowHalf = input<boolean | undefined>(false);
+
+  /** Number of rating items displayed. */
+  readonly count = input<number | undefined>(5);
+
+  /** Optional CSS class applied to the rating container. */
+  readonly className = input<string | undefined>();
+
+  /** Disables user interaction. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Function providing accessible labels for each rating value. */
+  readonly getAriaLabelText = input<((ratingValue: number) => string) | undefined>();
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Current rating value. */
+  readonly value = input<number | undefined>(0);
+
+  /** Rating visualization variant. */
+  readonly variant = input<ModusWcRatingVariant | undefined>('smiley');
+
+  /** Emits when the rating changes. */
+  readonly ratingChange = output<IRatingChange>();
+
+  handleRatingChange(event: CustomEvent<IRatingChange>): void {
+    this.ratingChange.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,131 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcSelect } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, IInputFeedbackProp, ISelectOption, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusSelectComponent}.
+ */
+export interface ModusSelectProps {
+  /** Indicates that the input should have a border. */
+  bordered?: Components.ModusWcSelect['bordered'];
+  /** Custom CSS class applied to the select element. */
+  className?: Components.ModusWcSelect['customClass'];
+  /** Disables the select. */
+  disabled?: Components.ModusWcSelect['disabled'];
+  /** Feedback configuration rendered below the select. */
+  feedback?: IInputFeedbackProp;
+  /** Identifier applied to the select element. */
+  inputId?: Components.ModusWcSelect['inputId'];
+  /** Tab index applied to the select. */
+  inputTabIndex?: Components.ModusWcSelect['inputTabIndex'];
+  /** Label text displayed above the select. */
+  label?: Components.ModusWcSelect['label'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcSelect['name'];
+  /** Options displayed in the select dropdown. */
+  options: ISelectOption[];
+  /** Marks the select as required. */
+  required?: Components.ModusWcSelect['required'];
+  /** Control size token. */
+  size?: ModusSize;
+  /** Current selected value. */
+  value?: Components.ModusWcSelect['value'];
+}
+
+/**
+ * Angular wrapper for the Modus select web component.
+ *
+ * @example
+ * ```html
+ * <modus-select
+ *   label="Choose an option"
+ *   [options]="selectOptions"
+ *   [value]="selectedValue()"
+ *   (inputChange)="handleChange($event)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-select',
+  imports: [CommonModule, ModusWcSelect],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-select
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [feedback]="feedback()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [label]="label()"
+      [name]="name()"
+      [options]="options()"
+      [required]="required()"
+      [size]="size()"
+      [value]="value()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+    />
+  `,
+})
+export class ModusSelectComponent {
+  /** Indicates that the input should have a border. */
+  readonly bordered = input<boolean | undefined>(true);
+
+  /** Custom CSS class applied to the select element. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the select. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Feedback configuration rendered below the select. */
+  readonly feedback = input<IInputFeedbackProp | undefined>();
+
+  /** Identifier applied to the select element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the select. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Label text displayed above the select. */
+  readonly label = input<string | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | undefined>();
+
+  /** Options displayed in the select dropdown. */
+  readonly options = input.required<ISelectOption[]>();
+
+  /** Marks the select as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Current selected value. */
+  readonly value = input<string>('');
+
+  /** Emits when the select loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the value changes. */
+  readonly inputChange = output<InputEvent>();
+
+  /** Emits when the select 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-side-navigation.component.ts

@@ -0,0 +1,90 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcSideNavigation } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusSideNavigationComponent}.
+ */
+export interface ModusSideNavigationProps {
+  /** Whether the side navigation should collapse when clicking outside of it. */
+  collapseOnClickOutside?: Components.ModusWcSideNavigation['collapseOnClickOutside'];
+  /** Custom CSS class applied to the side navigation element. */
+  className?: Components.ModusWcSideNavigation['customClass'];
+  /** Whether the side navigation is expanded. */
+  expanded?: Components.ModusWcSideNavigation['expanded'];
+  /** Maximum width of the side navigation panel in an expanded state. */
+  maxWidth?: Components.ModusWcSideNavigation['maxWidth'];
+  /** Mode to make side navigation either overlay or push the content. */
+  mode?: Components.ModusWcSideNavigation['mode'];
+  /** Specify the selector for the page's content for which paddings and margins will be set. */
+  targetContent?: Components.ModusWcSideNavigation['targetContent'];
+}
+
+/**
+ * Angular wrapper for the Modus side navigation web component.
+ *
+ * Used for organizing primary navigation and content areas in an application.
+ *
+ * @example
+ * ```html
+ * <modus-side-navigation
+ *   [expanded]="navExpanded()"
+ *   mode="push"
+ *   targetContent="#main-content"
+ *   (expandedChange)="handleExpandedChange($event)"
+ * >
+ *   <nav-menu-items></nav-menu-items>
+ * </modus-side-navigation>
+ * ```
+ */
+@Component({
+  selector: 'modus-side-navigation',
+  imports: [CommonModule, ModusWcSideNavigation],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-side-navigation
+      [collapseOnClickOutside]="collapseOnClickOutside()"
+      [attr.collapse-on-click-outside]="collapseOnClickOutside() ? '' : null"
+      [customClass]="className()"
+      [expanded]="expanded()"
+      [attr.expanded]="expanded() ? '' : null"
+      [maxWidth]="maxWidth()"
+      [attr.max-width]="maxWidth()"
+      [mode]="mode()"
+      [attr.mode]="mode()"
+      [targetContent]="targetContent()"
+      [attr.target-content]="targetContent()"
+      (expandedChange)="handleExpandedChange($event)"
+    >
+      <ng-content />
+    </modus-wc-side-navigation>
+  `,
+})
+export class ModusSideNavigationComponent {
+  /** Whether the side navigation should collapse when clicking outside of it. */
+  readonly collapseOnClickOutside = input<boolean>(true);
+
+  /** Custom CSS class applied to the side navigation element. */
+  readonly className = input<string | undefined>();
+
+  /** Whether the side navigation is expanded. */
+  readonly expanded = input<boolean>(false);
+
+  /** Maximum width of the side navigation panel in an expanded state. */
+  readonly maxWidth = input<string>('256px');
+
+  /** Mode to make side navigation either overlay or push the content. */
+  readonly mode = input<'overlay' | 'push' | undefined>('overlay');
+
+  /** Specify the selector for the page's content for which paddings and margins will be set. */
+  readonly targetContent = input<string>('');
+
+  /** Emits when the expanded state changes (expanded/collapsed). */
+  readonly expandedChange = output<boolean>();
+
+  /** Handles expanded change events from the Modus Side Navigation Web Component. */
+  handleExpandedChange(event: CustomEvent<boolean>): void {
+    this.expandedChange.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcSkeleton } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusSkeletonComponent}.
+ */
+export interface ModusSkeletonProps {
+  /** Custom CSS class applied to the skeleton element. */
+  className?: Components.ModusWcSkeleton['customClass'];
+  /** The height of the skeleton. */
+  height?: Components.ModusWcSkeleton['height'];
+  /** The shape of the skeleton. */
+  shape?: Components.ModusWcSkeleton['shape'];
+  /** The width of the skeleton. */
+  width?: Components.ModusWcSkeleton['width'];
+}
+
+/**
+ * Angular wrapper for the Modus skeleton web component.
+ *
+ * @example
+ * ```html
+ * <modus-skeleton shape="rectangle" width="200px" height="20px" />
+ * ```
+ */
+@Component({
+  selector: 'modus-skeleton',
+  imports: [CommonModule, ModusWcSkeleton],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-skeleton
+      [customClass]="className()"
+      [height]="height()"
+      [shape]="shape()"
+      [width]="width()"
+    />
+  `,
+})
+export class ModusSkeletonComponent {
+  /** Custom CSS class applied to the skeleton element. */
+  readonly className = input<string | undefined>();
+
+  /** The height of the skeleton. */
+  readonly height = input<string>('var(--modus-wc-line-height-md)');
+
+  /** The shape of the skeleton. */
+  readonly shape = input<'circle' | 'rectangle' | undefined>('rectangle');
+
+  /** The width of the skeleton. */
+  readonly width = input<string>('100%');
+}
+

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

@@ -0,0 +1,132 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcSlider } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusSliderComponent}.
+ */
+export interface ModusSliderProps {
+  /** Custom CSS class applied to the slider element. */
+  className?: Components.ModusWcSlider['customClass'];
+  /** Disables the slider. */
+  disabled?: Components.ModusWcSlider['disabled'];
+  /** Identifier applied to the slider input element. */
+  inputId?: Components.ModusWcSlider['inputId'];
+  /** Tab index applied to the slider input. */
+  inputTabIndex?: Components.ModusWcSlider['inputTabIndex'];
+  /** Label text displayed above the slider. */
+  label?: Components.ModusWcSlider['label'];
+  /** Maximum slider value. */
+  max?: Components.ModusWcSlider['max'];
+  /** Minimum slider value. */
+  min?: Components.ModusWcSlider['min'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcSlider['name'];
+  /** Marks the slider as required. */
+  required?: Components.ModusWcSlider['required'];
+  /** Control size token. */
+  size?: ModusSize;
+  /** The increment of the slider. */
+  step?: Components.ModusWcSlider['step'];
+  /** Current slider value. */
+  value?: Components.ModusWcSlider['value'];
+}
+
+/**
+ * Angular wrapper for the Modus slider web component.
+ *
+ * @example
+ * ```html
+ * <modus-slider
+ *   label="Volume"
+ *   [min]="0"
+ *   [max]="100"
+ *   [value]="volume()"
+ *   (inputChange)="volume.set($event.target.value)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-slider',
+  imports: [CommonModule, ModusWcSlider],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-slider
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [label]="label()"
+      [max]="max()"
+      [min]="min()"
+      [name]="name()"
+      [required]="required()"
+      [size]="size()"
+      [step]="step()"
+      [value]="value()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+    />
+  `,
+})
+export class ModusSliderComponent {
+  /** Custom CSS class applied to the slider element. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the slider. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Identifier applied to the slider input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the slider input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Label text displayed above the slider. */
+  readonly label = input<string | undefined>();
+
+  /** Maximum slider value. */
+  readonly max = input<number | undefined>();
+
+  /** Minimum slider value. */
+  readonly min = input<number | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string>('');
+
+  /** Marks the slider as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** The increment of the slider. */
+  readonly step = input<number | undefined>();
+
+  /** Current slider value. */
+  readonly value = input<number>(0);
+
+  /** Emits when the slider loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the value changes. */
+  readonly inputChange = output<InputEvent>();
+
+  /** Emits when the slider 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-stepper.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcStepper } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, Orientation } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props for a step item in the stepper component.
+ */
+export interface IStepperItem {
+  /** The color theme of the step. */
+  color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
+  /** Custom content to display in the step indicator. */
+  content?: string;
+  /** Custom CSS class to apply to the step. */
+  customClass?: string;
+  /** Text label for the step. */
+  label?: string;
+}
+
+/**
+ * Props supported by the {@link ModusStepperComponent}.
+ */
+export interface ModusStepperProps {
+  /** Custom CSS class applied to the stepper element. */
+  className?: Components.ModusWcStepper['customClass'];
+  /** The orientation of the steps. */
+  orientation?: Orientation;
+  /** The steps to display. */
+  steps: IStepperItem[];
+}
+
+/**
+ * Angular wrapper for the Modus stepper web component.
+ *
+ * Used to show a list of steps in a process.
+ *
+ * @example
+ * ```html
+ * <modus-stepper
+ *   [steps]="[
+ *     { label: 'Step 1', color: 'primary' },
+ *     { label: 'Step 2', color: 'info' },
+ *     { label: 'Step 3' }
+ *   ]"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-stepper',
+  imports: [CommonModule, ModusWcStepper],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-stepper [customClass]="className()" [orientation]="orientation()" [steps]="steps()" />
+  `,
+})
+export class ModusStepperComponent {
+  /** Custom CSS class applied to the stepper element. */
+  readonly className = input<string | undefined>();
+
+  /** The orientation of the steps. */
+  readonly orientation = input<Orientation | undefined>();
+
+  /** The steps to display. */
+  readonly steps = input.required<IStepperItem[]>();
+}