open-index/open-npm huggingface dataset:
npm package: @ngx-better-forms/better-forms
Description: An Angular library that provides better form utilities and conditional validators for cleaner, more maintainable forms.
Latest version: 0.0.3

# 📋 ngx-better-forms

Better, cleaner, and more maintainable reactive form utilities for Angular.

![status](https://img.shields.io/badge/status-experimental-orange?style=flat-square)
[![Build](https://github.com/bioroxx/ngx-better-forms/actions/workflows/ci.yml/badge.svg)](https://github.com/bioroxx/ngx-better-forms/actions/workflows/test-lib.yml)
[![npm version](https://img.shields.io/npm/v/@ngx-better-forms/better-forms?logo=npm&style=flat-square)](https://www.npmjs.com/package/@ngx-better-forms/better-forms)
[![License](https://img.shields.io/github/license/bioroxx/ngx-better-forms?style=flat-square)](LICENSE)

---

## 🚀 Features

- 🧩 Conditional validators for complex reactive forms
- ⚡ Utility methods to simplify control management
- 🧪 >95% unit tested

## 📘 Documentation

[https://bioroxx.github.io/ngx-better-forms](https://bioroxx.github.io/ngx-better-forms)

## 📦 Installation

```bash
npm install @ngx-better-forms/better-forms
```

## 💡 Example Usage

See short examples below.

You can find a full feature showcase in the [documentation](https://bioroxx.github.io/ngx-better-forms).

### Conditional Validators

Add validators to a target `FormControl`, based on the current value of another FormControl.

```ts
formGroup = this.formBuilder.group(
  {
    field1: new FormControl<string>(''),
    target: new FormControl<string>(''),
  },
  {
    validators: [
      BetterValidation.conditionalValidators({
        targetControlPath: 'target',
        targetValidators: [Validators.required],
        conditions: [
          {
            controlPath: 'field1',
            testValues: ['a', 'b'],
          },
        ],
      }),
    ],
  },
);
```

### Conditional Disable

```ts
formGroup = this.formBuilder.group(
  {
    field1: new FormControl<string>(''),
    target: new FormControl<string>(''),
  },
  {
    validators: [
      BetterDisable.conditionalDisable({
        targetControlPath: 'target',
        conditions: [
          {
            controlPath: 'field1',
            testValues: ['a', 'b'],
          },
        ],
      }),
    ],
  },
);
```

> ⚠️ **Disclaimer:**  
> This library is currently in very early development.  
> Features, APIs, and behavior may change without notice — use with caution, but be inspired. ✨
npm package: @ngx-bio-components/alert
Description: ```typescript import { BioAlertModule } from '@ngx-bio-components/alert'; ```
Author: Umut Yerebakmaz
Latest version: 0.0.7

# @ngx-bio-components/alert

```typescript
import { BioAlertModule } from '@ngx-bio-components/alert';
```

```html
<bio-alert [alert]="alert"></bio-alert>
```

```typescript
export type Alert = {
    type?: 'error' | 'success' | 'warning' | 'info';
    messages?: string[];
    message?: string;
    headerText?: string;
    show?: boolean;
};
```

<table>
    <tbody>
<tr>
      <th>Name</th>
      <th>Description</th>
<tr>
  <td>
<code>@Input() alert: Alert</code>
  </td>
  <td>
Alert input
</td>
</tr>
<tr>
  <td>
<code>@Output() buttonClicked: EventEmitter</code>
  </td>
  <td>
Alert input
</td>
</tr>
</tbody></table>

warning
<img width="1769" alt="Ekran Resmi 2022-08-17 18 16 01" src="https://user-images.githubusercontent.com/13598231/185348836-930f5362-ad3b-4a11-9dbb-81772573141d.png">

error with header text and messages array

<img width="1773" alt="Ekran Resmi 2022-08-17 18 15 32" src="https://user-images.githubusercontent.com/13598231/185348911-d6a5b216-6ef1-4d09-a59d-caf4fe471cb4.png">

success

<img width="1773" alt="Ekran Resmi 2022-08-17 18 15 52" src="https://user-images.githubusercontent.com/13598231/185348982-c36ba014-5395-4db2-8bce-f67b70877445.png">

info

<img width="1772" alt="Ekran Resmi 2022-08-17 18 15 41" src="https://user-images.githubusercontent.com/13598231/185349029-b0dc9fc9-ddbf-4348-be65-b0a9a21d7360.png">
npm package: @ngx-bio-components/avatar
Description: ```typescript import { BioButtonModule } from '@ngx-bio-components/avatar'; ```
Author: Umut Yerebakmaz
Latest version: 0.0.15

# @ngx-bio-components/avatar

```typescript
import { BioButtonModule } from '@ngx-bio-components/avatar';
```

```html
<bio-avatar [avatar]="avatar"></bio-avatar>
```

```typescript
export type Avatar = {
    shape?: 'circular' | 'rounded';
    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    badgePosition?: 'topRight' | 'bottomRigh';
    badgeColor?: 'gray' | 'red' | 'green';
    img?: string | undefined | null;
    alt?: string;
    placeholder?: string;
    path?: string;
};
```

<table>
    <tbody>
<tr>
      <th>Name</th>
      <th>Description</th>
    </th>
<tr>
  <td>
<code>@Input() avatar: Avatar</code>
  </td>
  <td>Avatar input
</td>
</tr>
</tbody></table>

<img width="1304" alt="Ekran Resmi 2022-08-15 17 04 15" src="https://user-images.githubusercontent.com/13598231/184650828-691dc1f2-d406-4370-80e9-d70fd6edf86a.png">

<img width="1308" alt="Ekran Resmi 2022-08-15 17 04 28" src="https://user-images.githubusercontent.com/13598231/184650919-a8e43b43-aeae-4d22-8a5d-937421127650.png">
npm package: @ngx-bio-components/badge
Description: API reference for Bio badge
Author: Umut Yerebakmaz
Latest version: 0.1.1

# @ngx-bio-components/badge

API reference for Bio badge

```typescript
import { BioBadgeModule } from '@ngx-bio-components/badge';
```

```html
<bio-badge [size]="size" [shape]="shape" [color]="color" [border]="border">
    <svg class="h-1.5 w-1.5 fill-indigo-500" viewBox="0 0 6 6" aria-hidden="true">
        <circle cx="3" cy="3" r="3" />
    </svg>
    Badge
</bio-badge>
```

## Type aliases

### BioBadgeSize

Allowed size options for `bioBadgeSize`

```typescript
type BioBadgeSize = 'normal' | 'small';
```

### BioBadgeShape

Allowed shape options for `bioBadgeShape`

```typescript
type BioBadgeShape = 'flat' | 'pill';
```

### BioBadgeColor

Allowed color options for `bioBadgeColor`

```typescript
type BioBadgeColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
```

### BioBadgeBorder

Allowed border options for `bioBadgeBorder`

```typescript
type BioBadgeBorder = boolean;
```

<table>
    <tbody>
<tr>
      <th>Name</th>
      <th>Description</th>
    </th>
<tr>
  <td>
<code>@Input('biBadgeSize')<br>size: BioBadgeSize
</code>
  </td>
  <td>The size of the badge. Can be normal or small.
</td>
</tr>
<tr>
  <td>
<code>@Input('bioBadgeShape')<br>shape: BioBadgeShape
</code>
  </td>
  <td>The shape of the badge. Can be flat or pill.
</td>
</tr>
<tr>
  <td>
<code>@Input('bioBadgeColor')<br>color: BioBadgeColor</code>
  </td>
  <td>The color of the badge. Can be gray, red, yellow, green, blue, indigo, purple or pink.
</td>
</tr>
<tr>
  <td>
<code>@Input('bioBadgeBorder')<br>border: boolean</code>
  </td>
  <td>The border of the badge. Can be true or false.
</td>
</tr>
</tbody></table>
npm package: @ngx-bio-components/button
Description: BioButton buttons are native `<button>` elements enhanced with Tailwind Design styling.
Author: Umut Yerebakmaz
Latest version: 0.0.20

# @ngx-bio-components/button

BioButton buttons are native `<button>` elements enhanced with Tailwind Design styling.

Native `<button>` elements are always used in order to provide the most straightforward and accessible experience for users. A `<button>` element should be used whenever some _action_ is performed.

There are several button variants, each applied as an attribute:

## Color Types

Buttons can be colored in terms of the current theme using the `color` property to set the background color to `primary`, `secondary`, or `white`.

## Size Types

Buttons can be sized in terms of the current theme using the `size` property to set the button size to `xs`, `sm`, `md`, `lg` and `xl`.

## Accessibility

`@ngx-bio-components/button` uses native `<button>` element to ensure an accessible experience by default. A `<button>` element should be used for any interaction that _performs an action on the current page_. All standard accessibility best practices for buttons apply to `BioButton`.

```typescript
import { BioButtonModule } from '@ngx-bio-components/button';
```

## Directives

`BioButton`

Selectors: `button[bio-button], button[bio-circular-button], button[bio-round-button]`

Exported as: bioButton

```html
<button bio-button [color]="color" [size]="size" [disabled]="disabled" [type]="type">Button</button>
```

<table>
    <tbody>
<tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
<tr>
  <td>
<div>
@Input()
</div>
<p><code>color: 'primary' | 'secondary' | 'white'</code></p>
  </td>
  <td><p>primary is default color.</p>
</td>
</tr>
<tr>
  <td>
<div>
@Input()
</div>
<p><code>type: 'button' | 'reset' | 'submit'</code></p>
  </td>
  <td><p>submit is default type.</p>
</td>
</tr>
<tr>
  <td>
<div>
@Input()
</div>
<p><code>size: 'xs' | 'sm' | 'md' | 'lg' 'xl'</code></p>
  </td>
  <td><p>sm is default size.</p>
</td>
</tr>
<tr>
  <td>
<div>
          @Input()</div><p>
      <code>disabled: boolean</code>
    </p>
  </td>
  <td><p>Whether the component is disabled.</p>
</td>
</tr>
  </tbody></table>
npm package: @ngx-bio-components/tooltip
Description: ```typescript import { BioTooltipModule } from '@ngx-bio-components/tooltip'; ```
Author: Umut Yerebakmaz
Latest version: 0.0.1

# @ngx-bio-components/tooltip

```typescript
import { BioTooltipModule } from '@ngx-bio-components/tooltip';
```

## Directives

`BioTooltip`

Directive that attaches a bio tooltip to the host element. Animates the showing and hiding of a tooltip provided position (defaults to below the element).

Selectors: `[bioTooltip]`

```html
<button bioTooltip="It's a Bio tooltip message"></button>
```

<table>
    <tbody>
<tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
<tr>
  <td>
<div>
@Input()
</div>
<p><code>bioTooltip: string</code></p>
  </td>
  <td><p>tooltip message.</p>
</td>
</tr>
<tr>
  </tbody></table>