viitorcloud-ng-utility-library-demo/README.md

The **ViitorCloud NG Utility Library** developed with the Angular 16 framework, stands out for its exceptional adaptability and reusability within Angular projects. This comprehensive collection encompasses utility services, directives, and components str

# ViitorCloud Angular Utility Library :rocket:

The **ViitorCloud NG Utility Library** developed with the Angular 16 framework, stands out for its exceptional adaptability and reusability within Angular projects. This comprehensive collection encompasses utility services, directives, and components strategically crafted to expedite routine operations in Angular applications. By seamlessly incorporating these tools into your projects, you can significantly amplify your development speed and optimize the debugging procedures. :wrench: :computer:

## Table of Contents :bookmark_tabs:

- [Installation](#installation)
- [Usage](#usage)
  - [Logger Service](#logger-service)
  - [Components](#components)
    - [vc-input Component](#vc-input-component)
    - [vc-loader Component](#vc-loader-component)
    - [vc-button Component](#vc-button-component)
- [Contributing](#contributing)
- [License](#license)

<a name="installation"></a>

## Installation :inbox_tray:

You can install the ViitorCloud NG Utility Library via npm:

```bash
npm install viitorcloud-ng-utility-library --save
```

<a name="usage"></a>

## Usage :hammer_and_wrench:

After installing the library, you can import and use the utility services and components in your Angular components and services. :gear:

<a name="logger-service"></a>

### Logger Service

```typescript
import { VcLoggerService } from "viitorcloud-ng-utility-library";

// Example usage of the Logger Service
VcLoggerService.log("This is a log message.", "Additional arguments");
VcLoggerService.warn("This is a warning message.", "Additional arguments");
VcLoggerService.error("This is an error message.");
VcLoggerService.clear();
```

> The Logger Service is worry-free and won't log anything in production. It automatically adapts its behavior based on the environment. This makes debugging during development hassle-free and safe.\_

<a name="components"></a>

## Components

The ViitorCloud NG Utility Library includes the following components:

<a name="vc-input-component"></a>

### vc-input Component :keyboard:

The **vc-input** component provides a customizable input field with various options:

#### Input Attributes:

- `[name]` (Required): The name of the input field.
- `[type]` (Optional): The type of the input (text, email, password). Default: `'text'`.
- `[position]` (Optional): The position of an associated SVG element (left or right). Default: `left`.
- `[placeholder]` (Optional): The placeholder text for the input. Default: `''`.
- `[maxLength]` (Optional): The maximum length of the input. Default: `undefined`.
- `[required]` (Optional): Whether the input is required. Default: `false`.
- `[isDisabled]` (Optional): Whether the input is disabled. Default: `false`.
- `[readOnly]` (Optional): Whether the input is read-only. Default: `false`.
- `[applyAllowNumberOnly]` (Optional): Whether to allow only numbers. Default: `false`.
- `[customClass]` (Optional): Custom CSS classes for styling. Default: `undefined`.
- `[label]` (Optional): Label for the input. Default: `''`.
- `[pattern]` (Optional): Regular expression pattern for validation. Default: `undefined`.
- `[regexType]` (Optional): Type of regex validation (if applicable). Default: `undefined`.

```html
<vc-input [name]="inputName" [type]="inputType" [position]="inputPosition" [placeholder]="inputPlaceholder" [maxLength]="inputMaxLength" [required]="inputRequired" [isDisabled]="inputDisabled" [readOnly]="inputReadOnly" [applyAllowNumberOnly]="allowNumberOnly" [customClass]="inputCustomClass" [label]="inputLabel" [pattern]="inputPattern" [regexType]="inputRegexType" />
```

- `#projectedElement` (Required for using `mat-icon`): Use this attribute to pass a `mat-icon` within the `<vc-input>` element.

## For example:

### Search Bar Example :mag_right:

Here's an example of how to create a search bar using the `vc-input` component. The example includes a `mat-icon` for the search icon, and the position of the icon is set based on the `[position]` attribute of the `vc-input` component.

```html
<vc-input
  placeholder="{{ 'partner.searchPartner' | translate }}"
  position="right"
  [customClass]="{
        'shadow-2sm rounded-[60px] outline-0 text-blue-50 font-semibold h-[40px] w-full pr-4': true
    }"
  type="text"
  name="search"
  [formControl]="searchControl"
>
  <mat-icon #projectedElement matIcon class="text-blue-50 absolute top-[10px]">search</mat-icon>
</vc-input>
```

The `mat-icon` element is projected within the `vc-input` component and positioned based on the value of `[position]`. In this example, it's positioned to the right of the input.

## You can customize the attributes and styling to fit your specific design and functionality requirements.

<a name="vc-loader-component"></a>

### vc-loader Component :hourglass_flowing_sand:

The **vc-loader** component displays a loading spinner with customizable styling options. It's a simple way to indicate ongoing processes to users. :spinner:

<vc-loader [class]="loaderClass" />

<a name="vc-button-component"></a>

### vc-button Component :ok:

The **vc-button** component creates a button with optional spinning loader:

#### Button Attributes:

- `[type]`: The type of the button (button or submit).
- `[class]`: Custom CSS classes for styling.
- `[isDisabled]`: Whether the button is disabled.
- `[spin]`: Whether to show a spinning loader.

```html
<vc-button [type]="buttonType" [class]="buttonClass" [isDisabled]="buttonDisabled" [spin]="buttonSpin" (buttonTap)="handleButtonClick()"> Click Me </vc-button>
```

...

<a name="contributing"></a>

## Contributing :raising_hand:

Contributions to the ViitorCloud NG Utility Library are welcome! If you have suggestions, bug reports, or improvements, please feel free to submit issues and pull requests on the [GitHub repository](https://github.com/viitoradmin/viitorcloud-ng-utility-library/tree/v1.0.0). :octocat:

<a name="license"></a>

## License :scroll:

The ViitorCloud NG Utility Library is open-source software licensed under the [MIT License](LICENSE). :memo:

---

Designed and developed by [ViitorCloud Technologies Pvt. Ltd.](https://viitorcloud.com/). Enjoy using the ViitorCloud Angular Utility Library! If you find it helpful, consider giving it a star. :star: