[6a3a178] | 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
|
---|