UNPKG

@ngbracket/ngx-layout

Version:
797 lines (769 loc) 30.4 kB
import * as i0 from '@angular/core'; import { InjectionToken, OnDestroy, NgZone, OnChanges, ElementRef, SimpleChanges } from '@angular/core'; import { BehaviorSubject, Observable, Subject } from 'rxjs'; interface BreakPoint { mediaQuery: string; alias: string; suffix?: string; overlapping?: boolean; priority?: number; } /** * NOTE: Smaller ranges have HIGHER priority since the match is more specific */ declare const DEFAULT_BREAKPOINTS: BreakPoint[]; declare const ScreenTypes: { HANDSET: string; TABLET: string; WEB: string; HANDSET_PORTRAIT: string; TABLET_PORTRAIT: string; WEB_PORTRAIT: string; HANDSET_LANDSCAPE: string; TABLET_LANDSCAPE: string; WEB_LANDSCAPE: string; }; /** * Extended Breakpoints for handset/tablets with landscape or portrait orientations */ declare const ORIENTATION_BREAKPOINTS: BreakPoint[]; type OptionalBreakPoint = BreakPoint | null; /** * Registry of 1..n MediaQuery breakpoint ranges * This is published as a provider and may be overridden from custom, application-specific ranges * */ declare class BreakPointRegistry { readonly items: BreakPoint[]; constructor(list: BreakPoint[]); /** * Search breakpoints by alias (e.g. gt-xs) */ findByAlias(alias: string): OptionalBreakPoint; findByQuery(query: string): OptionalBreakPoint; /** * Get all the breakpoints whose ranges could overlapping `normal` ranges; * e.g. gt-sm overlaps md, lg, and xl */ get overlappings(): BreakPoint[]; /** * Get list of all registered (non-empty) breakpoint aliases */ get aliases(): string[]; /** * Aliases are mapped to properties using suffixes * e.g. 'gt-sm' for property 'layout' uses suffix 'GtSm' * for property layoutGtSM. */ get suffixes(): string[]; /** * Memoized lookup using custom predicate function */ private findWithPredicate; /** * Memoized BreakPoint Lookups */ private readonly findByMap; static ɵfac: i0.ɵɵFactoryDeclaration<BreakPointRegistry, never>; static ɵprov: i0.ɵɵInjectableDeclaration<BreakPointRegistry>; } /** * Injection token unique to the flex-layout library. * Use this token when build a custom provider (see below). */ declare const BREAKPOINTS: InjectionToken<BreakPoint[]>; type MediaQuerySubscriber = (changes: MediaChange) => void; /** * Class instances emitted [to observers] for each mql notification */ declare class MediaChange { matches: boolean; mediaQuery: string; mqAlias: string; suffix: string; priority: number; property: string; value: any; /** * @param matches whether the mediaQuery is currently activated * @param mediaQuery e.g. (min-width: 600px) and (max-width: 959px) * @param mqAlias e.g. gt-sm, md, gt-lg * @param suffix e.g. GtSM, Md, GtLg * @param priority the priority of activation for the given breakpoint */ constructor(matches?: boolean, mediaQuery?: string, mqAlias?: string, suffix?: string, priority?: number); /** Create an exact copy of the MediaChange */ clone(): MediaChange; } /** * For the specified MediaChange, make sure it contains the breakpoint alias * and suffix (if available). */ declare function mergeAlias(dest: MediaChange, source: OptionalBreakPoint): MediaChange; /** * Find all of the server-generated stylings, if any, and remove them * This will be in the form of inline classes and the style block in the * head of the DOM */ declare function removeStyles(_document: Document, platformId: Object): () => void; /** * Provider to remove SSR styles on the browser */ declare const BROWSER_PROVIDER: { provide: InjectionToken<(() => void)[]>; useFactory: typeof removeStyles; deps: InjectionToken<Document>[]; multi: boolean; }; declare const CLASS_NAME = "flex-layout-"; /** * ***************************************************************** * Define module for common Angular Layout utilities * ***************************************************************** */ declare class CoreModule { static ɵfac: i0.ɵɵFactoryDeclaration<CoreModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<CoreModule, never, never, never>; static ɵinj: i0.ɵɵInjectorDeclaration<CoreModule>; } /** * Utility to emulate a CSS stylesheet * * This utility class stores all of the styles for a given HTML element * as a readonly `stylesheet` map. */ declare class StylesheetMap { readonly stylesheet: Map<HTMLElement, Map<string, string | number>>; /** * Add an individual style to an HTML element */ addStyleToElement(element: HTMLElement, style: string, value: string | number): void; /** * Clear the virtual stylesheet */ clearStyles(): void; /** * Retrieve a given style for an HTML element */ getStyleForElement(el: HTMLElement, styleName: string): string; static ɵfac: i0.ɵɵFactoryDeclaration<StylesheetMap, never>; static ɵprov: i0.ɵɵInjectableDeclaration<StylesheetMap>; } declare const BREAKPOINT: InjectionToken<BreakPoint | BreakPoint[] | null>; interface Multiplier { readonly unit: string; readonly value: number; } declare function multiply(value: string, multiplier?: Multiplier): string; /** a set of configuration options for FlexLayoutModule */ interface LayoutConfigOptions { addFlexToParent?: boolean; addOrientationBps?: boolean; disableDefaultBps?: boolean; disableVendorPrefixes?: boolean; serverLoaded?: boolean; useColumnBasisZero?: boolean; printWithBreakpoints?: string[]; mediaTriggerAutoRestore?: boolean; ssrObserveBreakpoints?: string[]; multiplier?: Multiplier; defaultUnit?: string; detectLayoutDisplay?: boolean; } declare const DEFAULT_CONFIG: Required<LayoutConfigOptions>; declare const LAYOUT_CONFIG: InjectionToken<LayoutConfigOptions>; /** * Token that is provided to tell whether the FlexLayoutServerModule * has been included in the bundle * * NOTE: This can be manually provided to disable styles when using SSR */ declare const SERVER_TOKEN: InjectionToken<boolean>; /** * MediaMonitor configures listeners to mediaQuery changes and publishes an Observable facade to * convert mediaQuery change callbacks to subscriber notifications. These notifications will be * performed within the ng Zone to trigger change detections and component updates. * * NOTE: both mediaQuery activations and de-activations are announced in notifications */ declare class MatchMedia implements OnDestroy { protected _zone: NgZone; protected _platformId: object; protected _document: any; protected _nonce?: string | null | undefined; /** Initialize source with 'all' so all non-responsive APIs trigger style updates */ readonly source: BehaviorSubject<MediaChange>; registry: Map<string, MediaQueryList>; private readonly pendingRemoveListenerFns; constructor(_zone: NgZone, _platformId: object, _document: any, _nonce?: string | null | undefined); /** * Publish list of all current activations */ get activations(): string[]; /** * For the specified mediaQuery? */ isActive(mediaQuery: string): boolean; /** * External observers can watch for all (or a specific) mql changes. * * If a mediaQuery is not specified, then ALL mediaQuery activations will * be announced. */ observe(): Observable<MediaChange>; observe(mediaQueries: string[]): Observable<MediaChange>; observe(mediaQueries: string[], filterOthers: boolean): Observable<MediaChange>; /** * Based on the BreakPointRegistry provider, register internal listeners for each unique * mediaQuery. Each listener emits specific MediaChange data to observers */ registerQuery(mediaQuery: string | string[]): MediaChange[]; ngOnDestroy(): void; /** * Call window.matchMedia() to build a MediaQueryList; which * supports 0..n listeners for activation/deactivation */ protected buildMQL(query: string): MediaQueryList; protected _observable$: Observable<MediaChange>; static ɵfac: i0.ɵɵFactoryDeclaration<MatchMedia, [null, null, null, { optional: true; }]>; static ɵprov: i0.ɵɵInjectableDeclaration<MatchMedia>; } /** * Interface to apply PrintHook to call anonymous `target.updateStyles()` */ interface HookTarget { activatedBreakpoints: BreakPoint[]; updateStyles(): void; } declare const BREAKPOINT_PRINT: { alias: string; mediaQuery: string; priority: number; }; /** * PrintHook - Use to intercept print MediaQuery activations and force * layouts to render with the specified print alias/breakpoint * * Used in MediaMarshaller and MediaObserver */ declare class PrintHook implements OnDestroy { protected breakpoints: BreakPointRegistry; protected layoutConfig: LayoutConfigOptions; protected _document: any; constructor(breakpoints: BreakPointRegistry, layoutConfig: LayoutConfigOptions, _document: any); /** Add 'print' mediaQuery: to listen for matchMedia activations */ withPrintQuery(queries: string[]): string[]; /** Is the MediaChange event for any 'print' @media */ isPrintEvent(e: MediaChange): boolean; /** What is the desired mqAlias to use while printing? */ get printAlias(): string[]; /** Lookup breakpoints associated with print aliases. */ get printBreakPoints(): BreakPoint[]; /** Lookup breakpoint associated with mediaQuery */ getEventBreakpoints({ mediaQuery }: MediaChange): BreakPoint[]; /** Update event with printAlias mediaQuery information */ updateEvent(event: MediaChange): MediaChange; private registeredBeforeAfterPrintHooks; private isPrintingBeforeAfterEvent; private beforePrintEventListeners; private afterPrintEventListeners; private formerActivations; registerBeforeAfterPrintHooks(target: HookTarget): void; /** * Prepare RxJS tap operator with partial application * @return pipeable tap predicate */ interceptEvents(target: HookTarget): (event: MediaChange) => void; /** Stop mediaChange event propagation in event streams */ blockPropagation(): (event: MediaChange) => boolean; /** * Save current activateBreakpoints (for later restore) * and substitute only the printAlias breakpoint */ protected startPrinting(target: HookTarget, bpList: OptionalBreakPoint[]): void; /** For any print de-activations, reset the entire print queue */ protected stopPrinting(target: HookTarget): void; /** * To restore pre-Print Activations, we must capture the proper * list of breakpoint activations BEFORE print starts. OnBeforePrint() * is supported; so 'print' mediaQuery activations are used as a fallback * in browsers without `beforeprint` support. * * > But activated breakpoints are deactivated BEFORE 'print' activation. * * Let's capture all de-activations using the following logic: * * When not printing: * - clear cache when activating non-print breakpoint * - update cache (and sort) when deactivating * * When printing: * - sort and save when starting print * - restore as activatedTargets and clear when stop printing */ collectActivations(target: HookTarget, event: MediaChange): void; /** Teardown logic for the service. */ ngOnDestroy(): void; private isPrinting; private queue; private deactivations; static ɵfac: i0.ɵɵFactoryDeclaration<PrintHook, never>; static ɵprov: i0.ɵɵInjectableDeclaration<PrintHook>; } type ClearCallback = () => void; type UpdateCallback = (val: any) => void; interface ElementMatcher { element: HTMLElement; key: string; value: any; } /** * MediaMarshaller - register responsive values from directives and * trigger them based on media query events */ declare class MediaMarshaller { protected matchMedia: MatchMedia; protected breakpoints: BreakPointRegistry; protected hook: PrintHook; private _useFallbacks; private _activatedBreakpoints; private elementMap; private elementKeyMap; private watcherMap; private updateMap; private clearMap; private subject; get activatedAlias(): string; set activatedBreakpoints(bps: BreakPoint[]); get activatedBreakpoints(): BreakPoint[]; set useFallbacks(value: boolean); constructor(matchMedia: MatchMedia, breakpoints: BreakPointRegistry, hook: PrintHook); /** * Update styles on breakpoint activates or deactivates * @param mc */ onMediaChange(mc: MediaChange): void; /** * initialize the marshaller with necessary elements for delegation on an element * @param element * @param key * @param updateFn optional callback so that custom bp directives don't have to re-provide this * @param clearFn optional callback so that custom bp directives don't have to re-provide this * @param extraTriggers other triggers to force style updates (e.g. layout, directionality, etc) */ init(element: HTMLElement, key: string, updateFn?: UpdateCallback, clearFn?: ClearCallback, extraTriggers?: Observable<any>[]): void; /** * get the value for an element and key and optionally a given breakpoint * @param element * @param key * @param bp */ getValue(element: HTMLElement, key: string, bp?: string): any; /** * whether the element has values for a given key * @param element * @param key */ hasValue(element: HTMLElement, key: string): boolean; /** * Set the value for an input on a directive * @param element the element in question * @param key the type of the directive (e.g. flex, layout-gap, etc) * @param bp the breakpoint suffix (empty string = default) * @param val the value for the breakpoint */ setValue(element: HTMLElement, key: string, val: any, bp: string): void; /** Track element value changes for a specific key */ trackValue(element: HTMLElement, key: string): Observable<ElementMatcher>; /** update all styles for all elements on the current breakpoint */ updateStyles(): void; /** * clear the styles for a given element * @param element * @param key */ clearElement(element: HTMLElement, key: string): void; /** * update a given element with the activated values for a given key * @param element * @param key * @param value */ updateElement(element: HTMLElement, key: string, value: any): void; /** * release all references to a given element * @param element */ releaseElement(element: HTMLElement): void; /** * trigger an update for a given element and key (e.g. layout) * @param element * @param key */ triggerUpdate(element: HTMLElement, key?: string): void; /** Cross-reference for HTMLElement with directive key */ private buildElementKeyMap; /** * Other triggers that should force style updates: * - directionality * - layout changes * - mutationobserver updates */ private watchExtraTriggers; /** Breakpoint locator by mediaQuery */ private findByQuery; /** * get the fallback breakpoint for a given element, starting with the current breakpoint * @param bpMap * @param key */ private getActivatedValues; /** * Watch for mediaQuery breakpoint activations */ private observeActivations; static ɵfac: i0.ɵɵFactoryDeclaration<MediaMarshaller, never>; static ɵprov: i0.ɵɵInjectableDeclaration<MediaMarshaller>; } declare class StyleUtils { private _serverStylesheet; private _serverModuleLoaded; private _platformId; private layoutConfig; constructor(_serverStylesheet: StylesheetMap, _serverModuleLoaded: boolean, _platformId: Object, layoutConfig: LayoutConfigOptions); /** * Applies styles given via string pair or object map to the directive element */ applyStyleToElement(element: HTMLElement, style: StyleDefinition | string, value?: string | number | null): void; /** * Applies styles given via string pair or object map to the directive's element */ applyStyleToElements(style: StyleDefinition, elements?: HTMLElement[]): void; /** * Determine the DOM element's Flexbox flow (flex-direction) * * Check inline style first then check computed (stylesheet) style */ getFlowDirection(target: HTMLElement): [string, string]; hasWrap(target: HTMLElement): boolean; /** * Find the DOM element's raw attribute value (if any) */ lookupAttributeValue(element: HTMLElement, attribute: string): string; /** * Find the DOM element's inline style value (if any) */ lookupInlineStyle(element: HTMLElement, styleName: string): string; /** * Determine the inline or inherited CSS style * NOTE: platform-server has no implementation for getComputedStyle */ lookupStyle(element: HTMLElement, styleName: string, inlineOnly?: boolean): string; /** * Applies the styles to the element. The styles object map may contain an array of values * Each value will be added as element style * Keys are sorted to add prefixed styles (like -webkit-x) first, before the standard ones */ private _applyMultiValueStyleToElement; static ɵfac: i0.ɵɵFactoryDeclaration<StyleUtils, never>; static ɵprov: i0.ɵɵInjectableDeclaration<StyleUtils>; } /** * Definition of a css style. Either a property name (e.g. "flex-basis") or an object * map of property name and value (e.g. {display: 'none', flex-order: 5}) */ type StyleDefinition = { [property: string]: string | number | null; }; /** A class that encapsulates CSS style generation for common directives */ declare abstract class StyleBuilder { /** Whether to cache the generated output styles */ shouldCache: boolean; /** Build the styles given an input string and configuration object from a host */ abstract buildStyles(input: string, parent?: object): StyleDefinition; /** * Run a side effect computation given the input string and the computed styles * from the build task and the host configuration object * NOTE: This should be a no-op unless an algorithm is provided in a subclass */ sideEffect(_input: string, _styles: StyleDefinition, _parent?: object): void; } declare abstract class BaseDirective2 implements OnChanges, OnDestroy { protected elementRef: ElementRef; protected styleBuilder: StyleBuilder; protected styler: StyleUtils; protected marshal: MediaMarshaller; protected DIRECTIVE_KEY: string; protected inputs: string[]; /** The most recently used styles for the builder */ protected mru: StyleDefinition; protected destroySubject: Subject<void>; protected currentValue: any; /** Access to host element's parent DOM node */ protected get parentElement(): HTMLElement | null; /** Access to the HTMLElement for the directive */ protected get nativeElement(): HTMLElement; /** Access to the activated value for the directive */ get activatedValue(): string; set activatedValue(value: string); /** Cache map for style computation */ protected styleCache: Map<string, StyleDefinition>; protected constructor(elementRef: ElementRef, styleBuilder: StyleBuilder, styler: StyleUtils, marshal: MediaMarshaller); /** For @Input changes */ ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** Register with central marshaller service */ protected init(extraTriggers?: Observable<any>[]): void; /** Add styles to the element using predefined style builder */ protected addStyles(input: string, parent?: Object): void; /** Remove generated styles from an element using predefined style builder */ protected clearStyles(): void; /** Force trigger style updates on DOM element */ protected triggerUpdate(): void; /** * Determine the DOM element's Flexbox flow (flex-direction). * * Check inline style first then check computed (stylesheet) style. * And optionally add the flow value to element's inline style. */ protected getFlexFlowDirection(target: HTMLElement, addIfMissing?: boolean): string; protected hasWrap(target: HTMLElement): boolean; /** Applies styles given via string pair or object map to the directive element */ protected applyStyleToElement(style: StyleDefinition, value?: string | number, element?: HTMLElement): void; protected setValue(val: any, bp: string): void; protected updateWithValue(input: string): void; static ɵfac: i0.ɵɵFactoryDeclaration<BaseDirective2, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDirective2, never, never, {}, {}, never, never, true, never>; } /** * MockMatchMedia mocks calls to the Window API matchMedia with a build of a simulated * MockMediaQueryListener. Methods are available to simulate an activation of a mediaQuery * range and to clearAll mediaQuery listeners. */ declare class MockMatchMedia extends MatchMedia { _document: any; private _breakpoints; autoRegisterQueries: boolean; useOverlaps: boolean; constructor(_zone: NgZone, _platformId: Object, _document: any, _breakpoints: BreakPointRegistry); /** Easy method to clear all listeners for all mediaQueries */ clearAll(): void; /** Feature to support manual, simulated activation of a mediaQuery. */ activate(mediaQuery: string, useOverlaps?: boolean): boolean; setNonce(nonce: string | null): void; /** Converts an optional mediaQuery alias to a specific, valid mediaQuery */ _validateQuery(queryOrAlias: string): string; /** * Manually onMediaChange any overlapping mediaQueries to simulate * similar functionality in the window.matchMedia() */ private _activateWithOverlaps; /** * */ private _activateByAlias; /** * */ private _activateByQuery; /** Deactivate all current MQLs and reset the buffer */ private _deactivateAll; /** Insure the mediaQuery is registered with MatchMedia */ private _registerMediaQuery; /** * Call window.matchMedia() to build a MediaQueryList; which * supports 0..n listeners for activation/deactivation */ protected buildMQL(query: string): MediaQueryList; protected get hasActivated(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration<MockMatchMedia, never>; static ɵprov: i0.ɵɵInjectableDeclaration<MockMatchMedia>; } /** * Pre-configured provider for MockMatchMedia */ declare const MockMatchMediaProvider: { provide: typeof MatchMedia; useClass: typeof MockMatchMedia; }; /** * MediaObserver enables applications to listen for 1..n mediaQuery activations and to determine * if a mediaQuery is currently activated. * * Since a breakpoint change will first deactivate 1...n mediaQueries and then possibly activate * 1..n mediaQueries, the MediaObserver will debounce notifications and report ALL *activations* * in 1 event notification. The reported activations will be sorted in descending priority order. * * This class uses the BreakPoint Registry to inject alias information into the raw MediaChange * notification. For custom mediaQuery notifications, alias information will not be injected and * those fields will be ''. * * Note: Developers should note that only mediaChange activations (not de-activations) * are announced by the MediaObserver. * * @usage * * // RxJS * import { filter } from 'rxjs/operators'; * import { MediaObserver } from '@ngbracket/ngx-layout'; * * @Component({ ... }) * export class AppComponent { * status: string = ''; * * constructor(mediaObserver: MediaObserver) { * const media$ = mediaObserver.asObservable().pipe( * filter((changes: MediaChange[]) => true) // silly noop filter * ); * * media$.subscribe((changes: MediaChange[]) => { * let status = ''; * changes.forEach( change => { * status += `'${change.mqAlias}' = (${change.mediaQuery}) <br/>` ; * }); * this.status = status; * }); * * } * } */ declare class MediaObserver implements OnDestroy { protected breakpoints: BreakPointRegistry; protected matchMedia: MatchMedia; protected hook: PrintHook; /** Filter MediaChange notifications for overlapping breakpoints */ filterOverlaps: boolean; constructor(breakpoints: BreakPointRegistry, matchMedia: MatchMedia, hook: PrintHook); /** * Completes the active subject, signalling to all complete for all * MediaObserver subscribers */ ngOnDestroy(): void; /** * Observe changes to current activation 'list' */ asObservable(): Observable<MediaChange[]>; /** * Allow programmatic query to determine if one or more media query/alias match * the current viewport size. * @param value One or more media queries (or aliases) to check. * @returns Whether any of the media queries match. */ isActive(value: string | string[]): boolean; /** * Register all the mediaQueries registered in the BreakPointRegistry * This is needed so subscribers can be auto-notified of all standard, registered * mediaQuery activations */ private watchActivations; /** * Only pass/announce activations (not de-activations) * * Since multiple-mediaQueries can be activation in a cycle, * gather all current activations into a single list of changes to observers * * Inject associated (if any) alias information into the MediaChange event * - Exclude mediaQuery activations for overlapping mQs. List bounded mQ ranges only * - Exclude print activations that do not have an associated mediaQuery * * NOTE: the raw MediaChange events [from MatchMedia] do not * contain important alias information; as such this info * must be injected into the MediaChange */ private buildObservable; /** * Find all current activations and prepare single list of activations * sorted by descending priority. */ private findAllActivations; private readonly _media$; private readonly destroyed$; static ɵfac: i0.ɵɵFactoryDeclaration<MediaObserver, never>; static ɵprov: i0.ɵɵInjectableDeclaration<MediaObserver>; } /** * Class */ declare class MediaTrigger { protected breakpoints: BreakPointRegistry; protected matchMedia: MatchMedia; protected layoutConfig: LayoutConfigOptions; protected _platformId: Object; protected _document: any; constructor(breakpoints: BreakPointRegistry, matchMedia: MatchMedia, layoutConfig: LayoutConfigOptions, _platformId: Object, _document: any); /** * Manually activate range of breakpoints * @param list array of mediaQuery or alias strings */ activate(list: string[]): void; /** * Restore original, 'real' breakpoints and emit events * to trigger stream notification */ restore(): void; /** * Whenever window resizes, immediately auto-restore original * activations (if we are simulating activations) */ private prepareAutoRestore; /** * Notify all matchMedia subscribers of de-activations * * Note: we must force 'matches' updates for * future matchMedia::activation lookups */ private deactivateAll; /** * Cache current activations as sorted, prioritized list of MediaChanges */ private saveActivations; /** * Force set manual activations for specified mediaQuery list */ private setActivations; /** * For specified mediaQuery list manually simulate activations or deactivations */ private simulateMediaChanges; /** * Replace current registry with simulated registry... * Note: this is required since MediaQueryList::matches is 'readOnly' */ private forceRegistryMatches; /** * Save current MatchMedia::registry items. */ private cacheRegistryMatches; /** * Restore original, 'true' registry */ private restoreRegistryMatches; /** * Manually emit a MediaChange event via the MatchMedia to MediaMarshaller and MediaObserver */ private emitChangeEvent; private get currentActivations(); private hasCachedRegistryMatches; private originalActivations; private originalRegistry; private resizeSubscription; static ɵfac: i0.ɵɵFactoryDeclaration<MediaTrigger, never>; static ɵprov: i0.ɵɵInjectableDeclaration<MediaTrigger>; } /** Wraps the provided value in an array, unless the provided value is an array. */ declare function coerceArray<T>(value: T | T[]): T[]; interface WithPriority { priority?: number; } /** HOF to sort the breakpoints by descending priority */ declare function sortDescendingPriority<T extends WithPriority>(a: T | null, b: T | null): number; /** HOF to sort the breakpoints by ascending priority */ declare function sortAscendingPriority<T extends WithPriority>(a: T, b: T): number; /** * The flex API permits 3 or 1 parts of the value: * - `flex-grow flex-shrink flex-basis`, or * - `flex-basis` */ declare function validateBasis(basis: string, grow?: string, shrink?: string): string[]; export { BREAKPOINT, BREAKPOINTS, BREAKPOINT_PRINT, BROWSER_PROVIDER, BaseDirective2, BreakPointRegistry, CLASS_NAME, CoreModule, DEFAULT_BREAKPOINTS, DEFAULT_CONFIG, LAYOUT_CONFIG, MediaChange, MediaMarshaller, MediaObserver, MediaTrigger, ORIENTATION_BREAKPOINTS, PrintHook, SERVER_TOKEN, ScreenTypes, StyleBuilder, StyleUtils, StylesheetMap, coerceArray, mergeAlias, removeStyles, sortAscendingPriority, sortDescendingPriority, validateBasis, MatchMedia as ɵMatchMedia, MockMatchMedia as ɵMockMatchMedia, MockMatchMediaProvider as ɵMockMatchMediaProvider, multiply as ɵmultiply }; export type { BreakPoint, ElementMatcher, HookTarget, LayoutConfigOptions, MediaQuerySubscriber, Multiplier, OptionalBreakPoint, StyleDefinition };