1 | import * as i0 from '@angular/core';
|
2 | import { NgModule, Injectable } from '@angular/core';
|
3 | import { coerceArray } from '@angular/cdk/coercion';
|
4 | import { Subject, combineLatest, concat, Observable } from 'rxjs';
|
5 | import { take, skip, debounceTime, map, startWith, takeUntil } from 'rxjs/operators';
|
6 | import * as i1 from '@angular/cdk/platform';
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | class LayoutModule {
|
16 | }
|
17 | LayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
18 | LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: LayoutModule });
|
19 | LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LayoutModule });
|
20 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LayoutModule, decorators: [{
|
21 | type: NgModule,
|
22 | args: [{}]
|
23 | }] });
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 | const mediaQueriesForWebkitCompatibility = new Set();
|
34 |
|
35 | let mediaQueryStyleNode;
|
36 |
|
37 | class MediaMatcher {
|
38 | constructor(_platform) {
|
39 | this._platform = _platform;
|
40 | this._matchMedia =
|
41 | this._platform.isBrowser && window.matchMedia
|
42 | ?
|
43 |
|
44 | window.matchMedia.bind(window)
|
45 | : noopMatchMedia;
|
46 | }
|
47 | |
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | matchMedia(query) {
|
54 | if (this._platform.WEBKIT || this._platform.BLINK) {
|
55 | createEmptyStyleRule(query);
|
56 | }
|
57 | return this._matchMedia(query);
|
58 | }
|
59 | }
|
60 | MediaMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MediaMatcher, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
|
61 | MediaMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MediaMatcher, providedIn: 'root' });
|
62 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MediaMatcher, decorators: [{
|
63 | type: Injectable,
|
64 | args: [{ providedIn: 'root' }]
|
65 | }], ctorParameters: function () { return [{ type: i1.Platform }]; } });
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 | function createEmptyStyleRule(query) {
|
76 | if (mediaQueriesForWebkitCompatibility.has(query)) {
|
77 | return;
|
78 | }
|
79 | try {
|
80 | if (!mediaQueryStyleNode) {
|
81 | mediaQueryStyleNode = document.createElement('style');
|
82 | mediaQueryStyleNode.setAttribute('type', 'text/css');
|
83 | document.head.appendChild(mediaQueryStyleNode);
|
84 | }
|
85 | if (mediaQueryStyleNode.sheet) {
|
86 | mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
|
87 | mediaQueriesForWebkitCompatibility.add(query);
|
88 | }
|
89 | }
|
90 | catch (e) {
|
91 | console.error(e);
|
92 | }
|
93 | }
|
94 |
|
95 | function noopMatchMedia(query) {
|
96 |
|
97 |
|
98 | return {
|
99 | matches: query === 'all' || query === '',
|
100 | media: query,
|
101 | addListener: () => { },
|
102 | removeListener: () => { },
|
103 | };
|
104 | }
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 | class BreakpointObserver {
|
115 | constructor(_mediaMatcher, _zone) {
|
116 | this._mediaMatcher = _mediaMatcher;
|
117 | this._zone = _zone;
|
118 |
|
119 | this._queries = new Map();
|
120 |
|
121 | this._destroySubject = new Subject();
|
122 | }
|
123 |
|
124 | ngOnDestroy() {
|
125 | this._destroySubject.next();
|
126 | this._destroySubject.complete();
|
127 | }
|
128 | |
129 |
|
130 |
|
131 |
|
132 |
|
133 | isMatched(value) {
|
134 | const queries = splitQueries(coerceArray(value));
|
135 | return queries.some(mediaQuery => this._registerQuery(mediaQuery).mql.matches);
|
136 | }
|
137 | |
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 | observe(value) {
|
144 | const queries = splitQueries(coerceArray(value));
|
145 | const observables = queries.map(query => this._registerQuery(query).observable);
|
146 | let stateObservable = combineLatest(observables);
|
147 |
|
148 | stateObservable = concat(stateObservable.pipe(take(1)), stateObservable.pipe(skip(1), debounceTime(0)));
|
149 | return stateObservable.pipe(map(breakpointStates => {
|
150 | const response = {
|
151 | matches: false,
|
152 | breakpoints: {},
|
153 | };
|
154 | breakpointStates.forEach(({ matches, query }) => {
|
155 | response.matches = response.matches || matches;
|
156 | response.breakpoints[query] = matches;
|
157 | });
|
158 | return response;
|
159 | }));
|
160 | }
|
161 |
|
162 | _registerQuery(query) {
|
163 |
|
164 | if (this._queries.has(query)) {
|
165 | return this._queries.get(query);
|
166 | }
|
167 | const mql = this._mediaMatcher.matchMedia(query);
|
168 |
|
169 | const queryObservable = new Observable((observer) => {
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 | const handler = (e) => this._zone.run(() => observer.next(e));
|
176 | mql.addListener(handler);
|
177 | return () => {
|
178 | mql.removeListener(handler);
|
179 | };
|
180 | }).pipe(startWith(mql), map(({ matches }) => ({ query, matches })), takeUntil(this._destroySubject));
|
181 |
|
182 | const output = { observable: queryObservable, mql };
|
183 | this._queries.set(query, output);
|
184 | return output;
|
185 | }
|
186 | }
|
187 | BreakpointObserver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: BreakpointObserver, deps: [{ token: MediaMatcher }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
188 | BreakpointObserver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: BreakpointObserver, providedIn: 'root' });
|
189 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: BreakpointObserver, decorators: [{
|
190 | type: Injectable,
|
191 | args: [{ providedIn: 'root' }]
|
192 | }], ctorParameters: function () { return [{ type: MediaMatcher }, { type: i0.NgZone }]; } });
|
193 |
|
194 |
|
195 |
|
196 |
|
197 | function splitQueries(queries) {
|
198 | return queries
|
199 | .map(query => query.split(','))
|
200 | .reduce((a1, a2) => a1.concat(a2))
|
201 | .map(query => query.trim());
|
202 | }
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 | const Breakpoints = {
|
214 | XSmall: '(max-width: 599.98px)',
|
215 | Small: '(min-width: 600px) and (max-width: 959.98px)',
|
216 | Medium: '(min-width: 960px) and (max-width: 1279.98px)',
|
217 | Large: '(min-width: 1280px) and (max-width: 1919.98px)',
|
218 | XLarge: '(min-width: 1920px)',
|
219 | Handset: '(max-width: 599.98px) and (orientation: portrait), ' +
|
220 | '(max-width: 959.98px) and (orientation: landscape)',
|
221 | Tablet: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), ' +
|
222 | '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
|
223 | Web: '(min-width: 840px) and (orientation: portrait), ' +
|
224 | '(min-width: 1280px) and (orientation: landscape)',
|
225 | HandsetPortrait: '(max-width: 599.98px) and (orientation: portrait)',
|
226 | TabletPortrait: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)',
|
227 | WebPortrait: '(min-width: 840px) and (orientation: portrait)',
|
228 | HandsetLandscape: '(max-width: 959.98px) and (orientation: landscape)',
|
229 | TabletLandscape: '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
|
230 | WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
|
231 | };
|
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 | export { BreakpointObserver, Breakpoints, LayoutModule, MediaMatcher };
|
254 |
|