# ui-layout

This library provides utilities and directives for responsive design and viewport behavior 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.
- **InViewport Directive**: Emits events when elements enter or leave the viewport.
- **CloseOnScroll Directive**: Emits events when scrolling occurs outside a specified element (useful for closing overlays).

## 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>
```

### CloseOnScroll Directive

Use this directive to close overlays (dropdowns, popovers) when the user scrolls the page, while allowing scrolling within the overlay itself.

```typescript
// As hostDirective with programmatic configuration:
@Component({
  hostDirectives: [{ directive: CloseOnScrollDirective, outputs: ['closeOnScroll'] }],
  host: { '(closeOnScroll)': 'close()' },
})
export class MyOverlayComponent {
  readonly #closeOnScroll = inject(CloseOnScrollDirective, { self: true });
  readonly panel = viewChild<ElementRef<HTMLElement>>('panel');

  constructor() {
    effect(() => {
      this.#closeOnScroll.closeOnScrollWhen.set(this.isOpen());
      this.#closeOnScroll.closeOnScrollExclude.set(this.panel()?.nativeElement);
    });
  }
}
```

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