Test2-ng-utility-library NPM

Angular Utility Library :rocket:

The 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:

Installation :inbox_tray:

Use the Angular CLI's installation schematic to set up your NG Utility Library project by running the following command:

ng add @viitorcloudtechnologies/ng-utility-library

The ng add command not only installs the NG Utility Library but also performs the following actions:

Adds project dependencies to your package.json.
Updates your angular.json file to include the custom common styles for improved style precedence.

This simplifies the installation process and ensures that your project benefits from both the utility library and the accompanying style enhancements.

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:

Logger Service

import { VcLoggerService } from "@viitorcloudtechnologies/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.

Components

The NG Utility Library includes the following components:

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.

<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.

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.

<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.

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" />

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.

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

vc-svg-icon Component :art:

The vc-svg-icon component facilitates the seamless integration of SVG icons into your Angular application. It dynamically loads SVG icons from the specified path or URL, allowing for easy customization and versatile icon usage.

Example Usage in TS File:

import { VcSvgIconComponent } from '@viitorcloudtechnologies/ng-utility-library';

// Use the VcSvgIconComponent in your component or module
// Example usage in a component:
export class YourComponent implements OnInit {
  iconPath: string = 'path-to-your-icon.svg';
}

Example Usage in HTML File:

<vc-svg-icon [path]="iconPath"></vc-svg-icon>

vc-action-menu Component :arrow_right_hook:

The vc-action-menu component provides a customizable action menu with various options:

Input Attributes:

vc-action-menu Component Input Properties:

menuItems: MenuItems[]
An array of MenuItems objects defining the menu items to be displayed in the action menu. Each MenuItems object includes properties like label, callback, isDisabled, and icon for individual menu items.
referenceData: any
Additional reference data that can be passed to the callback function when a menu item is clicked. This data can be used for custom actions based on the selected menu item.
actionMenuClass: Params
An optional parameter to specify custom CSS classes for styling the vc-action-menu component. Use this property to enhance the visual appearance of the action menu based on your application's design requirements.
menuIconColor: string
The color applied to the icons within the action menu. You can provide a valid CSS color value (e.g., hex code, RGB, color name) to customize the icon color.

<vc-action-menu 
  [menuItems]="menuItems" 
  [referenceData]="referenceData" 
  [actionMenuClass]="actionMenuClass" 
  [menuIconColor]="menuIconColor" >
</vc-action-menu>

The vc-action-menu component provides flexibility in customizing its content by allowing you to include either a vc-button or a vc-svg-icon using the ng-content directive. This enables you to design a tailored action menu with your preferred components.

Example Usage:

<vc-action-menu 
  [menuItems]="menuItems" 
  [referenceData]="referenceData" 
  [actionMenuClass]="actionMenuClass" 
  [menuIconColor]="menuIconColor" 
>
  <!-- You can add custom content like vc-button or vc-svg-icon here -->
  <vc-button type="button" (buttonTap)="handleButtonClick()">
    <!-- Custom content for the button, such as text or additional icons -->
    Click Me
  </vc-button>
  
  <!-- Or, you can use vc-svg-icon for a custom SVG icon -->
  <vc-svg-icon [path]="'path-to-your-svg-icon.svg'"></vc-svg-icon>
</vc-action-menu>

Configuring Menu Items for vc-action-menu Component

To configure the menu items for the vc-action-menu component in your TypeScript file, you can create an array of MenuItems objects. Each object in the array represents a menu item with specific properties:

label: The display label for the menu item.
callback: The callback function that will be triggered when the menu item is clicked.
isDisabled: (Optional) A boolean flag indicating whether the menu item is disabled or not. Default: false
icon: (Optional) The path to the icon associated with the menu item. You can use both SVG and PNG icons.

// Example usage in TS file:

import { MenuItems } from '@viitorcloudtechnologies/ng-utility-library';

// Define an array of menu items
menuItems: MenuItems[] = [
  {
    label: "Edit",
    callback: this.handleItemClick.bind(this),
    isDisabled: true,
    icon: "../assets/images/copy.png"
  },
  {
    label: "Copy",
    callback: this.handleItemClick.bind(this),
    icon: '../assets/images/edit.svg'
  },
  {
    label: "Delete",
    callback: this.handleItemClick.bind(this),
    isDisabled: false,
    icon: '../assets/images/delete.svg'
  }
];

// Callback function for menu item click
handleItemClick(item: any, referenceData: any): void {
  // Perform actions based on the clicked menu item
  // For example, you can trigger specific functionality or update the UI.
  // Access the menu item properties using 'item' and additional reference data using 'referenceData'.
}

vc-snackbar Component :information_source:

The vc-snackbar component provides a simple way to display short-lived messages to users. It can be used to show notifications, alerts, or other informative messages.

Example Usage of `vc-snackbar` in Component with Default Configurations:

import { Component, ElementRef, ViewContainerRef } from '@angular/core';
import { VcSnackbarService, SnackbarConfig, SnackbarDefaultConfig, SnackbarDefaultStyle, SnackbarStyleConfig } from 'ng-utility-library';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {

  constructor(
    private snackbar: VcSnackbarService,
    private viewContainerRef: ViewContainerRef,
    private el: ElementRef
  ) { 
    this.snackbar.setRootViewContainerRef(this.viewContainerRef, this.el);
  }

  openSnackbar() {
    // Default configuration options for the snackbar
    const options: SnackbarConfig = SnackbarDefaultConfig;
    // Default style configuration for the snackbar
    const styleConfig: SnackbarStyleConfig = SnackbarDefaultStyle;
    // Show the snackbar with the default options and style
    this.snackbar.showSnackbar(options, styleConfig);
  }
}

Configurations

The vc-snackbar component is highly customizable. You can modify the snackbar's appearance, position, and behavior to suit your application's design and requirements. The VcSnackbarService in NG Utility Library provides a flexible and customizable snackbar component with configurations for both appearance and behavior.

SnackbarStyleConfig

You can customize the appearance of the snackbar by providing a SnackbarStyleConfig object. This configuration includes:

color: The text color of the snackbar.
backgroundColor: The background color of the snackbar.
width: The width of the snackbar.

SnackbarConfig

The overall behavior and content of the snackbar can be configured using the SnackbarConfig object. Configuration options include:

duration: The duration in milliseconds for which the snackbar will be visible. Default: 3000.
horizontalPosition: The horizontal position of the snackbar. Possible values: 'start', 'center', 'end'. Default: 'center'.
verticalPosition: The vertical position of the snackbar. Possible values: 'top', 'bottom'. Default: 'bottom'.
action: The action text to be displayed on the snackbar.
message: The main message text to be displayed on the snackbar.
buttonClass: Custom CSS classes for styling the action button.
isActionIcon: If set to true, the action button will display an 'X' icon. Default: false. ...

Contributing :raising_hand:

Contributions to the 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. :octocat:

License :scroll:

The NG Utility Library is open-source software licensed under the MIT License. :memo:

Designed and developed by ViitorCloud Technologies Pvt. Ltd.. Enjoy using the Angular Utility Library! If you find it helpful, consider giving it a star. :star:

tslib

@everything-registry/sub-chunk-2921

1.0.0

5 months ago

Angular Utility Library :rocket:

Table of Contents :bookmark_tabs:

Installation :inbox_tray:

Usage :hammer_and_wrench:

Logger Service

Components

vc-input Component :keyboard:

Input Attributes:

Search Bar Example :mag_right:

vc-loader Component :hourglass_flowing_sand:

vc-button Component :ok:

Button Attributes:

vc-svg-icon Component :art:

Example Usage in TS File:

Example Usage in HTML File:

vc-action-menu Component :arrow_right_hook:

Input Attributes:

Configuring Menu Items for vc-action-menu Component

vc-snackbar Component :information_source:

Example Usage of vc-snackbar in Component with Default Configurations:

Configurations

SnackbarStyleConfig

SnackbarConfig

Contributing :raising_hand:

License :scroll:

Example Usage of `vc-snackbar` in Component with Default Configurations: