blob: 5f6bb74571dd7c5201be4969ad88be5e76cdcc1e [file] [log] [blame]
import { Observable } from 'rxjs';
import { BreakPointRegistry } from '../breakpoints/break-point-registry';
import { MatchMedia } from '../match-media/match-media';
import { MediaChange } from '../media-change';
import { PrintHook } from './print-hook';
declare type ClearCallback = () => void;
declare type UpdateCallback = (val: any) => void;
export interface ElementMatcher {
element: HTMLElement;
key: string;
value: any;
}
/**
* MediaMarshaller - register responsive values from directives and
* trigger them based on media query events
*/
export declare class MediaMarshaller {
protected matchMedia: MatchMedia;
protected breakpoints: BreakPointRegistry;
protected hook: PrintHook;
private activatedBreakpoints;
private elementMap;
private elementKeyMap;
private watcherMap;
private updateMap;
private clearMap;
private subject;
readonly activatedAlias: string;
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;
}
export {};