npm package: @hichchi/ngx-ui
Description: A comprehensive UI component library for Angular applications
Author: Waruna Udayanga
Latest version: 0.0.12

<!--suppress ALL -->

<div align="center">
  <h1>🎨 @hichchi/ngx-ui</h1>
  <p>
    <strong>A comprehensive UI component library for Angular applications</strong>
  </p>
  <p>
    <a href="https://www.npmjs.com/package/@hichchi/ngx-ui">
      <img src="https://img.shields.io/npm/v/@hichchi/ngx-ui?style=flat-square&color=blue" alt="npm version">
    </a>
    <a href="https://www.npmjs.com/package/@hichchi/ngx-ui">
      <img src="https://img.shields.io/npm/dm/@hichchi/ngx-ui?style=flat-square&color=green" alt="npm downloads">
    </a>
    <a href="https://github.com/hichchidev/hichchi/blob/main/LICENSE">
      <img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="License">
    </a>
    <img src="https://img.shields.io/badge/angular-19.0.0-red?style=flat-square" alt="Angular Version">
  </p>
  <p>
    <em>Part of the <a href="https://github.com/hichchidev/hichchi">Hichchi</a> ecosystem - A powerful, scalable application built with Nx workspace</em>
  </p>
</div>

---

## 📦 Installation

```bash
npm install @hichchi/ngx-ui
```

## 🌟 Overview

This library provides a comprehensive collection of UI components and utilities for Angular applications. It includes reusable components, directives, pipes, and styling utilities to help build consistent and beautiful user interfaces.

## ✨ Key Features

- 🧩 **UI Components**: Pre-built, customizable components for common UI patterns
- 🎯 **Directives**: Useful directives for enhanced functionality
- 🔧 **Pipes**: Custom pipes for data transformation and formatting
- 🎨 **Styling Utilities**: CSS utilities and theming support
- 📱 **Responsive Design**: Mobile-first, responsive components
- ♿ **Accessibility**: WCAG compliant components with proper ARIA support

## 🚀 Usage

### Using UI Components

```typescript
import { NgModule } from "@angular/core";
import { HichchiUiModule } from "@hichchi/ngx-ui";

@NgModule({
  imports: [HichchiUiModule],
})
export class AppModule {}
```

### Button Component

```typescript
import { Component } from "@angular/core";

@Component({
  selector: "app-example",
  template: `
    <hichchi-button variant="primary" size="large" (click)="handleClick()">
      Click Me
    </hichchi-button>

    <hichchi-button
      variant="secondary"
      [disabled]="isLoading"
      [loading]="isLoading"
    >
      Submit
    </hichchi-button>
  `,
})
export class ExampleComponent {
  isLoading = false;

  handleClick() {
    console.log("Button clicked!");
  }
}
```

### Card Component

```typescript
import { Component } from "@angular/core";

@Component({
  selector: "app-card-example",
  template: `
    <hichchi-card>
      <hichchi-card-header>
        <h3>Card Title</h3>
      </hichchi-card-header>
      <hichchi-card-content>
        <p>This is the card content area.</p>
      </hichchi-card-content>
      <hichchi-card-footer>
        <hichchi-button variant="primary">Action</hichchi-button>
      </hichchi-card-footer>
    </hichchi-card>
  `,
})
export class CardExampleComponent {}
```

---

## 🔧 Development

### Building

```bash
nx build ngx-ui
```

### Running unit tests

```bash
nx test ngx-ui
```

Tests are executed via [Jest](https://jestjs.io).

---

<div align="center">

**Made with ❤️ by [Hichchi Dev](https://github.com/hichchidev)**

[![Hichchi Ecosystem](https://img.shields.io/badge/🏠_Hichchi_Ecosystem-blue)](https://github.com/hichchidev/hichchi)
[![Report Bug](https://img.shields.io/badge/🐛_Report_Bug-red)](https://github.com/hichchidev/hichchi/issues)
[![Request Feature](https://img.shields.io/badge/✨_Request_Feature-green)](https://github.com/hichchidev/hichchi/issues)

_Building the future of user interfaces, one commit at a time_

</div>

---

# 📖 API Documentation

Complete technical reference for all classes, interfaces, methods, and types in this library.

**Auto-generated by TypeDoc** - Browse through detailed API references, code examples, and implementation guides below.

<!-- TypeDoc generated documentation will be appended below this point -->

---

## 📋 API Table of Contents

- [Classes](#classes)
  - [ButtonComponent](#buttoncomponent)
  - [HcCardComponent](#hccardcomponent)
  - [HcSeparatorComponent](#hcseparatorcomponent)

## Classes

### ButtonComponent

Defined in: [button/button.component.ts:50](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/button/button.component.ts#L50)

Reusable button component for the Hichchi UI library

This component provides a customizable button with consistent styling and behavior
across the application. It supports different colors, types, and custom CSS classes
while maintaining accessibility and user experience standards.

The component uses Angular's new signal-based inputs and outputs for better
performance and reactivity.

#### Examples

```html
<!-- Basic button -->
<hc-button>Click me</hc-button>
```

```html
<!-- Button with custom color and type -->
<hc-button
  [color]="'secondary'"
  [type]="'button'"
  (onClick)="handleClick($event)"
>
  Submit Form
</hc-button>
```

```html
<!-- Button with custom CSS classes -->
<hc-button [class]="'my-custom-class another-class'" [color]="'danger'">
  Delete Item
</hc-button>
```

#### See

- HcColor Type defining available color options
- ButtonType Type defining available button types

#### Constructors

##### Constructor

```ts
new ButtonComponent(): ButtonComponent;
```

###### Returns

[`ButtonComponent`](#buttoncomponent)

#### Properties

<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
<th>Defined in</th>
</tr>
</thead>
<tbody>
<tr>
<td>

<a id="property-class"></a> `class`

</td>
<td>

`InputSignal`<`string`>

</td>
<td>

Additional CSS classes to apply to the button

Allows for custom styling by adding extra CSS classes to the button element.
Multiple classes can be specified as a space-separated string.

**Default**

```ts
"";
```

</td>
<td>

[button/button.component.ts:70](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/button/button.component.ts#L70)

</td>
</tr>
<tr>
<td>

<a id="property-color"></a> `color`

</td>
<td>

`InputSignal`<`HcColor`>

</td>
<td>

The color theme of the button

Determines the visual appearance of the button based on predefined color schemes.
Each color represents a different semantic meaning (primary for main actions,
secondary for alternative actions, danger for destructive actions, etc.).

**Default**

```ts
"primary";
```

</td>
<td>

[button/button.component.ts:60](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/button/button.component.ts#L60)

</td>
</tr>
<tr>
<td>

<a id="property-onclick"></a> `onClick`

</td>
<td>

`OutputEmitterRef`<`MouseEvent`>

</td>
<td>

Event emitted when the button is clicked

Emits the native MouseEvent when the user clicks the button, allowing
parent components to handle the click interaction. The event contains
information about the click such as coordinates, modifier keys, etc.

**Example**

```typescript
handleButtonClick(event: MouseEvent) {
  console.log('Button clicked at:', event.clientX, event.clientY);
  // Handle the click event
}
```

</td>
<td>

[button/button.component.ts:100](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/button/button.component.ts#L100)

</td>
</tr>
<tr>
<td>

<a id="property-type"></a> `type`

</td>
<td>

`InputSignal`<`ButtonType`>

</td>
<td>

The HTML button type attribute

Specifies the behavior of the button when used within forms.

- "submit": Submits the form (default)
- "button": Regular button with no default behavior
- "reset": Resets the form to its initial state

**Default**

```ts
"submit";
```

</td>
<td>

[button/button.component.ts:82](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/button/button.component.ts#L82)

</td>
</tr>
</tbody>
</table>

---

### HcCardComponent

Defined in: [hc-card/hc-card.component.ts:57](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/hc-card/hc-card.component.ts#L57)

Reusable card component for the Hichchi UI library

This component provides a container with consistent card styling that can be used
to group related content together. Cards are commonly used for displaying information
in a structured, visually appealing way with proper spacing, borders, and shadows.

The component acts as a content wrapper and uses Angular's content projection
to display any content passed between the opening and closing tags.

#### Examples

```html
<!-- Basic card -->
<hc-card>
  <h3>Card Title</h3>
  <p>This is some card content.</p>
</hc-card>
```

```html
<!-- Card with form content -->
<hc-card>
  <form>
    <input type="text" placeholder="Enter your name" />
    <hc-button type="submit">Submit</hc-button>
  </form>
</hc-card>
```

```html
<!-- Card with mixed content -->
<hc-card>
  <div class="card-header">
    <h2>User Profile</h2>
  </div>
  <div class="card-body">
    <p>User information goes here...</p>
  </div>
  <div class="card-footer">
    <hc-button>Edit Profile</hc-button>
  </div>
</hc-card>
```

#### See

[ButtonComponent](#buttoncomponent) Related button component often used within cards

#### Constructors

##### Constructor

```ts
new HcCardComponent(): HcCardComponent;
```

###### Returns

[`HcCardComponent`](#hccardcomponent)

---

### HcSeparatorComponent

Defined in: [hc-separator/hc-separator.component.ts:59](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts#L59)

Reusable separator component for the Hichchi UI library

This component provides a visual separator element that can be used to divide
content sections within a page or form. It supports an optional label that can
be displayed within or alongside the separator line.

Separators are useful for creating visual breaks between different sections of
content, improving readability and organization of the user interface.

#### Examples

```html
<!-- Basic separator without label -->
<hc-separator></hc-separator>
```

```html
<!-- Separator with label -->
<hc-separator [label]="'Personal Information'"></hc-separator>
```

```html
<!-- Using separator in a form -->
<form>
  <input type="text" placeholder="First Name" />
  <input type="text" placeholder="Last Name" />

  <hc-separator [label]="'Contact Details'"></hc-separator>

  <input type="email" placeholder="Email" />
  <input type="tel" placeholder="Phone" />
</form>
```

```html
<!-- Using separator between content sections -->
<div>
  <h2>Section 1</h2>
  <p>Content for section 1...</p>

  <hc-separator [label]="'OR'"></hc-separator>

  <h2>Section 2</h2>
  <p>Content for section 2...</p>
</div>
```

#### Constructors

##### Constructor

```ts
new HcSeparatorComponent(): HcSeparatorComponent;
```

###### Returns

[`HcSeparatorComponent`](#hcseparatorcomponent)

#### Properties

<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
<th>Defined in</th>
</tr>
</thead>
<tbody>
<tr>
<td>

<a id="property-label"></a> `label`

</td>
<td>

`InputSignal`<`string`>

</td>
<td>

Optional label text to display with the separator

When provided, this text will be displayed as part of the separator,
typically centered within or alongside the separator line. This is useful
for creating labeled dividers that help organize content sections.

**Default**

```ts
"";
```

</td>
<td>

[hc-separator/hc-separator.component.ts:69](https://github.com/hichchidev/hichchi/blob/451086b0863c82a6952d5ee0c05bf458abaaa227/libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts#L69)

</td>
</tr>
</tbody>
</table>