# ui-layout

This library provides utilities and directives for responsive design in Angular applications.

## Features

- **Breakpoint Utility**: A function to detect viewport breakpoints using Angular's `BreakpointObserver`.
- **Breakpoint Directive**: A structural directive to conditionally render templates based on viewport breakpoints.

## Installation

Ensure you have Angular and its dependencies installed. Then, include this library in your Angular project.

## Usage

### Breakpoint Utility

The `breakpoint` function allows you to create a Signal that evaluates to `true` if the current viewport matches the specified breakpoints.

```typescript
import { breakpoint, Breakpoint } from 'ui-layout';

const isTablet = breakpoint(Breakpoint.Tablet);
```

### Breakpoint Directive

The `uiBreakpoint` directive conditionally includes a template based on the viewport's breakpoint.

```html
<ng-container *uiBreakpoint="'tablet'">
  This content is visible only on tablet viewports.
</ng-container>
```

### InViewport Directive

Use this directive to emit an event whenever the host element enters or leaves the viewport.

```html
<some-element uiInViewport (uiInViewport)="onInViewportChange($event)"> ... </some-element>
```

## Breakpoints Table

| Breakpoint   | CSS Media Query Selector                      |
| ------------ | --------------------------------------------- |
| `tablet`     | `(max-width: 1279px)`                         |
| `desktop`    | `(min-width: 1280px) and (max-width: 1439px)` |
| `dekstop-l`  | `(min-width: 1440px) and (max-width: 1919px)` |
| `dekstop-xl` | `(min-width: 1920px)`                         |

## Running Unit Tests

Run `nx test ui-layout` to execute the unit tests.
