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 || this._platform.BLINK) {
|
---|
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 | * Creates an empty stylesheet that is used to work around browser inconsistencies related to
|
---|
90 | * `matchMedia`. At the time of writing, it handles the following cases:
|
---|
91 | * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`
|
---|
92 | * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.
|
---|
93 | * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules
|
---|
94 | * inside the `@media` match existing elements on the page. We work around it by having one rule
|
---|
95 | * targeting the `body`. See https://github.com/angular/components/issues/23546.
|
---|
96 | */
|
---|
97 | function createEmptyStyleRule(query) {
|
---|
98 | if (mediaQueriesForWebkitCompatibility.has(query)) {
|
---|
99 | return;
|
---|
100 | }
|
---|
101 | try {
|
---|
102 | if (!mediaQueryStyleNode) {
|
---|
103 | mediaQueryStyleNode = document.createElement('style');
|
---|
104 | mediaQueryStyleNode.setAttribute('type', 'text/css');
|
---|
105 | document.head.appendChild(mediaQueryStyleNode);
|
---|
106 | }
|
---|
107 | if (mediaQueryStyleNode.sheet) {
|
---|
108 | mediaQueryStyleNode.sheet.insertRule("@media " + query + " {body{ }}", 0);
|
---|
109 | mediaQueriesForWebkitCompatibility.add(query);
|
---|
110 | }
|
---|
111 | }
|
---|
112 | catch (e) {
|
---|
113 | console.error(e);
|
---|
114 | }
|
---|
115 | }
|
---|
116 | /** No-op matchMedia replacement for non-browser platforms. */
|
---|
117 | function noopMatchMedia(query) {
|
---|
118 | // Use `as any` here to avoid adding additional necessary properties for
|
---|
119 | // the noop matcher.
|
---|
120 | return {
|
---|
121 | matches: query === 'all' || query === '',
|
---|
122 | media: query,
|
---|
123 | addListener: function () { },
|
---|
124 | removeListener: function () { }
|
---|
125 | };
|
---|
126 | }
|
---|
127 |
|
---|
128 | /**
|
---|
129 | * @license
|
---|
130 | * Copyright Google LLC All Rights Reserved.
|
---|
131 | *
|
---|
132 | * Use of this source code is governed by an MIT-style license that can be
|
---|
133 | * found in the LICENSE file at https://angular.io/license
|
---|
134 | */
|
---|
135 | /** Utility for checking the matching state of @media queries. */
|
---|
136 | var BreakpointObserver = /** @class */ (function () {
|
---|
137 | function BreakpointObserver(_mediaMatcher, _zone) {
|
---|
138 | this._mediaMatcher = _mediaMatcher;
|
---|
139 | this._zone = _zone;
|
---|
140 | /** A map of all media queries currently being listened for. */
|
---|
141 | this._queries = new Map();
|
---|
142 | /** A subject for all other observables to takeUntil based on. */
|
---|
143 | this._destroySubject = new rxjs.Subject();
|
---|
144 | }
|
---|
145 | /** Completes the active subject, signalling to all other observables to complete. */
|
---|
146 | BreakpointObserver.prototype.ngOnDestroy = function () {
|
---|
147 | this._destroySubject.next();
|
---|
148 | this._destroySubject.complete();
|
---|
149 | };
|
---|
150 | /**
|
---|
151 | * Whether one or more media queries match the current viewport size.
|
---|
152 | * @param value One or more media queries to check.
|
---|
153 | * @returns Whether any of the media queries match.
|
---|
154 | */
|
---|
155 | BreakpointObserver.prototype.isMatched = function (value) {
|
---|
156 | var _this = this;
|
---|
157 | var queries = splitQueries(coercion.coerceArray(value));
|
---|
158 | return queries.some(function (mediaQuery) { return _this._registerQuery(mediaQuery).mql.matches; });
|
---|
159 | };
|
---|
160 | /**
|
---|
161 | * Gets an observable of results for the given queries that will emit new results for any changes
|
---|
162 | * in matching of the given queries.
|
---|
163 | * @param value One or more media queries to check.
|
---|
164 | * @returns A stream of matches for the given queries.
|
---|
165 | */
|
---|
166 | BreakpointObserver.prototype.observe = function (value) {
|
---|
167 | var _this = this;
|
---|
168 | var queries = splitQueries(coercion.coerceArray(value));
|
---|
169 | var observables = queries.map(function (query) { return _this._registerQuery(query).observable; });
|
---|
170 | var stateObservable = rxjs.combineLatest(observables);
|
---|
171 | // Emit the first state immediately, and then debounce the subsequent emissions.
|
---|
172 | stateObservable = rxjs.concat(stateObservable.pipe(operators.take(1)), stateObservable.pipe(operators.skip(1), operators.debounceTime(0)));
|
---|
173 | return stateObservable.pipe(operators.map(function (breakpointStates) {
|
---|
174 | var response = {
|
---|
175 | matches: false,
|
---|
176 | breakpoints: {},
|
---|
177 | };
|
---|
178 | breakpointStates.forEach(function (_a) {
|
---|
179 | var matches = _a.matches, query = _a.query;
|
---|
180 | response.matches = response.matches || matches;
|
---|
181 | response.breakpoints[query] = matches;
|
---|
182 | });
|
---|
183 | return response;
|
---|
184 | }));
|
---|
185 | };
|
---|
186 | /** Registers a specific query to be listened for. */
|
---|
187 | BreakpointObserver.prototype._registerQuery = function (query) {
|
---|
188 | var _this = this;
|
---|
189 | // Only set up a new MediaQueryList if it is not already being listened for.
|
---|
190 | if (this._queries.has(query)) {
|
---|
191 | return this._queries.get(query);
|
---|
192 | }
|
---|
193 | var mql = this._mediaMatcher.matchMedia(query);
|
---|
194 | // Create callback for match changes and add it is as a listener.
|
---|
195 | var queryObservable = new rxjs.Observable(function (observer) {
|
---|
196 | // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
|
---|
197 | // back into the zone because matchMedia is only included in Zone.js by loading the
|
---|
198 | // webapis-media-query.js file alongside the zone.js file. Additionally, some browsers do not
|
---|
199 | // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
|
---|
200 | // patches it.
|
---|
201 | var handler = function (e) { return _this._zone.run(function () { return observer.next(e); }); };
|
---|
202 | mql.addListener(handler);
|
---|
203 | return function () {
|
---|
204 | mql.removeListener(handler);
|
---|
205 | };
|
---|
206 | }).pipe(operators.startWith(mql), operators.map(function (_a) {
|
---|
207 | var matches = _a.matches;
|
---|
208 | return ({ query: query, matches: matches });
|
---|
209 | }), operators.takeUntil(this._destroySubject));
|
---|
210 | // Add the MediaQueryList to the set of queries.
|
---|
211 | var output = { observable: queryObservable, mql: mql };
|
---|
212 | this._queries.set(query, output);
|
---|
213 | return output;
|
---|
214 | };
|
---|
215 | return BreakpointObserver;
|
---|
216 | }());
|
---|
217 | 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" });
|
---|
218 | BreakpointObserver.decorators = [
|
---|
219 | { type: i0.Injectable, args: [{ providedIn: 'root' },] }
|
---|
220 | ];
|
---|
221 | BreakpointObserver.ctorParameters = function () { return [
|
---|
222 | { type: MediaMatcher },
|
---|
223 | { type: i0.NgZone }
|
---|
224 | ]; };
|
---|
225 | /**
|
---|
226 | * Split each query string into separate query strings if two queries are provided as comma
|
---|
227 | * separated.
|
---|
228 | */
|
---|
229 | function splitQueries(queries) {
|
---|
230 | return queries.map(function (query) { return query.split(','); })
|
---|
231 | .reduce(function (a1, a2) { return a1.concat(a2); })
|
---|
232 | .map(function (query) { return query.trim(); });
|
---|
233 | }
|
---|
234 |
|
---|
235 | /**
|
---|
236 | * @license
|
---|
237 | * Copyright Google LLC All Rights Reserved.
|
---|
238 | *
|
---|
239 | * Use of this source code is governed by an MIT-style license that can be
|
---|
240 | * found in the LICENSE file at https://angular.io/license
|
---|
241 | */
|
---|
242 | // PascalCase is being used as Breakpoints is used like an enum.
|
---|
243 | // tslint:disable-next-line:variable-name
|
---|
244 | var Breakpoints = {
|
---|
245 | XSmall: '(max-width: 599.98px)',
|
---|
246 | Small: '(min-width: 600px) and (max-width: 959.98px)',
|
---|
247 | Medium: '(min-width: 960px) and (max-width: 1279.98px)',
|
---|
248 | Large: '(min-width: 1280px) and (max-width: 1919.98px)',
|
---|
249 | XLarge: '(min-width: 1920px)',
|
---|
250 | Handset: '(max-width: 599.98px) and (orientation: portrait), ' +
|
---|
251 | '(max-width: 959.98px) and (orientation: landscape)',
|
---|
252 | Tablet: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), ' +
|
---|
253 | '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
|
---|
254 | Web: '(min-width: 840px) and (orientation: portrait), ' +
|
---|
255 | '(min-width: 1280px) and (orientation: landscape)',
|
---|
256 | HandsetPortrait: '(max-width: 599.98px) and (orientation: portrait)',
|
---|
257 | TabletPortrait: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)',
|
---|
258 | WebPortrait: '(min-width: 840px) and (orientation: portrait)',
|
---|
259 | HandsetLandscape: '(max-width: 959.98px) and (orientation: landscape)',
|
---|
260 | TabletLandscape: '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',
|
---|
261 | WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
|
---|
262 | };
|
---|
263 |
|
---|
264 | /**
|
---|
265 | * @license
|
---|
266 | * Copyright Google LLC All Rights Reserved.
|
---|
267 | *
|
---|
268 | * Use of this source code is governed by an MIT-style license that can be
|
---|
269 | * found in the LICENSE file at https://angular.io/license
|
---|
270 | */
|
---|
271 |
|
---|
272 | /**
|
---|
273 | * Generated bundle index. Do not edit.
|
---|
274 | */
|
---|
275 |
|
---|
276 | exports.BreakpointObserver = BreakpointObserver;
|
---|
277 | exports.Breakpoints = Breakpoints;
|
---|
278 | exports.LayoutModule = LayoutModule;
|
---|
279 | exports.MediaMatcher = MediaMatcher;
|
---|
280 |
|
---|
281 | Object.defineProperty(exports, '__esModule', { value: true });
|
---|
282 |
|
---|
283 | })));
|
---|
284 | //# sourceMappingURL=cdk-layout.umd.js.map
|
---|