layout.es5.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { NgModule, Injectable, NgZone, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
  9. import { Platform } from '@angular/cdk/platform';
  10. import { combineLatest, concat, Observable, Subject } from 'rxjs';
  11. import { debounceTime, map, skip, startWith, take, takeUntil } from 'rxjs/operators';
  12. import { coerceArray } from '@angular/cdk/coercion';
  13. /**
  14. * @fileoverview added by tsickle
  15. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  16. */
  17. var LayoutModule = /** @class */ (function () {
  18. function LayoutModule() {
  19. }
  20. LayoutModule.decorators = [
  21. { type: NgModule, args: [{},] },
  22. ];
  23. return LayoutModule;
  24. }());
  25. /**
  26. * @fileoverview added by tsickle
  27. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  28. */
  29. /**
  30. * Global registry for all dynamically-created, injected media queries.
  31. * @type {?}
  32. */
  33. var mediaQueriesForWebkitCompatibility = new Set();
  34. /**
  35. * Style tag that holds all of the dynamically-created media queries.
  36. * @type {?}
  37. */
  38. var mediaQueryStyleNode;
  39. /**
  40. * A utility for calling matchMedia queries.
  41. */
  42. var MediaMatcher = /** @class */ (function () {
  43. function MediaMatcher(_platform) {
  44. this._platform = _platform;
  45. this._matchMedia = this._platform.isBrowser && window.matchMedia ?
  46. // matchMedia is bound to the window scope intentionally as it is an illegal invocation to
  47. // call it from a different scope.
  48. window.matchMedia.bind(window) :
  49. noopMatchMedia;
  50. }
  51. /**
  52. * Evaluates the given media query and returns the native MediaQueryList from which results
  53. * can be retrieved.
  54. * Confirms the layout engine will trigger for the selector query provided and returns the
  55. * MediaQueryList for the query provided.
  56. */
  57. /**
  58. * Evaluates the given media query and returns the native MediaQueryList from which results
  59. * can be retrieved.
  60. * Confirms the layout engine will trigger for the selector query provided and returns the
  61. * MediaQueryList for the query provided.
  62. * @param {?} query
  63. * @return {?}
  64. */
  65. MediaMatcher.prototype.matchMedia = /**
  66. * Evaluates the given media query and returns the native MediaQueryList from which results
  67. * can be retrieved.
  68. * Confirms the layout engine will trigger for the selector query provided and returns the
  69. * MediaQueryList for the query provided.
  70. * @param {?} query
  71. * @return {?}
  72. */
  73. function (query) {
  74. if (this._platform.WEBKIT) {
  75. createEmptyStyleRule(query);
  76. }
  77. return this._matchMedia(query);
  78. };
  79. MediaMatcher.decorators = [
  80. { type: Injectable, args: [{ providedIn: 'root' },] },
  81. ];
  82. /** @nocollapse */
  83. MediaMatcher.ctorParameters = function () { return [
  84. { type: Platform }
  85. ]; };
  86. /** @nocollapse */ MediaMatcher.ngInjectableDef = ɵɵdefineInjectable({ factory: function MediaMatcher_Factory() { return new MediaMatcher(ɵɵinject(Platform)); }, token: MediaMatcher, providedIn: "root" });
  87. return MediaMatcher;
  88. }());
  89. /**
  90. * For Webkit engines that only trigger the MediaQueryListListener when
  91. * there is at least one CSS selector for the respective media query.
  92. * @param {?} query
  93. * @return {?}
  94. */
  95. function createEmptyStyleRule(query) {
  96. if (mediaQueriesForWebkitCompatibility.has(query)) {
  97. return;
  98. }
  99. try {
  100. if (!mediaQueryStyleNode) {
  101. mediaQueryStyleNode = document.createElement('style');
  102. mediaQueryStyleNode.setAttribute('type', 'text/css');
  103. (/** @type {?} */ (document.head)).appendChild(mediaQueryStyleNode);
  104. }
  105. if (mediaQueryStyleNode.sheet) {
  106. ((/** @type {?} */ (mediaQueryStyleNode.sheet)))
  107. .insertRule("@media " + query + " {.fx-query-test{ }}", 0);
  108. mediaQueriesForWebkitCompatibility.add(query);
  109. }
  110. }
  111. catch (e) {
  112. console.error(e);
  113. }
  114. }
  115. /**
  116. * No-op matchMedia replacement for non-browser platforms.
  117. * @param {?} query
  118. * @return {?}
  119. */
  120. function noopMatchMedia(query) {
  121. // Use `as any` here to avoid adding additional necessary properties for
  122. // the noop matcher.
  123. return (/** @type {?} */ ({
  124. matches: query === 'all' || query === '',
  125. media: query,
  126. addListener: (/**
  127. * @return {?}
  128. */
  129. function () { }),
  130. removeListener: (/**
  131. * @return {?}
  132. */
  133. function () { })
  134. }));
  135. }
  136. /**
  137. * @fileoverview added by tsickle
  138. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  139. */
  140. /**
  141. * Utility for checking the matching state of \@media queries.
  142. */
  143. var BreakpointObserver = /** @class */ (function () {
  144. function BreakpointObserver(_mediaMatcher, _zone) {
  145. this._mediaMatcher = _mediaMatcher;
  146. this._zone = _zone;
  147. /**
  148. * A map of all media queries currently being listened for.
  149. */
  150. this._queries = new Map();
  151. /**
  152. * A subject for all other observables to takeUntil based on.
  153. */
  154. this._destroySubject = new Subject();
  155. }
  156. /** Completes the active subject, signalling to all other observables to complete. */
  157. /**
  158. * Completes the active subject, signalling to all other observables to complete.
  159. * @return {?}
  160. */
  161. BreakpointObserver.prototype.ngOnDestroy = /**
  162. * Completes the active subject, signalling to all other observables to complete.
  163. * @return {?}
  164. */
  165. function () {
  166. this._destroySubject.next();
  167. this._destroySubject.complete();
  168. };
  169. /**
  170. * Whether one or more media queries match the current viewport size.
  171. * @param value One or more media queries to check.
  172. * @returns Whether any of the media queries match.
  173. */
  174. /**
  175. * Whether one or more media queries match the current viewport size.
  176. * @param {?} value One or more media queries to check.
  177. * @return {?} Whether any of the media queries match.
  178. */
  179. BreakpointObserver.prototype.isMatched = /**
  180. * Whether one or more media queries match the current viewport size.
  181. * @param {?} value One or more media queries to check.
  182. * @return {?} Whether any of the media queries match.
  183. */
  184. function (value) {
  185. var _this = this;
  186. /** @type {?} */
  187. var queries = splitQueries(coerceArray(value));
  188. return queries.some((/**
  189. * @param {?} mediaQuery
  190. * @return {?}
  191. */
  192. function (mediaQuery) { return _this._registerQuery(mediaQuery).mql.matches; }));
  193. };
  194. /**
  195. * Gets an observable of results for the given queries that will emit new results for any changes
  196. * in matching of the given queries.
  197. * @param value One or more media queries to check.
  198. * @returns A stream of matches for the given queries.
  199. */
  200. /**
  201. * Gets an observable of results for the given queries that will emit new results for any changes
  202. * in matching of the given queries.
  203. * @param {?} value One or more media queries to check.
  204. * @return {?} A stream of matches for the given queries.
  205. */
  206. BreakpointObserver.prototype.observe = /**
  207. * Gets an observable of results for the given queries that will emit new results for any changes
  208. * in matching of the given queries.
  209. * @param {?} value One or more media queries to check.
  210. * @return {?} A stream of matches for the given queries.
  211. */
  212. function (value) {
  213. var _this = this;
  214. /** @type {?} */
  215. var queries = splitQueries(coerceArray(value));
  216. /** @type {?} */
  217. var observables = queries.map((/**
  218. * @param {?} query
  219. * @return {?}
  220. */
  221. function (query) { return _this._registerQuery(query).observable; }));
  222. /** @type {?} */
  223. var stateObservable = combineLatest(observables);
  224. // Emit the first state immediately, and then debounce the subsequent emissions.
  225. stateObservable = concat(stateObservable.pipe(take(1)), stateObservable.pipe(skip(1), debounceTime(0)));
  226. return stateObservable.pipe(map((/**
  227. * @param {?} breakpointStates
  228. * @return {?}
  229. */
  230. function (breakpointStates) {
  231. /** @type {?} */
  232. var response = {
  233. matches: false,
  234. breakpoints: {},
  235. };
  236. breakpointStates.forEach((/**
  237. * @param {?} state
  238. * @return {?}
  239. */
  240. function (state) {
  241. response.matches = response.matches || state.matches;
  242. response.breakpoints[state.query] = state.matches;
  243. }));
  244. return response;
  245. })));
  246. };
  247. /** Registers a specific query to be listened for. */
  248. /**
  249. * Registers a specific query to be listened for.
  250. * @private
  251. * @param {?} query
  252. * @return {?}
  253. */
  254. BreakpointObserver.prototype._registerQuery = /**
  255. * Registers a specific query to be listened for.
  256. * @private
  257. * @param {?} query
  258. * @return {?}
  259. */
  260. function (query) {
  261. var _this = this;
  262. // Only set up a new MediaQueryList if it is not already being listened for.
  263. if (this._queries.has(query)) {
  264. return (/** @type {?} */ (this._queries.get(query)));
  265. }
  266. /** @type {?} */
  267. var mql = this._mediaMatcher.matchMedia(query);
  268. // Create callback for match changes and add it is as a listener.
  269. /** @type {?} */
  270. var queryObservable = new Observable((/**
  271. * @param {?} observer
  272. * @return {?}
  273. */
  274. function (observer) {
  275. // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
  276. // back into the zone because matchMedia is only included in Zone.js by loading the
  277. // webapis-media-query.js file alongside the zone.js file. Additionally, some browsers do not
  278. // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
  279. // patches it.
  280. /** @type {?} */
  281. var handler = (/**
  282. * @param {?} e
  283. * @return {?}
  284. */
  285. function (e) { return _this._zone.run((/**
  286. * @return {?}
  287. */
  288. function () { return observer.next(e); })); });
  289. mql.addListener(handler);
  290. return (/**
  291. * @return {?}
  292. */
  293. function () {
  294. mql.removeListener(handler);
  295. });
  296. })).pipe(startWith(mql), map((/**
  297. * @param {?} nextMql
  298. * @return {?}
  299. */
  300. function (nextMql) { return ({ query: query, matches: nextMql.matches }); })), takeUntil(this._destroySubject));
  301. // Add the MediaQueryList to the set of queries.
  302. /** @type {?} */
  303. var output = { observable: queryObservable, mql: mql };
  304. this._queries.set(query, output);
  305. return output;
  306. };
  307. BreakpointObserver.decorators = [
  308. { type: Injectable, args: [{ providedIn: 'root' },] },
  309. ];
  310. /** @nocollapse */
  311. BreakpointObserver.ctorParameters = function () { return [
  312. { type: MediaMatcher },
  313. { type: NgZone }
  314. ]; };
  315. /** @nocollapse */ BreakpointObserver.ngInjectableDef = ɵɵdefineInjectable({ factory: function BreakpointObserver_Factory() { return new BreakpointObserver(ɵɵinject(MediaMatcher), ɵɵinject(NgZone)); }, token: BreakpointObserver, providedIn: "root" });
  316. return BreakpointObserver;
  317. }());
  318. /**
  319. * Split each query string into separate query strings if two queries are provided as comma
  320. * separated.
  321. * @param {?} queries
  322. * @return {?}
  323. */
  324. function splitQueries(queries) {
  325. return queries.map((/**
  326. * @param {?} query
  327. * @return {?}
  328. */
  329. function (query) { return query.split(','); }))
  330. .reduce((/**
  331. * @param {?} a1
  332. * @param {?} a2
  333. * @return {?}
  334. */
  335. function (a1, a2) { return a1.concat(a2); }))
  336. .map((/**
  337. * @param {?} query
  338. * @return {?}
  339. */
  340. function (query) { return query.trim(); }));
  341. }
  342. /**
  343. * @fileoverview added by tsickle
  344. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  345. */
  346. // PascalCase is being used as Breakpoints is used like an enum.
  347. // tslint:disable-next-line:variable-name
  348. /**
  349. * @license
  350. * Copyright Google LLC All Rights Reserved.
  351. *
  352. * Use of this source code is governed by an MIT-style license that can be
  353. * found in the LICENSE file at https://angular.io/license
  354. * @type {?}
  355. */
  356. var Breakpoints = {
  357. XSmall: '(max-width: 599.99px)',
  358. Small: '(min-width: 600px) and (max-width: 959.99px)',
  359. Medium: '(min-width: 960px) and (max-width: 1279.99px)',
  360. Large: '(min-width: 1280px) and (max-width: 1919.99px)',
  361. XLarge: '(min-width: 1920px)',
  362. Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
  363. '(max-width: 959.99px) and (orientation: landscape)',
  364. Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
  365. '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
  366. Web: '(min-width: 840px) and (orientation: portrait), ' +
  367. '(min-width: 1280px) and (orientation: landscape)',
  368. HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',
  369. TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',
  370. WebPortrait: '(min-width: 840px) and (orientation: portrait)',
  371. HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',
  372. TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
  373. WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
  374. };
  375. /**
  376. * @fileoverview added by tsickle
  377. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  378. */
  379. /**
  380. * @fileoverview added by tsickle
  381. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  382. */
  383. export { LayoutModule, BreakpointObserver, Breakpoints, MediaMatcher };
  384. //# sourceMappingURL=layout.es5.js.map