@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,118 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcSwitch } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusSwitchComponent}.
+ */
+export interface ModusSwitchProps {
+  /** Custom CSS class applied to the switch element. */
+  className?: Components.ModusWcSwitch['customClass'];
+  /** Disables the switch. */
+  disabled?: Components.ModusWcSwitch['disabled'];
+  /** Indeterminate visual state for tri-state switches. */
+  indeterminate?: Components.ModusWcSwitch['indeterminate'];
+  /** Identifier applied to the switch input element. */
+  inputId?: Components.ModusWcSwitch['inputId'];
+  /** Tab index applied to the switch input. */
+  inputTabIndex?: Components.ModusWcSwitch['inputTabIndex'];
+  /** Optional label rendered alongside the switch. */
+  label?: Components.ModusWcSwitch['label'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcSwitch['name'];
+  /** Marks the switch as required. */
+  required?: Components.ModusWcSwitch['required'];
+  /** Size token controlling switch dimensions. */
+  size?: ModusSize;
+  /** Bound value indicating whether the switch is selected. */
+  value?: Components.ModusWcSwitch['value'];
+}
+
+/**
+ * Angular wrapper for the Modus switch web component.
+ *
+ * @example
+ * ```html
+ * <modus-switch
+ *   label="Enable notifications"
+ *   [value]="enabled()"
+ *   (inputChange)="enabled.set($event.target.checked)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-switch',
+  imports: [CommonModule, ModusWcSwitch],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-switch
+      [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 ModusSwitchComponent {
+  /** Custom CSS class applied to the switch element. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the switch. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Indeterminate visual state for tri-state switches. */
+  readonly indeterminate = input<boolean | undefined>(false);
+
+  /** Identifier applied to the switch input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the switch input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Optional label rendered alongside the switch. */
+  readonly label = input<string | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string>('');
+
+  /** Marks the switch as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Size token controlling switch dimensions. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Bound value indicating whether the switch is selected. */
+  readonly value = input<boolean | undefined>(false);
+
+  /** Emits when the switch loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the switch value changes. */
+  readonly inputChange = output<InputEvent>();
+
+  /** Emits when the switch 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-table.component.ts

@@ -0,0 +1,204 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcTable } from '@trimble-oss/moduswebcomponents-angular';
+import type {
+  Components,
+  Density,
+  ITableColumn,
+  IPaginationChangeEventDetail,
+} from '@trimble-oss/moduswebcomponents';
+import type { SortingState, RowSelectionState } from '@tanstack/table-core';
+
+/**
+ * Props supported by the {@link ModusTableComponent}.
+ */
+export interface ModusTableProps {
+  /** Enable cell editing. Either a boolean (all rows) or a predicate per row. */
+  editable?: Components.ModusWcTable['editable'];
+  /** An array of column definitions. */
+  columns: ITableColumn[];
+  /** Custom CSS class applied to the table element. */
+  className?: Components.ModusWcTable['customClass'];
+  /** An array of data objects. */
+  data: Record<string, unknown>[];
+  /** The density of the table. */
+  density?: Density;
+  /** Enable hover effect on table rows. */
+  hover?: Components.ModusWcTable['hover'];
+  /** The current page number in pagination (1-based index). */
+  currentPage?: Components.ModusWcTable['currentPage'];
+  /** Enable pagination for the table. */
+  paginated?: Components.ModusWcTable['paginated'];
+  /** Available options for the number of rows per page. */
+  pageSizeOptions?: Components.ModusWcTable['pageSizeOptions'];
+  /** Show/hide the page size selector in pagination. */
+  showPageSizeSelector?: Components.ModusWcTable['showPageSizeSelector'];
+  /** Enable sorting functionality for sortable columns. */
+  sortable?: Components.ModusWcTable['sortable'];
+  /** Row selection mode. */
+  selectable?: Components.ModusWcTable['selectable'];
+  /** Array of selected row IDs. */
+  selectedRowIds?: Components.ModusWcTable['selectedRowIds'];
+  /** Zebra striped tables differentiate rows by styling them in an alternating fashion. */
+  zebra?: Components.ModusWcTable['zebra'];
+  /** Accessibility caption for the table. */
+  caption?: Components.ModusWcTable['caption'];
+}
+
+/**
+ * Angular wrapper for the Modus table web component.
+ *
+ * A powerful table component with sorting, pagination, row selection, and cell editing capabilities.
+ *
+ * @example
+ * ```html
+ * <modus-table
+ *   [columns]="tableColumns"
+ *   [data]="tableData"
+ *   [paginated]="true"
+ *   [sortable]="true"
+ *   (rowClick)="handleRowClick($event)"
+ *   (sortChange)="handleSortChange($event)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-table',
+  imports: [CommonModule, ModusWcTable],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-table
+      [editable]="editable()"
+      [columns]="columns()"
+      [customClass]="className()"
+      [data]="data()"
+      [density]="density()"
+      [hover]="hover()"
+      [currentPage]="currentPage()"
+      [paginated]="paginated()"
+      [pageSizeOptions]="pageSizeOptions()"
+      [showPageSizeSelector]="showPageSizeSelector()"
+      [sortable]="sortable()"
+      [selectable]="selectable()"
+      [selectedRowIds]="selectedRowIds()"
+      [zebra]="zebra()"
+      [caption]="caption()"
+      (cellEditStart)="handleCellEditStart($event)"
+      (cellEditCommit)="handleCellEditCommit($event)"
+      (rowClick)="handleRowClick($event)"
+      (sortChange)="handleSortChange($event)"
+      (paginationChange)="handlePaginationChange($event)"
+      (rowSelectionChange)="handleRowSelectionChange($event)"
+    />
+  `,
+})
+export class ModusTableComponent {
+  /** Enable cell editing. Either a boolean (all rows) or a predicate per row. */
+  readonly editable = input<boolean | ((row: Record<string, unknown>) => boolean) | undefined>(
+    false
+  );
+
+  /** An array of column definitions. */
+  readonly columns = input.required<ITableColumn[]>();
+
+  /** Custom CSS class applied to the table element. */
+  readonly className = input<string | undefined>();
+
+  /** An array of data objects. */
+  readonly data = input.required<Record<string, unknown>[]>();
+
+  /** The density of the table. */
+  readonly density = input<Density | undefined>('comfortable');
+
+  /** Enable hover effect on table rows. */
+  readonly hover = input<boolean | undefined>(true);
+
+  /** The current page number in pagination (1-based index). */
+  readonly currentPage = input<number>(1);
+
+  /** Enable pagination for the table. */
+  readonly paginated = input<boolean | undefined>(false);
+
+  /** Available options for the number of rows per page. */
+  readonly pageSizeOptions = input<number[] | undefined>([5, 10, 15]);
+
+  /** Show/hide the page size selector in pagination. */
+  readonly showPageSizeSelector = input<boolean | undefined>(true);
+
+  /** Enable sorting functionality for sortable columns. */
+  readonly sortable = input<boolean | undefined>(true);
+
+  /** Row selection mode. */
+  readonly selectable = input<'none' | 'single' | 'multi' | undefined>('none');
+
+  /** Array of selected row IDs. */
+  readonly selectedRowIds = input<string[] | undefined>();
+
+  /** Zebra striped tables differentiate rows by styling them in an alternating fashion. */
+  readonly zebra = input<boolean | undefined>(false);
+
+  /** Accessibility caption for the table. */
+  readonly caption = input<string | undefined>();
+
+  /** Emits when cell editing starts. */
+  readonly cellEditStart = output<{ rowIndex: number; colId: string }>();
+
+  /** Emits when cell editing is committed with the new value. */
+  readonly cellEditCommit = output<{
+    rowIndex: number;
+    colId: string;
+    newValue: unknown;
+    updatedRow: Record<string, unknown>;
+  }>();
+
+  /** Emits when a row is clicked. */
+  readonly rowClick = output<{ row: Record<string, unknown>; index: number }>();
+
+  /** Emits when sorting changes with the new sorting state. */
+  readonly sortChange = output<SortingState>();
+
+  /** Emits when pagination changes with the new pagination state. */
+  readonly paginationChange = output<IPaginationChangeEventDetail>();
+
+  /** Emits when row selection changes with the selected rows and their IDs. */
+  readonly rowSelectionChange = output<{
+    selectedRows: Record<string, unknown>[];
+    selectedRowIds: string[];
+  }>();
+
+  handleCellEditStart(event: CustomEvent<{ rowIndex: number; colId: string }>): void {
+    this.cellEditStart.emit(event.detail);
+  }
+
+  handleCellEditCommit(
+    event: CustomEvent<{
+      rowIndex: number;
+      colId: string;
+      newValue: unknown;
+      updatedRow: Record<string, unknown>;
+    }>
+  ): void {
+    this.cellEditCommit.emit(event.detail);
+  }
+
+  handleRowClick(event: CustomEvent<{ row: Record<string, unknown>; index: number }>): void {
+    this.rowClick.emit(event.detail);
+  }
+
+  handleSortChange(event: CustomEvent<SortingState>): void {
+    this.sortChange.emit(event.detail);
+  }
+
+  handlePaginationChange(event: CustomEvent<IPaginationChangeEventDetail>): void {
+    this.paginationChange.emit(event.detail);
+  }
+
+  handleRowSelectionChange(
+    event: CustomEvent<{
+      selectedRows: Record<string, unknown>[];
+      selectedRowIds: string[];
+    }>
+  ): void {
+    this.rowSelectionChange.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcTabs } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, ITab, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusTabsComponent}.
+ */
+export interface ModusTabsProps {
+  /** Current active tab index. */
+  activeTabIndex?: Components.ModusWcTabs['activeTabIndex'];
+  /** Custom CSS class applied to the tabs container. */
+  className?: Components.ModusWcTabs['customClass'];
+  /** Tab size token. */
+  size?: ModusSize;
+  /** Tabs to display. */
+  tabs: ITab[];
+  /** Additional styling for the tabs. */
+  tabStyle?: Components.ModusWcTabs['tabStyle'];
+}
+
+/**
+ * Angular wrapper for the Modus tabs web component.
+ *
+ * The tabs component supports projecting tab content using named slots:
+ * - `tab-0`, `tab-1`, etc. for tab panel content
+ * - Custom slot names defined in tab `slotName` property
+ *
+ * @example
+ * ```html
+ * <modus-tabs
+ *   [tabs]="tabItems"
+ *   [activeTabIndex]="activeTab()"
+ *   (tabChange)="handleTabChange($event)"
+ * >
+ *   <div slot="tab-0">First tab content</div>
+ *   <div slot="tab-1">Second tab content</div>
+ * </modus-tabs>
+ * ```
+ */
+@Component({
+  selector: 'modus-tabs',
+  imports: [CommonModule, ModusWcTabs],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-tabs
+      [activeTabIndex]="activeTabIndex()"
+      [customClass]="className()"
+      [size]="size()"
+      [tabs]="tabs()"
+      [tabStyle]="tabStyle()"
+      (tabChange)="handleTabChange($event)"
+    >
+      <ng-content />
+    </modus-wc-tabs>
+  `,
+})
+export class ModusTabsComponent {
+  /** Current active tab index. */
+  readonly activeTabIndex = input<number>(0);
+
+  /** Custom CSS class applied to the tabs container. */
+  readonly className = input<string | undefined>();
+
+  /** Tab size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Tabs to display. */
+  readonly tabs = input.required<ITab[]>();
+
+  /** Additional styling for the tabs. */
+  readonly tabStyle = input<'boxed' | 'bordered' | 'lifted' | 'none' | undefined>('bordered');
+
+  /** Emits when a tab is switched. */
+  readonly tabChange = output<{ previousTab: number; newTab: number }>();
+
+  /** Handles tab change events from the Modus Tabs Web Component. */
+  handleTabChange(event: CustomEvent<{ previousTab: number; newTab: number }>): void {
+    this.tabChange.emit(event.detail);
+  }
+}
+

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

@@ -0,0 +1,221 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcTextInput } from '@trimble-oss/moduswebcomponents-angular';
+import type {
+  AutocompleteTypes,
+  Components,
+  IInputFeedbackProp,
+  ModusSize,
+  TextFieldTypes,
+} from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusTextInputComponent}.
+ */
+export interface ModusTextInputProps {
+  /** Controls automatic capitalization in inputted text. */
+  autoCapitalize?: Components.ModusWcTextInput['autoCapitalize'];
+  /** Hint for form autofill feature. */
+  autoComplete?: AutocompleteTypes;
+  /** Controls automatic correction in inputted text. */
+  autoCorrect?: Components.ModusWcTextInput['autoCorrect'];
+  /** Indicates that the input should have a border. */
+  bordered?: Components.ModusWcTextInput['bordered'];
+  /** Aria label for the clear icon button. */
+  clearAriaLabel?: Components.ModusWcTextInput['clearAriaLabel'];
+  /** Custom CSS class applied to the input. */
+  className?: Components.ModusWcTextInput['customClass'];
+  /** Disables the input. */
+  disabled?: Components.ModusWcTextInput['disabled'];
+  /** A hint to the browser for which enter key to display. */
+  enterkeyhint?: Components.ModusWcTextInput['enterkeyhint'];
+  /** Feedback configuration rendered below the input. */
+  feedback?: IInputFeedbackProp;
+  /** Show the clear button within the input field. */
+  includeClear?: Components.ModusWcTextInput['includeClear'];
+  /** Show the search icon within the input field. */
+  includeSearch?: Components.ModusWcTextInput['includeSearch'];
+  /** Identifier applied to the input element. */
+  inputId?: Components.ModusWcTextInput['inputId'];
+  /** Tab index applied to the input. */
+  inputTabIndex?: Components.ModusWcTextInput['inputTabIndex'];
+  /** Hint for mobile keyboard type. */
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  /** Label text displayed above the input. */
+  label?: Components.ModusWcTextInput['label'];
+  /** Maximum length (number of characters) of value. */
+  maxLength?: Components.ModusWcTextInput['maxLength'];
+  /** Minimum length (number of characters) of value. */
+  minLength?: Components.ModusWcTextInput['minLength'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcTextInput['name'];
+  /** Pattern the value must match to be valid. */
+  pattern?: Components.ModusWcTextInput['pattern'];
+  /** Placeholder text displayed when empty. */
+  placeholder?: Components.ModusWcTextInput['placeholder'];
+  /** Prevents editing when true. */
+  readOnly?: Components.ModusWcTextInput['readOnly'];
+  /** Marks the field as required. */
+  required?: Components.ModusWcTextInput['required'];
+  /** Control size token. */
+  size?: ModusSize;
+  /** Type of form control. */
+  type?: TextFieldTypes;
+  /** Current input value. */
+  value?: Components.ModusWcTextInput['value'];
+}
+
+/**
+ * Angular wrapper for the Modus text input web component.
+ *
+ * @example
+ * ```html
+ * <modus-text-input
+ *   label="Email"
+ *   type="email"
+ *   [value]="email()"
+ *   (inputChange)="email.set($event.target.value)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-text-input',
+  imports: [CommonModule, ModusWcTextInput],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-text-input
+      [autoCapitalize]="autoCapitalize()"
+      [autoComplete]="autoComplete()"
+      [autoCorrect]="autoCorrect()"
+      [bordered]="bordered()"
+      [clearAriaLabel]="clearAriaLabel()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [enterkeyhint]="enterkeyhint()"
+      [feedback]="feedback()"
+      [includeClear]="includeClear()"
+      [includeSearch]="includeSearch()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [attr.inputmode]="inputMode()"
+      [label]="label()"
+      [maxLength]="maxLength()"
+      [minLength]="minLength()"
+      [name]="name()"
+      [pattern]="pattern()"
+      [placeholder]="placeholder()"
+      [readOnly]="readOnly()"
+      [required]="required()"
+      [size]="size()"
+      [type]="type()"
+      [value]="value()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+    >
+      <ng-content select="[slot='custom-icon']" slot="custom-icon" />
+    </modus-wc-text-input>
+  `,
+})
+export class ModusTextInputComponent {
+  /** Controls automatic capitalization in inputted text. */
+  readonly autoCapitalize = input<
+    'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | undefined
+  >();
+
+  /** Hint for form autofill feature. */
+  readonly autoComplete = input<AutocompleteTypes | undefined>();
+
+  /** 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);
+
+  /** Aria label for the clear icon button. */
+  readonly clearAriaLabel = input<string | undefined>('Clear text');
+
+  /** Custom CSS class applied to the input. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the input. */
+  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 input. */
+  readonly feedback = input<IInputFeedbackProp | undefined>();
+
+  /** 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);
+
+  /** Identifier applied to the input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Hint for mobile keyboard type. */
+  readonly inputMode = input<'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | undefined>('text');
+
+  /** Label text displayed above the input. */
+  readonly label = input<string | undefined>();
+
+  /** Maximum length (number of characters) of value. */
+  readonly maxLength = input<number | undefined>();
+
+  /** Minimum length (number of characters) of value. */
+  readonly minLength = input<number | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | undefined>();
+
+  /** Pattern the value must match to be valid. */
+  readonly pattern = 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);
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Type of form control. */
+  readonly type = input<TextFieldTypes>('text');
+
+  /** Current input value. */
+  readonly value = input<string>('');
+
+  /** 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);
+  }
+}
+