UNPKG

4.08 kBTypeScriptView Raw
1import { Observable } from 'rxjs';
2import { BreakPointRegistry } from '../breakpoints/break-point-registry';
3import { MatchMedia } from '../match-media/match-media';
4import { MediaChange } from '../media-change';
5import { PrintHook } from './print-hook';
6declare type ClearCallback = () => void;
7declare type UpdateCallback = (val: any) => void;
8export interface ElementMatcher {
9 element: HTMLElement;
10 key: string;
11 value: any;
12}
13/**
14 * MediaMarshaller - register responsive values from directives and
15 * trigger them based on media query events
16 */
17export declare class MediaMarshaller {
18 protected matchMedia: MatchMedia;
19 protected breakpoints: BreakPointRegistry;
20 protected hook: PrintHook;
21 private activatedBreakpoints;
22 private elementMap;
23 private elementKeyMap;
24 private watcherMap;
25 private updateMap;
26 private clearMap;
27 private subject;
28 get activatedAlias(): string;
29 constructor(matchMedia: MatchMedia, breakpoints: BreakPointRegistry, hook: PrintHook);
30 /**
31 * Update styles on breakpoint activates or deactivates
32 * @param mc
33 */
34 onMediaChange(mc: MediaChange): void;
35 /**
36 * initialize the marshaller with necessary elements for delegation on an element
37 * @param element
38 * @param key
39 * @param updateFn optional callback so that custom bp directives don't have to re-provide this
40 * @param clearFn optional callback so that custom bp directives don't have to re-provide this
41 * @param extraTriggers other triggers to force style updates (e.g. layout, directionality, etc)
42 */
43 init(element: HTMLElement, key: string, updateFn?: UpdateCallback, clearFn?: ClearCallback, extraTriggers?: Observable<any>[]): void;
44 /**
45 * get the value for an element and key and optionally a given breakpoint
46 * @param element
47 * @param key
48 * @param bp
49 */
50 getValue(element: HTMLElement, key: string, bp?: string): any;
51 /**
52 * whether the element has values for a given key
53 * @param element
54 * @param key
55 */
56 hasValue(element: HTMLElement, key: string): boolean;
57 /**
58 * Set the value for an input on a directive
59 * @param element the element in question
60 * @param key the type of the directive (e.g. flex, layout-gap, etc)
61 * @param bp the breakpoint suffix (empty string = default)
62 * @param val the value for the breakpoint
63 */
64 setValue(element: HTMLElement, key: string, val: any, bp: string): void;
65 /** Track element value changes for a specific key */
66 trackValue(element: HTMLElement, key: string): Observable<ElementMatcher>;
67 /** update all styles for all elements on the current breakpoint */
68 updateStyles(): void;
69 /**
70 * clear the styles for a given element
71 * @param element
72 * @param key
73 */
74 clearElement(element: HTMLElement, key: string): void;
75 /**
76 * update a given element with the activated values for a given key
77 * @param element
78 * @param key
79 * @param value
80 */
81 updateElement(element: HTMLElement, key: string, value: any): void;
82 /**
83 * release all references to a given element
84 * @param element
85 */
86 releaseElement(element: HTMLElement): void;
87 /**
88 * trigger an update for a given element and key (e.g. layout)
89 * @param element
90 * @param key
91 */
92 triggerUpdate(element: HTMLElement, key?: string): void;
93 /** Cross-reference for HTMLElement with directive key */
94 private buildElementKeyMap;
95 /**
96 * Other triggers that should force style updates:
97 * - directionality
98 * - layout changes
99 * - mutationobserver updates
100 */
101 private watchExtraTriggers;
102 /** Breakpoint locator by mediaQuery */
103 private findByQuery;
104 /**
105 * get the fallback breakpoint for a given element, starting with the current breakpoint
106 * @param bpMap
107 * @param key
108 */
109 private getActivatedValues;
110 /**
111 * Watch for mediaQuery breakpoint activations
112 */
113 private observeActivations;
114}
115export {};