GitHub

Breakpoints

Breakpoints provides utilities for observing and reacting to viewport size changes.

Services

NoopBreakpointObserver

import { NoopBreakpointObserver } from '@daffodil/design'

A no-op implementation of Angular CDK's BreakpointObserver that always reports no breakpoints as matched. Useful for server-side rendering or testing contexts where browser layout APIs are unavailable.

@Injectable()
class NoopBreakpointObserver implements Omit<BreakpointObserver, never> {
  isMatched(value: string | readonly string[]): boolean
  observe(value: string | readonly string[]): any
}

() Methods

isMatched
boolean

Always returns false, indicating that none of the given media queries are active.

Parameters
Parametervalue: string | readonly string[]
Description
observe
any

Returns an observable that never emits a BreakpointState, making breakpoint-dependent logic inert.

Parameters
Parametervalue: string | readonly string[]
Description

Tokens

SERVER_SAFE_BREAKPOINT_OBSERVER

import { SERVER_SAFE_BREAKPOINT_OBSERVER } from '@daffodil/design'

Provides a NoopBreakpointObserver if the platform is not browser.

const SERVER_SAFE_BREAKPOINT_OBSERVER: InjectionToken<Pick<BreakpointObserver, "ngOnDestroy" | "isMatched" | "observe">>

Types

DaffBreakpoints

import { DaffBreakpoints } from '@daffodil/design'

Sensible breakpoints for layouts and interfaces used across @daffodil/design components.

enum DaffBreakpoints {
  DESKTOP = DaffBreakpoints.DESKTOP,
  LAPTOP = DaffBreakpoints.LAPTOP,
  SMALL_LAPTOP = DaffBreakpoints.SMALL_LAPTOP,
  BIG_TABLET = DaffBreakpoints.BIG_TABLET,
  TABLET = DaffBreakpoints.TABLET,
  MOBILE = DaffBreakpoints.MOBILE,
}

Properties

DESKTOP
DaffBreakpoints.DESKTOP

min-width: 1920px

LAPTOP
DaffBreakpoints.LAPTOP

min-width: 1440px

SMALL_LAPTOP
DaffBreakpoints.SMALL_LAPTOP

min-width: 1200px

BIG_TABLET
DaffBreakpoints.BIG_TABLET

min-width: 1024px

TABLET
DaffBreakpoints.TABLET

min-width: 768px

MOBILE
DaffBreakpoints.MOBILE

min-width: 480px