ISA-Frontend/libs/ui/layout

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.

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.

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

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

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