x-gen-ui

This library was generated with Nx.

Running unit tests

Run nx test x-gen-ui to execute the unit tests.

XGenUI

Reusable Angular Material UI components library for Angular 20+ projects.

Features

• Standalone, generic, and reusable Angular Material components
• Easy integration into any Angular project
• Includes input, date-picker, and single select components (more coming soon)

Installation

From yarn (public)

yarn add x-gen-ui

Peer dependencies: Make sure your project uses Angular 20+ and Angular Material 20+.

Usage

1. Import Angular Material Modules

Ensure your app imports BrowserAnimationsModule and has Angular Material set up.

2. Import and Use Components

Input Component

import { XGenUIInput } from 'x-gen-ui';

<x-gen-ui-input
  [type]="'text'"
  [label]="'USERNAME'"
  [placeholder]="'ENTER_YOUR_USERNAME'"
  [control]="usernameControl"
  [errorMessages]="{ required: 'USERNAME_REQUIRED', minlength: 'USERNAME_TOO_SHORT' }"
  [iconName]="'person'"
  [hint]="'YOUR_UNIQUE_USERNAME'"
  [isReadOnly]="false"
  (actionButton)="handleAction($event)"
  [actionName]="'search'"
  [actionButtonIconName]="'search'"
></x-gen-ui-input>

Date Picker Component

import { XGenUIInput } from 'x-gen-ui';

<x-gen-ui-select
  [label]="'Select Fruit'"
  [placeholder]="'Choose one'"
  [control]="fruitControl"
  [options]="['Apple', 'Banana']"
  [multiple]="true"
  [displayKey]="'name'"
  [valueKey]="'id'"
  [errorMessages]="{ required: 'Selection required' }"
></x-gen-ui-select>

Single Select Component

import { XGenUISelect } from 'x-gen-ui';

fruitControl = new FormControl<[]>([], [Validators.required]);

<x-gen-ui-table
  [pageTitle]="'My Table'"
  [columns]="columns"
  [dataset]="items"
  [enableCheckBoxSelection]="true"
  [rowActions]="[{name: 'edit', icon: 'edit'}]"
  [displayActionBar]="true"
  [enableStaticSearch]="true"
  [control]="selectedControl"
  (action)="handleTableAction($event)"
></x-gen-ui-table>

selectedControl = new FormControl<any[]>([]) as FormControl<any[]>;

Radio Component

import { XGenUIRadio } from 'x-gen-ui';

optionControl = new FormControl(null, Validators.required);

<x-gen-ui-radio
  [label]="'Select Option'"
  [control]="optionControl"
  [values]="[{id: 1, name: 'Option 1'}, {id: 2, name: 'Option 2', isDefault: true}]"
></x-gen-ui-radio>

3. Standalone Usage

You can use these components in standalone components or modules. Just add them to the imports array of your component.

API Reference

XGenUIInput

| Input | Type | Description | |-------------- |----------|-----------------------------------| | label | string | Field label | | placeholder | string | Placeholder text | | value | string | Input value (two-way binding) | | type | string | Input type (text, password, etc.) | | disabled | boolean | Disable the input | | maxlength | number | Max length | | minlength | number | Min length | | autocomplete | string | Autocomplete attribute | | hint | string | Hint text |

XGenUIDatePicker

| Input | Type | Description | |-------------- |------------|-----------------------------------| | label | string | Field label | | placeholder | string | Placeholder text | | value | Date | null | Date value (two-way binding) | | disabled | boolean | Disable the picker | | autocomplete | string | Autocomplete attribute | | hint | string | Hint text |

XGenUISingleSelect

| Input | Type | Description | |-------------- |----------------------------|-----------------------------------| | label | string | Field label | | placeholder | string | Placeholder text | | value | any | Selected value (two-way binding) | | options | XGenUISelectOption[] | Options for the select | | disabled | boolean | Disable the select |

XGenUITable

| Input | Type | Description | |-------------- |----------------------------|-----------------------------------| | label | string | Field label | | placeholder | string | Placeholder text | | value | any | Selected value (two-way binding) | | options | XGenUISelectOption[] | Options for the select | | disabled | boolean | Disable the select |

XGenUIRadio

| Input | Type | Description | |-------------- |----------------------------|-----------------------------------| | label | string | Field label | | placeholder | string | Placeholder text | | value | any | Selected value (two-way binding) | | options | XGenUISelectOption[] | Options for the select | | disabled | boolean | Disable the select |

License

MIT