1 | import { Observable } from 'rxjs';
|
2 | import { BreakPointRegistry } from '../breakpoints/break-point-registry';
|
3 | import { MatchMedia } from '../match-media/match-media';
|
4 | import { MediaChange } from '../media-change';
|
5 | import { PrintHook } from './print-hook';
|
6 | declare type ClearCallback = () => void;
|
7 | declare type UpdateCallback = (val: any) => void;
|
8 | export interface ElementMatcher {
|
9 | element: HTMLElement;
|
10 | key: string;
|
11 | value: any;
|
12 | }
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | export 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 | }
|
115 | export {};
|