UNPKG

13.2 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/platform')) :
3 typeof define === 'function' && define.amd ? define('@angular/cdk/layout', ['exports', '@angular/core', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/platform'], factory) :
4 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.layout = {}), global.ng.core, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.platform));
5}(this, (function (exports, i0, coercion, rxjs, operators, i1) { 'use strict';
6
7 function _interopNamespace(e) {
8 if (e && e.__esModule) return e;
9 var n = Object.create(null);
10 if (e) {
11 Object.keys(e).forEach(function (k) {
12 if (k !== 'default') {
13 var d = Object.getOwnPropertyDescriptor(e, k);
14 Object.defineProperty(n, k, d.get ? d : {
15 enumerable: true,
16 get: function () {
17 return e[k];
18 }
19 });
20 }
21 });
22 }
23 n['default'] = e;
24 return Object.freeze(n);
25 }
26
27 var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
28 var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
29
30 /**
31 * @license
32 * Copyright Google LLC All Rights Reserved.
33 *
34 * Use of this source code is governed by an MIT-style license that can be
35 * found in the LICENSE file at https://angular.io/license
36 */
37 var LayoutModule = /** @class */ (function () {
38 function LayoutModule() {
39 }
40 return LayoutModule;
41 }());
42 LayoutModule.decorators = [
43 { type: i0.NgModule, args: [{},] }
44 ];
45
46 /**
47 * @license
48 * Copyright Google LLC All Rights Reserved.
49 *
50 * Use of this source code is governed by an MIT-style license that can be
51 * found in the LICENSE file at https://angular.io/license
52 */
53 /** Global registry for all dynamically-created, injected media queries. */
54 var mediaQueriesForWebkitCompatibility = new Set();
55 /** Style tag that holds all of the dynamically-created media queries. */
56 var mediaQueryStyleNode;
57 /** A utility for calling matchMedia queries. */
58 var MediaMatcher = /** @class */ (function () {
59 function MediaMatcher(_platform) {
60 this._platform = _platform;
61 this._matchMedia = this._platform.isBrowser && window.matchMedia ?
62 // matchMedia is bound to the window scope intentionally as it is an illegal invocation to
63 // call it from a different scope.
64 window.matchMedia.bind(window) :
65 noopMatchMedia;
66 }
67 /**
68 * Evaluates the given media query and returns the native MediaQueryList from which results
69 * can be retrieved.
70 * Confirms the layout engine will trigger for the selector query provided and returns the
71 * MediaQueryList for the query provided.
72 */
73 MediaMatcher.prototype.matchMedia = function (query) {
74 if (this._platform.WEBKIT) {
75 createEmptyStyleRule(query);
76 }
77 return this._matchMedia(query);
78 };
79 return MediaMatcher;
80 }());
81 MediaMatcher.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MediaMatcher_Factory() { return new MediaMatcher(i0__namespace.ɵɵinject(i1__namespace.Platform)); }, token: MediaMatcher, providedIn: "root" });
82 MediaMatcher.decorators = [
83 { type: i0.Injectable, args: [{ providedIn: 'root' },] }
84 ];
85 MediaMatcher.ctorParameters = function () { return [
86 { type: i1.Platform }
87 ]; };
88 /**
89 * For Webkit engines that only trigger the MediaQueryListListener when
90 * there is at least one CSS selector for the respective media query.
91 */
92 function createEmptyStyleRule(query) {
93 if (mediaQueriesForWebkitCompatibility.has(query)) {
94 return;
95 }
96 try {
97 if (!mediaQueryStyleNode) {
98 mediaQueryStyleNode = document.createElement('style');
99 mediaQueryStyleNode.setAttribute('type', 'text/css');
100 document.head.appendChild(mediaQueryStyleNode);
101 }
102 if (mediaQueryStyleNode.sheet) {
103 mediaQueryStyleNode.sheet
104 .insertRule("@media " + query + " {.fx-query-test{ }}", 0);
105 mediaQueriesForWebkitCompatibility.add(query);
106 }
107 }
108 catch (e) {
109 console.error(e);
110 }
111 }
112 /** No-op matchMedia replacement for non-browser platforms. */
113 function noopMatchMedia(query) {
114 // Use `as any` here to avoid adding additional necessary properties for
115 // the noop matcher.
116 return {
117 matches: query === 'all' || query === '',
118 media: query,
119 addListener: function () { },
120 removeListener: function () { }
121 };
122 }
123
124 /**
125 * @license
126 * Copyright Google LLC All Rights Reserved.
127 *
128 * Use of this source code is governed by an MIT-style license that can be
129 * found in the LICENSE file at https://angular.io/license
130 */
131 /** Utility for checking the matching state of @media queries. */
132 var BreakpointObserver = /** @class */ (function () {
133 function BreakpointObserver(_mediaMatcher, _zone) {
134 this._mediaMatcher = _mediaMatcher;
135 this._zone = _zone;
136 /** A map of all media queries currently being listened for. */
137 this._queries = new Map();
138 /** A subject for all other observables to takeUntil based on. */
139 this._destroySubject = new rxjs.Subject();
140 }
141 /** Completes the active subject, signalling to all other observables to complete. */
142 BreakpointObserver.prototype.ngOnDestroy = function () {
143 this._destroySubject.next();
144 this._destroySubject.complete();
145 };
146 /**
147 * Whether one or more media queries match the current viewport size.
148 * @param value One or more media queries to check.
149 * @returns Whether any of the media queries match.
150 */
151 BreakpointObserver.prototype.isMatched = function (value) {
152 var _this = this;
153 var queries = splitQueries(coercion.coerceArray(value));
154 return queries.some(function (mediaQuery) { return _this._registerQuery(mediaQuery).mql.matches; });
155 };
156 /**
157 * Gets an observable of results for the given queries that will emit new results for any changes
158 * in matching of the given queries.
159 * @param value One or more media queries to check.
160 * @returns A stream of matches for the given queries.
161 */
162 BreakpointObserver.prototype.observe = function (value) {
163 var _this = this;
164 var queries = splitQueries(coercion.coerceArray(value));
165 var observables = queries.map(function (query) { return _this._registerQuery(query).observable; });
166 var stateObservable = rxjs.combineLatest(observables);
167 // Emit the first state immediately, and then debounce the subsequent emissions.
168 stateObservable = rxjs.concat(stateObservable.pipe(operators.take(1)), stateObservable.pipe(operators.skip(1), operators.debounceTime(0)));
169 return stateObservable.pipe(operators.map(function (breakpointStates) {
170 var response = {
171 matches: false,
172 breakpoints: {},
173 };
174 breakpointStates.forEach(function (_a) {
175 var matches = _a.matches, query = _a.query;
176 response.matches = response.matches || matches;
177 response.breakpoints[query] = matches;
178 });
179 return response;
180 }));
181 };
182 /** Registers a specific query to be listened for. */
183 BreakpointObserver.prototype._registerQuery = function (query) {
184 var _this = this;
185 // Only set up a new MediaQueryList if it is not already being listened for.
186 if (this._queries.has(query)) {
187 return this._queries.get(query);
188 }
189 var mql = this._mediaMatcher.matchMedia(query);
190 // Create callback for match changes and add it is as a listener.
191 var queryObservable = new rxjs.Observable(function (observer) {
192 // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
193 // back into the zone because matchMedia is only included in Zone.js by loading the
194 // webapis-media-query.js file alongside the zone.js file. Additionally, some browsers do not
195 // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
196 // patches it.
197 var handler = function (e) { return _this._zone.run(function () { return observer.next(e); }); };
198 mql.addListener(handler);
199 return function () {
200 mql.removeListener(handler);
201 };
202 }).pipe(operators.startWith(mql), operators.map(function (_a) {
203 var matches = _a.matches;
204 return ({ query: query, matches: matches });
205 }), operators.takeUntil(this._destroySubject));
206 // Add the MediaQueryList to the set of queries.
207 var output = { observable: queryObservable, mql: mql };
208 this._queries.set(query, output);
209 return output;
210 };
211 return BreakpointObserver;
212 }());
213 BreakpointObserver.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function BreakpointObserver_Factory() { return new BreakpointObserver(i0__namespace.ɵɵinject(MediaMatcher), i0__namespace.ɵɵinject(i0__namespace.NgZone)); }, token: BreakpointObserver, providedIn: "root" });
214 BreakpointObserver.decorators = [
215 { type: i0.Injectable, args: [{ providedIn: 'root' },] }
216 ];
217 BreakpointObserver.ctorParameters = function () { return [
218 { type: MediaMatcher },
219 { type: i0.NgZone }
220 ]; };
221 /**
222 * Split each query string into separate query strings if two queries are provided as comma
223 * separated.
224 */
225 function splitQueries(queries) {
226 return queries.map(function (query) { return query.split(','); })
227 .reduce(function (a1, a2) { return a1.concat(a2); })
228 .map(function (query) { return query.trim(); });
229 }
230
231 /**
232 * @license
233 * Copyright Google LLC All Rights Reserved.
234 *
235 * Use of this source code is governed by an MIT-style license that can be
236 * found in the LICENSE file at https://angular.io/license
237 */
238 // PascalCase is being used as Breakpoints is used like an enum.
239 // tslint:disable-next-line:variable-name
240 var Breakpoints = {
241 XSmall: '(max-width: 599.98px)',
242 Small: '(min-width: 600px) and (max-width: 959.98px)',
243 Medium: '(min-width: 960px) and (max-width: 1279.98px)',
244 Large: '(min-width: 1280px) and (max-width: 1919.98px)',
245 XLarge: '(min-width: 1920px)',
246 Handset: '(max-width: 599.98px) and (orientation: portrait), ' +
247 '(max-width: 959.98px) and (orientation: landscape)',
248 Tablet: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), ' +
249 '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
250 Web: '(min-width: 840px) and (orientation: portrait), ' +
251 '(min-width: 1280px) and (orientation: landscape)',
252 HandsetPortrait: '(max-width: 599.98px) and (orientation: portrait)',
253 TabletPortrait: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)',
254 WebPortrait: '(min-width: 840px) and (orientation: portrait)',
255 HandsetLandscape: '(max-width: 959.98px) and (orientation: landscape)',
256 TabletLandscape: '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
257 WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
258 };
259
260 /**
261 * @license
262 * Copyright Google LLC All Rights Reserved.
263 *
264 * Use of this source code is governed by an MIT-style license that can be
265 * found in the LICENSE file at https://angular.io/license
266 */
267
268 /**
269 * Generated bundle index. Do not edit.
270 */
271
272 exports.BreakpointObserver = BreakpointObserver;
273 exports.Breakpoints = Breakpoints;
274 exports.LayoutModule = LayoutModule;
275 exports.MediaMatcher = MediaMatcher;
276
277 Object.defineProperty(exports, '__esModule', { value: true });
278
279})));
280//# sourceMappingURL=cdk-layout.umd.js.map