1 | (function (global, factory) {
|
---|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/platform'), require('@angular/cdk/scrolling'), require('@angular/common'), require('@angular/core'), require('@angular/material/core'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/platform-browser/animations')) :
|
---|
3 | typeof define === 'function' && define.amd ? define('@angular/material/sidenav', ['exports', '@angular/cdk/platform', '@angular/cdk/scrolling', '@angular/common', '@angular/core', '@angular/material/core', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/platform-browser/animations'], factory) :
|
---|
4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.sidenav = {}), global.ng.cdk.platform, global.ng.cdk.scrolling, global.ng.common, global.ng.core, global.ng.material.core, global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.cdk.coercion, global.ng.cdk.keycodes, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.platformBrowser.animations));
|
---|
5 | }(this, (function (exports, platform, scrolling, common, core, core$1, a11y, bidi, coercion, keycodes, rxjs, operators, animations, animations$1) { 'use strict';
|
---|
6 |
|
---|
7 | /*! *****************************************************************************
|
---|
8 | Copyright (c) Microsoft Corporation.
|
---|
9 |
|
---|
10 | Permission to use, copy, modify, and/or distribute this software for any
|
---|
11 | purpose with or without fee is hereby granted.
|
---|
12 |
|
---|
13 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
---|
14 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
---|
15 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
---|
16 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
---|
17 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
---|
18 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
---|
19 | PERFORMANCE OF THIS SOFTWARE.
|
---|
20 | ***************************************************************************** */
|
---|
21 | /* global Reflect, Promise */
|
---|
22 | var extendStatics = function (d, b) {
|
---|
23 | extendStatics = Object.setPrototypeOf ||
|
---|
24 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
---|
25 | function (d, b) { for (var p in b)
|
---|
26 | if (Object.prototype.hasOwnProperty.call(b, p))
|
---|
27 | d[p] = b[p]; };
|
---|
28 | return extendStatics(d, b);
|
---|
29 | };
|
---|
30 | function __extends(d, b) {
|
---|
31 | if (typeof b !== "function" && b !== null)
|
---|
32 | throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
---|
33 | extendStatics(d, b);
|
---|
34 | function __() { this.constructor = d; }
|
---|
35 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
---|
36 | }
|
---|
37 | var __assign = function () {
|
---|
38 | __assign = Object.assign || function __assign(t) {
|
---|
39 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
---|
40 | s = arguments[i];
|
---|
41 | for (var p in s)
|
---|
42 | if (Object.prototype.hasOwnProperty.call(s, p))
|
---|
43 | t[p] = s[p];
|
---|
44 | }
|
---|
45 | return t;
|
---|
46 | };
|
---|
47 | return __assign.apply(this, arguments);
|
---|
48 | };
|
---|
49 | function __rest(s, e) {
|
---|
50 | var t = {};
|
---|
51 | for (var p in s)
|
---|
52 | if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
---|
53 | t[p] = s[p];
|
---|
54 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
---|
55 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
---|
56 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
---|
57 | t[p[i]] = s[p[i]];
|
---|
58 | }
|
---|
59 | return t;
|
---|
60 | }
|
---|
61 | function __decorate(decorators, target, key, desc) {
|
---|
62 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
---|
63 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
---|
64 | r = Reflect.decorate(decorators, target, key, desc);
|
---|
65 | else
|
---|
66 | for (var i = decorators.length - 1; i >= 0; i--)
|
---|
67 | if (d = decorators[i])
|
---|
68 | r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
---|
69 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
---|
70 | }
|
---|
71 | function __param(paramIndex, decorator) {
|
---|
72 | return function (target, key) { decorator(target, key, paramIndex); };
|
---|
73 | }
|
---|
74 | function __metadata(metadataKey, metadataValue) {
|
---|
75 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
|
---|
76 | return Reflect.metadata(metadataKey, metadataValue);
|
---|
77 | }
|
---|
78 | function __awaiter(thisArg, _arguments, P, generator) {
|
---|
79 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
---|
80 | return new (P || (P = Promise))(function (resolve, reject) {
|
---|
81 | function fulfilled(value) { try {
|
---|
82 | step(generator.next(value));
|
---|
83 | }
|
---|
84 | catch (e) {
|
---|
85 | reject(e);
|
---|
86 | } }
|
---|
87 | function rejected(value) { try {
|
---|
88 | step(generator["throw"](value));
|
---|
89 | }
|
---|
90 | catch (e) {
|
---|
91 | reject(e);
|
---|
92 | } }
|
---|
93 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
---|
94 | step((generator = generator.apply(thisArg, _arguments || [])).next());
|
---|
95 | });
|
---|
96 | }
|
---|
97 | function __generator(thisArg, body) {
|
---|
98 | var _ = { label: 0, sent: function () { if (t[0] & 1)
|
---|
99 | throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
---|
100 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
|
---|
101 | function verb(n) { return function (v) { return step([n, v]); }; }
|
---|
102 | function step(op) {
|
---|
103 | if (f)
|
---|
104 | throw new TypeError("Generator is already executing.");
|
---|
105 | while (_)
|
---|
106 | try {
|
---|
107 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
|
---|
108 | return t;
|
---|
109 | if (y = 0, t)
|
---|
110 | op = [op[0] & 2, t.value];
|
---|
111 | switch (op[0]) {
|
---|
112 | case 0:
|
---|
113 | case 1:
|
---|
114 | t = op;
|
---|
115 | break;
|
---|
116 | case 4:
|
---|
117 | _.label++;
|
---|
118 | return { value: op[1], done: false };
|
---|
119 | case 5:
|
---|
120 | _.label++;
|
---|
121 | y = op[1];
|
---|
122 | op = [0];
|
---|
123 | continue;
|
---|
124 | case 7:
|
---|
125 | op = _.ops.pop();
|
---|
126 | _.trys.pop();
|
---|
127 | continue;
|
---|
128 | default:
|
---|
129 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
|
---|
130 | _ = 0;
|
---|
131 | continue;
|
---|
132 | }
|
---|
133 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
|
---|
134 | _.label = op[1];
|
---|
135 | break;
|
---|
136 | }
|
---|
137 | if (op[0] === 6 && _.label < t[1]) {
|
---|
138 | _.label = t[1];
|
---|
139 | t = op;
|
---|
140 | break;
|
---|
141 | }
|
---|
142 | if (t && _.label < t[2]) {
|
---|
143 | _.label = t[2];
|
---|
144 | _.ops.push(op);
|
---|
145 | break;
|
---|
146 | }
|
---|
147 | if (t[2])
|
---|
148 | _.ops.pop();
|
---|
149 | _.trys.pop();
|
---|
150 | continue;
|
---|
151 | }
|
---|
152 | op = body.call(thisArg, _);
|
---|
153 | }
|
---|
154 | catch (e) {
|
---|
155 | op = [6, e];
|
---|
156 | y = 0;
|
---|
157 | }
|
---|
158 | finally {
|
---|
159 | f = t = 0;
|
---|
160 | }
|
---|
161 | if (op[0] & 5)
|
---|
162 | throw op[1];
|
---|
163 | return { value: op[0] ? op[1] : void 0, done: true };
|
---|
164 | }
|
---|
165 | }
|
---|
166 | var __createBinding = Object.create ? (function (o, m, k, k2) {
|
---|
167 | if (k2 === undefined)
|
---|
168 | k2 = k;
|
---|
169 | Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
|
---|
170 | }) : (function (o, m, k, k2) {
|
---|
171 | if (k2 === undefined)
|
---|
172 | k2 = k;
|
---|
173 | o[k2] = m[k];
|
---|
174 | });
|
---|
175 | function __exportStar(m, o) {
|
---|
176 | for (var p in m)
|
---|
177 | if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
|
---|
178 | __createBinding(o, m, p);
|
---|
179 | }
|
---|
180 | function __values(o) {
|
---|
181 | var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
---|
182 | if (m)
|
---|
183 | return m.call(o);
|
---|
184 | if (o && typeof o.length === "number")
|
---|
185 | return {
|
---|
186 | next: function () {
|
---|
187 | if (o && i >= o.length)
|
---|
188 | o = void 0;
|
---|
189 | return { value: o && o[i++], done: !o };
|
---|
190 | }
|
---|
191 | };
|
---|
192 | throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
---|
193 | }
|
---|
194 | function __read(o, n) {
|
---|
195 | var m = typeof Symbol === "function" && o[Symbol.iterator];
|
---|
196 | if (!m)
|
---|
197 | return o;
|
---|
198 | var i = m.call(o), r, ar = [], e;
|
---|
199 | try {
|
---|
200 | while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
|
---|
201 | ar.push(r.value);
|
---|
202 | }
|
---|
203 | catch (error) {
|
---|
204 | e = { error: error };
|
---|
205 | }
|
---|
206 | finally {
|
---|
207 | try {
|
---|
208 | if (r && !r.done && (m = i["return"]))
|
---|
209 | m.call(i);
|
---|
210 | }
|
---|
211 | finally {
|
---|
212 | if (e)
|
---|
213 | throw e.error;
|
---|
214 | }
|
---|
215 | }
|
---|
216 | return ar;
|
---|
217 | }
|
---|
218 | /** @deprecated */
|
---|
219 | function __spread() {
|
---|
220 | for (var ar = [], i = 0; i < arguments.length; i++)
|
---|
221 | ar = ar.concat(__read(arguments[i]));
|
---|
222 | return ar;
|
---|
223 | }
|
---|
224 | /** @deprecated */
|
---|
225 | function __spreadArrays() {
|
---|
226 | for (var s = 0, i = 0, il = arguments.length; i < il; i++)
|
---|
227 | s += arguments[i].length;
|
---|
228 | for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
---|
229 | for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
---|
230 | r[k] = a[j];
|
---|
231 | return r;
|
---|
232 | }
|
---|
233 | function __spreadArray(to, from, pack) {
|
---|
234 | if (pack || arguments.length === 2)
|
---|
235 | for (var i = 0, l = from.length, ar; i < l; i++) {
|
---|
236 | if (ar || !(i in from)) {
|
---|
237 | if (!ar)
|
---|
238 | ar = Array.prototype.slice.call(from, 0, i);
|
---|
239 | ar[i] = from[i];
|
---|
240 | }
|
---|
241 | }
|
---|
242 | return to.concat(ar || from);
|
---|
243 | }
|
---|
244 | function __await(v) {
|
---|
245 | return this instanceof __await ? (this.v = v, this) : new __await(v);
|
---|
246 | }
|
---|
247 | function __asyncGenerator(thisArg, _arguments, generator) {
|
---|
248 | if (!Symbol.asyncIterator)
|
---|
249 | throw new TypeError("Symbol.asyncIterator is not defined.");
|
---|
250 | var g = generator.apply(thisArg, _arguments || []), i, q = [];
|
---|
251 | return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
|
---|
252 | function verb(n) { if (g[n])
|
---|
253 | i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
|
---|
254 | function resume(n, v) { try {
|
---|
255 | step(g[n](v));
|
---|
256 | }
|
---|
257 | catch (e) {
|
---|
258 | settle(q[0][3], e);
|
---|
259 | } }
|
---|
260 | function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
|
---|
261 | function fulfill(value) { resume("next", value); }
|
---|
262 | function reject(value) { resume("throw", value); }
|
---|
263 | function settle(f, v) { if (f(v), q.shift(), q.length)
|
---|
264 | resume(q[0][0], q[0][1]); }
|
---|
265 | }
|
---|
266 | function __asyncDelegator(o) {
|
---|
267 | var i, p;
|
---|
268 | return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
|
---|
269 | function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
|
---|
270 | }
|
---|
271 | function __asyncValues(o) {
|
---|
272 | if (!Symbol.asyncIterator)
|
---|
273 | throw new TypeError("Symbol.asyncIterator is not defined.");
|
---|
274 | var m = o[Symbol.asyncIterator], i;
|
---|
275 | return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
|
---|
276 | function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
|
---|
277 | function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
|
---|
278 | }
|
---|
279 | function __makeTemplateObject(cooked, raw) {
|
---|
280 | if (Object.defineProperty) {
|
---|
281 | Object.defineProperty(cooked, "raw", { value: raw });
|
---|
282 | }
|
---|
283 | else {
|
---|
284 | cooked.raw = raw;
|
---|
285 | }
|
---|
286 | return cooked;
|
---|
287 | }
|
---|
288 | ;
|
---|
289 | var __setModuleDefault = Object.create ? (function (o, v) {
|
---|
290 | Object.defineProperty(o, "default", { enumerable: true, value: v });
|
---|
291 | }) : function (o, v) {
|
---|
292 | o["default"] = v;
|
---|
293 | };
|
---|
294 | function __importStar(mod) {
|
---|
295 | if (mod && mod.__esModule)
|
---|
296 | return mod;
|
---|
297 | var result = {};
|
---|
298 | if (mod != null)
|
---|
299 | for (var k in mod)
|
---|
300 | if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
|
---|
301 | __createBinding(result, mod, k);
|
---|
302 | __setModuleDefault(result, mod);
|
---|
303 | return result;
|
---|
304 | }
|
---|
305 | function __importDefault(mod) {
|
---|
306 | return (mod && mod.__esModule) ? mod : { default: mod };
|
---|
307 | }
|
---|
308 | function __classPrivateFieldGet(receiver, state, kind, f) {
|
---|
309 | if (kind === "a" && !f)
|
---|
310 | throw new TypeError("Private accessor was defined without a getter");
|
---|
311 | if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
---|
312 | throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
---|
313 | return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
---|
314 | }
|
---|
315 | function __classPrivateFieldSet(receiver, state, value, kind, f) {
|
---|
316 | if (kind === "m")
|
---|
317 | throw new TypeError("Private method is not writable");
|
---|
318 | if (kind === "a" && !f)
|
---|
319 | throw new TypeError("Private accessor was defined without a setter");
|
---|
320 | if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
---|
321 | throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
---|
322 | return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
---|
323 | }
|
---|
324 |
|
---|
325 | /**
|
---|
326 | * @license
|
---|
327 | * Copyright Google LLC All Rights Reserved.
|
---|
328 | *
|
---|
329 | * Use of this source code is governed by an MIT-style license that can be
|
---|
330 | * found in the LICENSE file at https://angular.io/license
|
---|
331 | */
|
---|
332 | /**
|
---|
333 | * Animations used by the Material drawers.
|
---|
334 | * @docs-private
|
---|
335 | */
|
---|
336 | var matDrawerAnimations = {
|
---|
337 | /** Animation that slides a drawer in and out. */
|
---|
338 | transformDrawer: animations.trigger('transform', [
|
---|
339 | // We remove the `transform` here completely, rather than setting it to zero, because:
|
---|
340 | // 1. Having a transform can cause elements with ripples or an animated
|
---|
341 | // transform to shift around in Chrome with an RTL layout (see #10023).
|
---|
342 | // 2. 3d transforms causes text to appear blurry on IE and Edge.
|
---|
343 | animations.state('open, open-instant', animations.style({
|
---|
344 | 'transform': 'none',
|
---|
345 | 'visibility': 'visible',
|
---|
346 | })),
|
---|
347 | animations.state('void', animations.style({
|
---|
348 | // Avoids the shadow showing up when closed in SSR.
|
---|
349 | 'box-shadow': 'none',
|
---|
350 | 'visibility': 'hidden',
|
---|
351 | })),
|
---|
352 | animations.transition('void => open-instant', animations.animate('0ms')),
|
---|
353 | animations.transition('void <=> open, open-instant => void', animations.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
|
---|
354 | ])
|
---|
355 | };
|
---|
356 |
|
---|
357 | /**
|
---|
358 | * Throws an exception when two MatDrawer are matching the same position.
|
---|
359 | * @docs-private
|
---|
360 | */
|
---|
361 | function throwMatDuplicatedDrawerError(position) {
|
---|
362 | throw Error("A drawer was already declared for 'position=\"" + position + "\"'");
|
---|
363 | }
|
---|
364 | /** Configures whether drawers should use auto sizing by default. */
|
---|
365 | var MAT_DRAWER_DEFAULT_AUTOSIZE = new core.InjectionToken('MAT_DRAWER_DEFAULT_AUTOSIZE', {
|
---|
366 | providedIn: 'root',
|
---|
367 | factory: MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY,
|
---|
368 | });
|
---|
369 | /**
|
---|
370 | * Used to provide a drawer container to a drawer while avoiding circular references.
|
---|
371 | * @docs-private
|
---|
372 | */
|
---|
373 | var MAT_DRAWER_CONTAINER = new core.InjectionToken('MAT_DRAWER_CONTAINER');
|
---|
374 | /** @docs-private */
|
---|
375 | function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY() {
|
---|
376 | return false;
|
---|
377 | }
|
---|
378 | var MatDrawerContent = /** @class */ (function (_super) {
|
---|
379 | __extends(MatDrawerContent, _super);
|
---|
380 | function MatDrawerContent(_changeDetectorRef, _container, elementRef, scrollDispatcher, ngZone) {
|
---|
381 | var _this = _super.call(this, elementRef, scrollDispatcher, ngZone) || this;
|
---|
382 | _this._changeDetectorRef = _changeDetectorRef;
|
---|
383 | _this._container = _container;
|
---|
384 | return _this;
|
---|
385 | }
|
---|
386 | MatDrawerContent.prototype.ngAfterContentInit = function () {
|
---|
387 | var _this = this;
|
---|
388 | this._container._contentMarginChanges.subscribe(function () {
|
---|
389 | _this._changeDetectorRef.markForCheck();
|
---|
390 | });
|
---|
391 | };
|
---|
392 | return MatDrawerContent;
|
---|
393 | }(scrolling.CdkScrollable));
|
---|
394 | MatDrawerContent.decorators = [
|
---|
395 | { type: core.Component, args: [{
|
---|
396 | selector: 'mat-drawer-content',
|
---|
397 | template: '<ng-content></ng-content>',
|
---|
398 | host: {
|
---|
399 | 'class': 'mat-drawer-content',
|
---|
400 | '[style.margin-left.px]': '_container._contentMargins.left',
|
---|
401 | '[style.margin-right.px]': '_container._contentMargins.right',
|
---|
402 | },
|
---|
403 | changeDetection: core.ChangeDetectionStrategy.OnPush,
|
---|
404 | encapsulation: core.ViewEncapsulation.None
|
---|
405 | },] }
|
---|
406 | ];
|
---|
407 | MatDrawerContent.ctorParameters = function () { return [
|
---|
408 | { type: core.ChangeDetectorRef },
|
---|
409 | { type: MatDrawerContainer, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatDrawerContainer; }),] }] },
|
---|
410 | { type: core.ElementRef },
|
---|
411 | { type: scrolling.ScrollDispatcher },
|
---|
412 | { type: core.NgZone }
|
---|
413 | ]; };
|
---|
414 | /**
|
---|
415 | * This component corresponds to a drawer that can be opened on the drawer container.
|
---|
416 | */
|
---|
417 | var MatDrawer = /** @class */ (function () {
|
---|
418 | function MatDrawer(_elementRef, _focusTrapFactory, _focusMonitor, _platform, _ngZone, _doc, _container) {
|
---|
419 | var _this = this;
|
---|
420 | this._elementRef = _elementRef;
|
---|
421 | this._focusTrapFactory = _focusTrapFactory;
|
---|
422 | this._focusMonitor = _focusMonitor;
|
---|
423 | this._platform = _platform;
|
---|
424 | this._ngZone = _ngZone;
|
---|
425 | this._doc = _doc;
|
---|
426 | this._container = _container;
|
---|
427 | this._elementFocusedBeforeDrawerWasOpened = null;
|
---|
428 | /** Whether the drawer is initialized. Used for disabling the initial animation. */
|
---|
429 | this._enableAnimations = false;
|
---|
430 | this._position = 'start';
|
---|
431 | this._mode = 'over';
|
---|
432 | this._disableClose = false;
|
---|
433 | this._opened = false;
|
---|
434 | /** Emits whenever the drawer has started animating. */
|
---|
435 | this._animationStarted = new rxjs.Subject();
|
---|
436 | /** Emits whenever the drawer is done animating. */
|
---|
437 | this._animationEnd = new rxjs.Subject();
|
---|
438 | /** Current state of the sidenav animation. */
|
---|
439 | // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator
|
---|
440 | // metadata is not inherited by child classes, instead the host binding data is defined in a way
|
---|
441 | // that can be inherited.
|
---|
442 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
443 | this._animationState = 'void';
|
---|
444 | /** Event emitted when the drawer open state is changed. */
|
---|
445 | this.openedChange =
|
---|
446 | // Note this has to be async in order to avoid some issues with two-bindings (see #8872).
|
---|
447 | new core.EventEmitter(/* isAsync */ true);
|
---|
448 | /** Event emitted when the drawer has been opened. */
|
---|
449 | this._openedStream = this.openedChange.pipe(operators.filter(function (o) { return o; }), operators.map(function () { }));
|
---|
450 | /** Event emitted when the drawer has started opening. */
|
---|
451 | this.openedStart = this._animationStarted.pipe(operators.filter(function (e) { return e.fromState !== e.toState && e.toState.indexOf('open') === 0; }), operators.mapTo(undefined));
|
---|
452 | /** Event emitted when the drawer has been closed. */
|
---|
453 | this._closedStream = this.openedChange.pipe(operators.filter(function (o) { return !o; }), operators.map(function () { }));
|
---|
454 | /** Event emitted when the drawer has started closing. */
|
---|
455 | this.closedStart = this._animationStarted.pipe(operators.filter(function (e) { return e.fromState !== e.toState && e.toState === 'void'; }), operators.mapTo(undefined));
|
---|
456 | /** Emits when the component is destroyed. */
|
---|
457 | this._destroyed = new rxjs.Subject();
|
---|
458 | /** Event emitted when the drawer's position changes. */
|
---|
459 | // tslint:disable-next-line:no-output-on-prefix
|
---|
460 | this.onPositionChanged = new core.EventEmitter();
|
---|
461 | /**
|
---|
462 | * An observable that emits when the drawer mode changes. This is used by the drawer container to
|
---|
463 | * to know when to when the mode changes so it can adapt the margins on the content.
|
---|
464 | */
|
---|
465 | this._modeChanged = new rxjs.Subject();
|
---|
466 | this.openedChange.subscribe(function (opened) {
|
---|
467 | if (opened) {
|
---|
468 | if (_this._doc) {
|
---|
469 | _this._elementFocusedBeforeDrawerWasOpened = _this._doc.activeElement;
|
---|
470 | }
|
---|
471 | _this._takeFocus();
|
---|
472 | }
|
---|
473 | else if (_this._isFocusWithinDrawer()) {
|
---|
474 | _this._restoreFocus();
|
---|
475 | }
|
---|
476 | });
|
---|
477 | /**
|
---|
478 | * Listen to `keydown` events outside the zone so that change detection is not run every
|
---|
479 | * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed
|
---|
480 | * and we don't have close disabled.
|
---|
481 | */
|
---|
482 | this._ngZone.runOutsideAngular(function () {
|
---|
483 | rxjs.fromEvent(_this._elementRef.nativeElement, 'keydown').pipe(operators.filter(function (event) {
|
---|
484 | return event.keyCode === keycodes.ESCAPE && !_this.disableClose && !keycodes.hasModifierKey(event);
|
---|
485 | }), operators.takeUntil(_this._destroyed)).subscribe(function (event) { return _this._ngZone.run(function () {
|
---|
486 | _this.close();
|
---|
487 | event.stopPropagation();
|
---|
488 | event.preventDefault();
|
---|
489 | }); });
|
---|
490 | });
|
---|
491 | // We need a Subject with distinctUntilChanged, because the `done` event
|
---|
492 | // fires twice on some browsers. See https://github.com/angular/angular/issues/24084
|
---|
493 | this._animationEnd.pipe(operators.distinctUntilChanged(function (x, y) {
|
---|
494 | return x.fromState === y.fromState && x.toState === y.toState;
|
---|
495 | })).subscribe(function (event) {
|
---|
496 | var fromState = event.fromState, toState = event.toState;
|
---|
497 | if ((toState.indexOf('open') === 0 && fromState === 'void') ||
|
---|
498 | (toState === 'void' && fromState.indexOf('open') === 0)) {
|
---|
499 | _this.openedChange.emit(_this._opened);
|
---|
500 | }
|
---|
501 | });
|
---|
502 | }
|
---|
503 | Object.defineProperty(MatDrawer.prototype, "position", {
|
---|
504 | /** The side that the drawer is attached to. */
|
---|
505 | get: function () { return this._position; },
|
---|
506 | set: function (value) {
|
---|
507 | // Make sure we have a valid value.
|
---|
508 | value = value === 'end' ? 'end' : 'start';
|
---|
509 | if (value != this._position) {
|
---|
510 | this._position = value;
|
---|
511 | this.onPositionChanged.emit();
|
---|
512 | }
|
---|
513 | },
|
---|
514 | enumerable: false,
|
---|
515 | configurable: true
|
---|
516 | });
|
---|
517 | Object.defineProperty(MatDrawer.prototype, "mode", {
|
---|
518 | /** Mode of the drawer; one of 'over', 'push' or 'side'. */
|
---|
519 | get: function () { return this._mode; },
|
---|
520 | set: function (value) {
|
---|
521 | this._mode = value;
|
---|
522 | this._updateFocusTrapState();
|
---|
523 | this._modeChanged.next();
|
---|
524 | },
|
---|
525 | enumerable: false,
|
---|
526 | configurable: true
|
---|
527 | });
|
---|
528 | Object.defineProperty(MatDrawer.prototype, "disableClose", {
|
---|
529 | /** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */
|
---|
530 | get: function () { return this._disableClose; },
|
---|
531 | set: function (value) { this._disableClose = coercion.coerceBooleanProperty(value); },
|
---|
532 | enumerable: false,
|
---|
533 | configurable: true
|
---|
534 | });
|
---|
535 | Object.defineProperty(MatDrawer.prototype, "autoFocus", {
|
---|
536 | /**
|
---|
537 | * Whether the drawer should focus the first focusable element automatically when opened.
|
---|
538 | * Defaults to false in when `mode` is set to `side`, otherwise defaults to `true`. If explicitly
|
---|
539 | * enabled, focus will be moved into the sidenav in `side` mode as well.
|
---|
540 | */
|
---|
541 | get: function () {
|
---|
542 | var value = this._autoFocus;
|
---|
543 | // Note that usually we disable auto focusing in `side` mode, because we don't know how the
|
---|
544 | // sidenav is being used, but in some cases it still makes sense to do it. If the consumer
|
---|
545 | // explicitly enabled `autoFocus`, we take it as them always wanting to enable it.
|
---|
546 | return value == null ? this.mode !== 'side' : value;
|
---|
547 | },
|
---|
548 | set: function (value) { this._autoFocus = coercion.coerceBooleanProperty(value); },
|
---|
549 | enumerable: false,
|
---|
550 | configurable: true
|
---|
551 | });
|
---|
552 | Object.defineProperty(MatDrawer.prototype, "opened", {
|
---|
553 | /**
|
---|
554 | * Whether the drawer is opened. We overload this because we trigger an event when it
|
---|
555 | * starts or end.
|
---|
556 | */
|
---|
557 | get: function () { return this._opened; },
|
---|
558 | set: function (value) { this.toggle(coercion.coerceBooleanProperty(value)); },
|
---|
559 | enumerable: false,
|
---|
560 | configurable: true
|
---|
561 | });
|
---|
562 | /**
|
---|
563 | * Moves focus into the drawer. Note that this works even if
|
---|
564 | * the focus trap is disabled in `side` mode.
|
---|
565 | */
|
---|
566 | MatDrawer.prototype._takeFocus = function () {
|
---|
567 | var _this = this;
|
---|
568 | if (!this.autoFocus || !this._focusTrap) {
|
---|
569 | return;
|
---|
570 | }
|
---|
571 | this._focusTrap.focusInitialElementWhenReady().then(function (hasMovedFocus) {
|
---|
572 | // If there were no focusable elements, focus the sidenav itself so the keyboard navigation
|
---|
573 | // still works. We need to check that `focus` is a function due to Universal.
|
---|
574 | if (!hasMovedFocus && typeof _this._elementRef.nativeElement.focus === 'function') {
|
---|
575 | _this._elementRef.nativeElement.focus();
|
---|
576 | }
|
---|
577 | });
|
---|
578 | };
|
---|
579 | /**
|
---|
580 | * Restores focus to the element that was originally focused when the drawer opened.
|
---|
581 | * If no element was focused at that time, the focus will be restored to the drawer.
|
---|
582 | */
|
---|
583 | MatDrawer.prototype._restoreFocus = function () {
|
---|
584 | if (!this.autoFocus) {
|
---|
585 | return;
|
---|
586 | }
|
---|
587 | // Note that we don't check via `instanceof HTMLElement` so that we can cover SVGs as well.
|
---|
588 | if (this._elementFocusedBeforeDrawerWasOpened) {
|
---|
589 | this._focusMonitor.focusVia(this._elementFocusedBeforeDrawerWasOpened, this._openedVia);
|
---|
590 | }
|
---|
591 | else {
|
---|
592 | this._elementRef.nativeElement.blur();
|
---|
593 | }
|
---|
594 | this._elementFocusedBeforeDrawerWasOpened = null;
|
---|
595 | this._openedVia = null;
|
---|
596 | };
|
---|
597 | /** Whether focus is currently within the drawer. */
|
---|
598 | MatDrawer.prototype._isFocusWithinDrawer = function () {
|
---|
599 | var _a;
|
---|
600 | var activeEl = (_a = this._doc) === null || _a === void 0 ? void 0 : _a.activeElement;
|
---|
601 | return !!activeEl && this._elementRef.nativeElement.contains(activeEl);
|
---|
602 | };
|
---|
603 | MatDrawer.prototype.ngAfterContentInit = function () {
|
---|
604 | this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
|
---|
605 | this._updateFocusTrapState();
|
---|
606 | };
|
---|
607 | MatDrawer.prototype.ngAfterContentChecked = function () {
|
---|
608 | // Enable the animations after the lifecycle hooks have run, in order to avoid animating
|
---|
609 | // drawers that are open by default. When we're on the server, we shouldn't enable the
|
---|
610 | // animations, because we don't want the drawer to animate the first time the user sees
|
---|
611 | // the page.
|
---|
612 | if (this._platform.isBrowser) {
|
---|
613 | this._enableAnimations = true;
|
---|
614 | }
|
---|
615 | };
|
---|
616 | MatDrawer.prototype.ngOnDestroy = function () {
|
---|
617 | if (this._focusTrap) {
|
---|
618 | this._focusTrap.destroy();
|
---|
619 | }
|
---|
620 | this._animationStarted.complete();
|
---|
621 | this._animationEnd.complete();
|
---|
622 | this._modeChanged.complete();
|
---|
623 | this._destroyed.next();
|
---|
624 | this._destroyed.complete();
|
---|
625 | };
|
---|
626 | /**
|
---|
627 | * Open the drawer.
|
---|
628 | * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
|
---|
629 | * Used for focus management after the sidenav is closed.
|
---|
630 | */
|
---|
631 | MatDrawer.prototype.open = function (openedVia) {
|
---|
632 | return this.toggle(true, openedVia);
|
---|
633 | };
|
---|
634 | /** Close the drawer. */
|
---|
635 | MatDrawer.prototype.close = function () {
|
---|
636 | return this.toggle(false);
|
---|
637 | };
|
---|
638 | /** Closes the drawer with context that the backdrop was clicked. */
|
---|
639 | MatDrawer.prototype._closeViaBackdropClick = function () {
|
---|
640 | // If the drawer is closed upon a backdrop click, we always want to restore focus. We
|
---|
641 | // don't need to check whether focus is currently in the drawer, as clicking on the
|
---|
642 | // backdrop causes blurring of the active element.
|
---|
643 | return this._setOpen(/* isOpen */ false, /* restoreFocus */ true);
|
---|
644 | };
|
---|
645 | /**
|
---|
646 | * Toggle this drawer.
|
---|
647 | * @param isOpen Whether the drawer should be open.
|
---|
648 | * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
|
---|
649 | * Used for focus management after the sidenav is closed.
|
---|
650 | */
|
---|
651 | MatDrawer.prototype.toggle = function (isOpen, openedVia) {
|
---|
652 | if (isOpen === void 0) { isOpen = !this.opened; }
|
---|
653 | // If the focus is currently inside the drawer content and we are closing the drawer,
|
---|
654 | // restore the focus to the initially focused element (when the drawer opened).
|
---|
655 | return this._setOpen(isOpen, /* restoreFocus */ !isOpen && this._isFocusWithinDrawer(), openedVia);
|
---|
656 | };
|
---|
657 | /**
|
---|
658 | * Toggles the opened state of the drawer.
|
---|
659 | * @param isOpen Whether the drawer should open or close.
|
---|
660 | * @param restoreFocus Whether focus should be restored on close.
|
---|
661 | * @param openedVia Focus origin that can be optionally set when opening a drawer. The
|
---|
662 | * origin will be used later when focus is restored on drawer close.
|
---|
663 | */
|
---|
664 | MatDrawer.prototype._setOpen = function (isOpen, restoreFocus, openedVia) {
|
---|
665 | var _this = this;
|
---|
666 | if (openedVia === void 0) { openedVia = 'program'; }
|
---|
667 | this._opened = isOpen;
|
---|
668 | if (isOpen) {
|
---|
669 | this._animationState = this._enableAnimations ? 'open' : 'open-instant';
|
---|
670 | this._openedVia = openedVia;
|
---|
671 | }
|
---|
672 | else {
|
---|
673 | this._animationState = 'void';
|
---|
674 | if (restoreFocus) {
|
---|
675 | this._restoreFocus();
|
---|
676 | }
|
---|
677 | }
|
---|
678 | this._updateFocusTrapState();
|
---|
679 | return new Promise(function (resolve) {
|
---|
680 | _this.openedChange.pipe(operators.take(1)).subscribe(function (open) { return resolve(open ? 'open' : 'close'); });
|
---|
681 | });
|
---|
682 | };
|
---|
683 | MatDrawer.prototype._getWidth = function () {
|
---|
684 | return this._elementRef.nativeElement ? (this._elementRef.nativeElement.offsetWidth || 0) : 0;
|
---|
685 | };
|
---|
686 | /** Updates the enabled state of the focus trap. */
|
---|
687 | MatDrawer.prototype._updateFocusTrapState = function () {
|
---|
688 | if (this._focusTrap) {
|
---|
689 | // The focus trap is only enabled when the drawer is open in any mode other than side.
|
---|
690 | this._focusTrap.enabled = this.opened && this.mode !== 'side';
|
---|
691 | }
|
---|
692 | };
|
---|
693 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
694 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
695 | // ViewEngine they're overwritten.
|
---|
696 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
697 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
698 | MatDrawer.prototype._animationStartListener = function (event) {
|
---|
699 | this._animationStarted.next(event);
|
---|
700 | };
|
---|
701 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
702 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
703 | // ViewEngine they're overwritten.
|
---|
704 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
705 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
706 | MatDrawer.prototype._animationDoneListener = function (event) {
|
---|
707 | this._animationEnd.next(event);
|
---|
708 | };
|
---|
709 | return MatDrawer;
|
---|
710 | }());
|
---|
711 | MatDrawer.decorators = [
|
---|
712 | { type: core.Component, args: [{
|
---|
713 | selector: 'mat-drawer',
|
---|
714 | exportAs: 'matDrawer',
|
---|
715 | template: "<div class=\"mat-drawer-inner-container\" cdkScrollable>\r\n <ng-content></ng-content>\r\n</div>\r\n",
|
---|
716 | animations: [matDrawerAnimations.transformDrawer],
|
---|
717 | host: {
|
---|
718 | 'class': 'mat-drawer',
|
---|
719 | // must prevent the browser from aligning text based on value
|
---|
720 | '[attr.align]': 'null',
|
---|
721 | '[class.mat-drawer-end]': 'position === "end"',
|
---|
722 | '[class.mat-drawer-over]': 'mode === "over"',
|
---|
723 | '[class.mat-drawer-push]': 'mode === "push"',
|
---|
724 | '[class.mat-drawer-side]': 'mode === "side"',
|
---|
725 | '[class.mat-drawer-opened]': 'opened',
|
---|
726 | 'tabIndex': '-1',
|
---|
727 | },
|
---|
728 | changeDetection: core.ChangeDetectionStrategy.OnPush,
|
---|
729 | encapsulation: core.ViewEncapsulation.None
|
---|
730 | },] }
|
---|
731 | ];
|
---|
732 | MatDrawer.ctorParameters = function () { return [
|
---|
733 | { type: core.ElementRef },
|
---|
734 | { type: a11y.FocusTrapFactory },
|
---|
735 | { type: a11y.FocusMonitor },
|
---|
736 | { type: platform.Platform },
|
---|
737 | { type: core.NgZone },
|
---|
738 | { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] },
|
---|
739 | { type: MatDrawerContainer, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DRAWER_CONTAINER,] }] }
|
---|
740 | ]; };
|
---|
741 | MatDrawer.propDecorators = {
|
---|
742 | position: [{ type: core.Input }],
|
---|
743 | mode: [{ type: core.Input }],
|
---|
744 | disableClose: [{ type: core.Input }],
|
---|
745 | autoFocus: [{ type: core.Input }],
|
---|
746 | opened: [{ type: core.Input }],
|
---|
747 | _animationState: [{ type: core.HostBinding, args: ['@transform',] }],
|
---|
748 | openedChange: [{ type: core.Output }],
|
---|
749 | _openedStream: [{ type: core.Output, args: ['opened',] }],
|
---|
750 | openedStart: [{ type: core.Output }],
|
---|
751 | _closedStream: [{ type: core.Output, args: ['closed',] }],
|
---|
752 | closedStart: [{ type: core.Output }],
|
---|
753 | onPositionChanged: [{ type: core.Output, args: ['positionChanged',] }],
|
---|
754 | _animationStartListener: [{ type: core.HostListener, args: ['@transform.start', ['$event'],] }],
|
---|
755 | _animationDoneListener: [{ type: core.HostListener, args: ['@transform.done', ['$event'],] }]
|
---|
756 | };
|
---|
757 | /**
|
---|
758 | * `<mat-drawer-container>` component.
|
---|
759 | *
|
---|
760 | * This is the parent component to one or two `<mat-drawer>`s that validates the state internally
|
---|
761 | * and coordinates the backdrop and content styling.
|
---|
762 | */
|
---|
763 | var MatDrawerContainer = /** @class */ (function () {
|
---|
764 | function MatDrawerContainer(_dir, _element, _ngZone, _changeDetectorRef, viewportRuler, defaultAutosize, _animationMode) {
|
---|
765 | var _this = this;
|
---|
766 | if (defaultAutosize === void 0) { defaultAutosize = false; }
|
---|
767 | this._dir = _dir;
|
---|
768 | this._element = _element;
|
---|
769 | this._ngZone = _ngZone;
|
---|
770 | this._changeDetectorRef = _changeDetectorRef;
|
---|
771 | this._animationMode = _animationMode;
|
---|
772 | /** Drawers that belong to this container. */
|
---|
773 | this._drawers = new core.QueryList();
|
---|
774 | /** Event emitted when the drawer backdrop is clicked. */
|
---|
775 | this.backdropClick = new core.EventEmitter();
|
---|
776 | /** Emits when the component is destroyed. */
|
---|
777 | this._destroyed = new rxjs.Subject();
|
---|
778 | /** Emits on every ngDoCheck. Used for debouncing reflows. */
|
---|
779 | this._doCheckSubject = new rxjs.Subject();
|
---|
780 | /**
|
---|
781 | * Margins to be applied to the content. These are used to push / shrink the drawer content when a
|
---|
782 | * drawer is open. We use margin rather than transform even for push mode because transform breaks
|
---|
783 | * fixed position elements inside of the transformed element.
|
---|
784 | */
|
---|
785 | this._contentMargins = { left: null, right: null };
|
---|
786 | this._contentMarginChanges = new rxjs.Subject();
|
---|
787 | // If a `Dir` directive exists up the tree, listen direction changes
|
---|
788 | // and update the left/right properties to point to the proper start/end.
|
---|
789 | if (_dir) {
|
---|
790 | _dir.change.pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
|
---|
791 | _this._validateDrawers();
|
---|
792 | _this.updateContentMargins();
|
---|
793 | });
|
---|
794 | }
|
---|
795 | // Since the minimum width of the sidenav depends on the viewport width,
|
---|
796 | // we need to recompute the margins if the viewport changes.
|
---|
797 | viewportRuler.change()
|
---|
798 | .pipe(operators.takeUntil(this._destroyed))
|
---|
799 | .subscribe(function () { return _this.updateContentMargins(); });
|
---|
800 | this._autosize = defaultAutosize;
|
---|
801 | }
|
---|
802 | Object.defineProperty(MatDrawerContainer.prototype, "start", {
|
---|
803 | /** The drawer child with the `start` position. */
|
---|
804 | get: function () { return this._start; },
|
---|
805 | enumerable: false,
|
---|
806 | configurable: true
|
---|
807 | });
|
---|
808 | Object.defineProperty(MatDrawerContainer.prototype, "end", {
|
---|
809 | /** The drawer child with the `end` position. */
|
---|
810 | get: function () { return this._end; },
|
---|
811 | enumerable: false,
|
---|
812 | configurable: true
|
---|
813 | });
|
---|
814 | Object.defineProperty(MatDrawerContainer.prototype, "autosize", {
|
---|
815 | /**
|
---|
816 | * Whether to automatically resize the container whenever
|
---|
817 | * the size of any of its drawers changes.
|
---|
818 | *
|
---|
819 | * **Use at your own risk!** Enabling this option can cause layout thrashing by measuring
|
---|
820 | * the drawers on every change detection cycle. Can be configured globally via the
|
---|
821 | * `MAT_DRAWER_DEFAULT_AUTOSIZE` token.
|
---|
822 | */
|
---|
823 | get: function () { return this._autosize; },
|
---|
824 | set: function (value) { this._autosize = coercion.coerceBooleanProperty(value); },
|
---|
825 | enumerable: false,
|
---|
826 | configurable: true
|
---|
827 | });
|
---|
828 | Object.defineProperty(MatDrawerContainer.prototype, "hasBackdrop", {
|
---|
829 | /**
|
---|
830 | * Whether the drawer container should have a backdrop while one of the sidenavs is open.
|
---|
831 | * If explicitly set to `true`, the backdrop will be enabled for drawers in the `side`
|
---|
832 | * mode as well.
|
---|
833 | */
|
---|
834 | get: function () {
|
---|
835 | if (this._backdropOverride == null) {
|
---|
836 | return !this._start || this._start.mode !== 'side' || !this._end || this._end.mode !== 'side';
|
---|
837 | }
|
---|
838 | return this._backdropOverride;
|
---|
839 | },
|
---|
840 | set: function (value) {
|
---|
841 | this._backdropOverride = value == null ? null : coercion.coerceBooleanProperty(value);
|
---|
842 | },
|
---|
843 | enumerable: false,
|
---|
844 | configurable: true
|
---|
845 | });
|
---|
846 | Object.defineProperty(MatDrawerContainer.prototype, "scrollable", {
|
---|
847 | /** Reference to the CdkScrollable instance that wraps the scrollable content. */
|
---|
848 | get: function () {
|
---|
849 | return this._userContent || this._content;
|
---|
850 | },
|
---|
851 | enumerable: false,
|
---|
852 | configurable: true
|
---|
853 | });
|
---|
854 | MatDrawerContainer.prototype.ngAfterContentInit = function () {
|
---|
855 | var _this = this;
|
---|
856 | this._allDrawers.changes
|
---|
857 | .pipe(operators.startWith(this._allDrawers), operators.takeUntil(this._destroyed))
|
---|
858 | .subscribe(function (drawer) {
|
---|
859 | _this._drawers.reset(drawer.filter(function (item) { return !item._container || item._container === _this; }));
|
---|
860 | _this._drawers.notifyOnChanges();
|
---|
861 | });
|
---|
862 | this._drawers.changes.pipe(operators.startWith(null)).subscribe(function () {
|
---|
863 | _this._validateDrawers();
|
---|
864 | _this._drawers.forEach(function (drawer) {
|
---|
865 | _this._watchDrawerToggle(drawer);
|
---|
866 | _this._watchDrawerPosition(drawer);
|
---|
867 | _this._watchDrawerMode(drawer);
|
---|
868 | });
|
---|
869 | if (!_this._drawers.length ||
|
---|
870 | _this._isDrawerOpen(_this._start) ||
|
---|
871 | _this._isDrawerOpen(_this._end)) {
|
---|
872 | _this.updateContentMargins();
|
---|
873 | }
|
---|
874 | _this._changeDetectorRef.markForCheck();
|
---|
875 | });
|
---|
876 | // Avoid hitting the NgZone through the debounce timeout.
|
---|
877 | this._ngZone.runOutsideAngular(function () {
|
---|
878 | _this._doCheckSubject.pipe(operators.debounceTime(10), // Arbitrary debounce time, less than a frame at 60fps
|
---|
879 | operators.takeUntil(_this._destroyed)).subscribe(function () { return _this.updateContentMargins(); });
|
---|
880 | });
|
---|
881 | };
|
---|
882 | MatDrawerContainer.prototype.ngOnDestroy = function () {
|
---|
883 | this._contentMarginChanges.complete();
|
---|
884 | this._doCheckSubject.complete();
|
---|
885 | this._drawers.destroy();
|
---|
886 | this._destroyed.next();
|
---|
887 | this._destroyed.complete();
|
---|
888 | };
|
---|
889 | /** Calls `open` of both start and end drawers */
|
---|
890 | MatDrawerContainer.prototype.open = function () {
|
---|
891 | this._drawers.forEach(function (drawer) { return drawer.open(); });
|
---|
892 | };
|
---|
893 | /** Calls `close` of both start and end drawers */
|
---|
894 | MatDrawerContainer.prototype.close = function () {
|
---|
895 | this._drawers.forEach(function (drawer) { return drawer.close(); });
|
---|
896 | };
|
---|
897 | /**
|
---|
898 | * Recalculates and updates the inline styles for the content. Note that this should be used
|
---|
899 | * sparingly, because it causes a reflow.
|
---|
900 | */
|
---|
901 | MatDrawerContainer.prototype.updateContentMargins = function () {
|
---|
902 | var _this = this;
|
---|
903 | // 1. For drawers in `over` mode, they don't affect the content.
|
---|
904 | // 2. For drawers in `side` mode they should shrink the content. We do this by adding to the
|
---|
905 | // left margin (for left drawer) or right margin (for right the drawer).
|
---|
906 | // 3. For drawers in `push` mode the should shift the content without resizing it. We do this by
|
---|
907 | // adding to the left or right margin and simultaneously subtracting the same amount of
|
---|
908 | // margin from the other side.
|
---|
909 | var left = 0;
|
---|
910 | var right = 0;
|
---|
911 | if (this._left && this._left.opened) {
|
---|
912 | if (this._left.mode == 'side') {
|
---|
913 | left += this._left._getWidth();
|
---|
914 | }
|
---|
915 | else if (this._left.mode == 'push') {
|
---|
916 | var width = this._left._getWidth();
|
---|
917 | left += width;
|
---|
918 | right -= width;
|
---|
919 | }
|
---|
920 | }
|
---|
921 | if (this._right && this._right.opened) {
|
---|
922 | if (this._right.mode == 'side') {
|
---|
923 | right += this._right._getWidth();
|
---|
924 | }
|
---|
925 | else if (this._right.mode == 'push') {
|
---|
926 | var width = this._right._getWidth();
|
---|
927 | right += width;
|
---|
928 | left -= width;
|
---|
929 | }
|
---|
930 | }
|
---|
931 | // If either `right` or `left` is zero, don't set a style to the element. This
|
---|
932 | // allows users to specify a custom size via CSS class in SSR scenarios where the
|
---|
933 | // measured widths will always be zero. Note that we reset to `null` here, rather
|
---|
934 | // than below, in order to ensure that the types in the `if` below are consistent.
|
---|
935 | left = left || null;
|
---|
936 | right = right || null;
|
---|
937 | if (left !== this._contentMargins.left || right !== this._contentMargins.right) {
|
---|
938 | this._contentMargins = { left: left, right: right };
|
---|
939 | // Pull back into the NgZone since in some cases we could be outside. We need to be careful
|
---|
940 | // to do it only when something changed, otherwise we can end up hitting the zone too often.
|
---|
941 | this._ngZone.run(function () { return _this._contentMarginChanges.next(_this._contentMargins); });
|
---|
942 | }
|
---|
943 | };
|
---|
944 | MatDrawerContainer.prototype.ngDoCheck = function () {
|
---|
945 | var _this = this;
|
---|
946 | // If users opted into autosizing, do a check every change detection cycle.
|
---|
947 | if (this._autosize && this._isPushed()) {
|
---|
948 | // Run outside the NgZone, otherwise the debouncer will throw us into an infinite loop.
|
---|
949 | this._ngZone.runOutsideAngular(function () { return _this._doCheckSubject.next(); });
|
---|
950 | }
|
---|
951 | };
|
---|
952 | /**
|
---|
953 | * Subscribes to drawer events in order to set a class on the main container element when the
|
---|
954 | * drawer is open and the backdrop is visible. This ensures any overflow on the container element
|
---|
955 | * is properly hidden.
|
---|
956 | */
|
---|
957 | MatDrawerContainer.prototype._watchDrawerToggle = function (drawer) {
|
---|
958 | var _this = this;
|
---|
959 | drawer._animationStarted.pipe(operators.filter(function (event) { return event.fromState !== event.toState; }), operators.takeUntil(this._drawers.changes))
|
---|
960 | .subscribe(function (event) {
|
---|
961 | // Set the transition class on the container so that the animations occur. This should not
|
---|
962 | // be set initially because animations should only be triggered via a change in state.
|
---|
963 | if (event.toState !== 'open-instant' && _this._animationMode !== 'NoopAnimations') {
|
---|
964 | _this._element.nativeElement.classList.add('mat-drawer-transition');
|
---|
965 | }
|
---|
966 | _this.updateContentMargins();
|
---|
967 | _this._changeDetectorRef.markForCheck();
|
---|
968 | });
|
---|
969 | if (drawer.mode !== 'side') {
|
---|
970 | drawer.openedChange.pipe(operators.takeUntil(this._drawers.changes)).subscribe(function () { return _this._setContainerClass(drawer.opened); });
|
---|
971 | }
|
---|
972 | };
|
---|
973 | /**
|
---|
974 | * Subscribes to drawer onPositionChanged event in order to
|
---|
975 | * re-validate drawers when the position changes.
|
---|
976 | */
|
---|
977 | MatDrawerContainer.prototype._watchDrawerPosition = function (drawer) {
|
---|
978 | var _this = this;
|
---|
979 | if (!drawer) {
|
---|
980 | return;
|
---|
981 | }
|
---|
982 | // NOTE: We need to wait for the microtask queue to be empty before validating,
|
---|
983 | // since both drawers may be swapping positions at the same time.
|
---|
984 | drawer.onPositionChanged.pipe(operators.takeUntil(this._drawers.changes)).subscribe(function () {
|
---|
985 | _this._ngZone.onMicrotaskEmpty.pipe(operators.take(1)).subscribe(function () {
|
---|
986 | _this._validateDrawers();
|
---|
987 | });
|
---|
988 | });
|
---|
989 | };
|
---|
990 | /** Subscribes to changes in drawer mode so we can run change detection. */
|
---|
991 | MatDrawerContainer.prototype._watchDrawerMode = function (drawer) {
|
---|
992 | var _this = this;
|
---|
993 | if (drawer) {
|
---|
994 | drawer._modeChanged.pipe(operators.takeUntil(rxjs.merge(this._drawers.changes, this._destroyed)))
|
---|
995 | .subscribe(function () {
|
---|
996 | _this.updateContentMargins();
|
---|
997 | _this._changeDetectorRef.markForCheck();
|
---|
998 | });
|
---|
999 | }
|
---|
1000 | };
|
---|
1001 | /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */
|
---|
1002 | MatDrawerContainer.prototype._setContainerClass = function (isAdd) {
|
---|
1003 | var classList = this._element.nativeElement.classList;
|
---|
1004 | var className = 'mat-drawer-container-has-open';
|
---|
1005 | if (isAdd) {
|
---|
1006 | classList.add(className);
|
---|
1007 | }
|
---|
1008 | else {
|
---|
1009 | classList.remove(className);
|
---|
1010 | }
|
---|
1011 | };
|
---|
1012 | /** Validate the state of the drawer children components. */
|
---|
1013 | MatDrawerContainer.prototype._validateDrawers = function () {
|
---|
1014 | var _this = this;
|
---|
1015 | this._start = this._end = null;
|
---|
1016 | // Ensure that we have at most one start and one end drawer.
|
---|
1017 | this._drawers.forEach(function (drawer) {
|
---|
1018 | if (drawer.position == 'end') {
|
---|
1019 | if (_this._end != null && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
1020 | throwMatDuplicatedDrawerError('end');
|
---|
1021 | }
|
---|
1022 | _this._end = drawer;
|
---|
1023 | }
|
---|
1024 | else {
|
---|
1025 | if (_this._start != null && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
1026 | throwMatDuplicatedDrawerError('start');
|
---|
1027 | }
|
---|
1028 | _this._start = drawer;
|
---|
1029 | }
|
---|
1030 | });
|
---|
1031 | this._right = this._left = null;
|
---|
1032 | // Detect if we're LTR or RTL.
|
---|
1033 | if (this._dir && this._dir.value === 'rtl') {
|
---|
1034 | this._left = this._end;
|
---|
1035 | this._right = this._start;
|
---|
1036 | }
|
---|
1037 | else {
|
---|
1038 | this._left = this._start;
|
---|
1039 | this._right = this._end;
|
---|
1040 | }
|
---|
1041 | };
|
---|
1042 | /** Whether the container is being pushed to the side by one of the drawers. */
|
---|
1043 | MatDrawerContainer.prototype._isPushed = function () {
|
---|
1044 | return (this._isDrawerOpen(this._start) && this._start.mode != 'over') ||
|
---|
1045 | (this._isDrawerOpen(this._end) && this._end.mode != 'over');
|
---|
1046 | };
|
---|
1047 | MatDrawerContainer.prototype._onBackdropClicked = function () {
|
---|
1048 | this.backdropClick.emit();
|
---|
1049 | this._closeModalDrawersViaBackdrop();
|
---|
1050 | };
|
---|
1051 | MatDrawerContainer.prototype._closeModalDrawersViaBackdrop = function () {
|
---|
1052 | var _this = this;
|
---|
1053 | // Close all open drawers where closing is not disabled and the mode is not `side`.
|
---|
1054 | [this._start, this._end]
|
---|
1055 | .filter(function (drawer) { return drawer && !drawer.disableClose && _this._canHaveBackdrop(drawer); })
|
---|
1056 | .forEach(function (drawer) { return drawer._closeViaBackdropClick(); });
|
---|
1057 | };
|
---|
1058 | MatDrawerContainer.prototype._isShowingBackdrop = function () {
|
---|
1059 | return (this._isDrawerOpen(this._start) && this._canHaveBackdrop(this._start)) ||
|
---|
1060 | (this._isDrawerOpen(this._end) && this._canHaveBackdrop(this._end));
|
---|
1061 | };
|
---|
1062 | MatDrawerContainer.prototype._canHaveBackdrop = function (drawer) {
|
---|
1063 | return drawer.mode !== 'side' || !!this._backdropOverride;
|
---|
1064 | };
|
---|
1065 | MatDrawerContainer.prototype._isDrawerOpen = function (drawer) {
|
---|
1066 | return drawer != null && drawer.opened;
|
---|
1067 | };
|
---|
1068 | return MatDrawerContainer;
|
---|
1069 | }());
|
---|
1070 | MatDrawerContainer.decorators = [
|
---|
1071 | { type: core.Component, args: [{
|
---|
1072 | selector: 'mat-drawer-container',
|
---|
1073 | exportAs: 'matDrawerContainer',
|
---|
1074 | template: "<div class=\"mat-drawer-backdrop\" (click)=\"_onBackdropClicked()\" *ngIf=\"hasBackdrop\"\n [class.mat-drawer-shown]=\"_isShowingBackdrop()\"></div>\n\n<ng-content select=\"mat-drawer\"></ng-content>\n\n<ng-content select=\"mat-drawer-content\">\n</ng-content>\n<mat-drawer-content *ngIf=\"!_content\">\n <ng-content></ng-content>\n</mat-drawer-content>\n",
|
---|
1075 | host: {
|
---|
1076 | 'class': 'mat-drawer-container',
|
---|
1077 | '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
|
---|
1078 | },
|
---|
1079 | changeDetection: core.ChangeDetectionStrategy.OnPush,
|
---|
1080 | encapsulation: core.ViewEncapsulation.None,
|
---|
1081 | providers: [{
|
---|
1082 | provide: MAT_DRAWER_CONTAINER,
|
---|
1083 | useExisting: MatDrawerContainer
|
---|
1084 | }],
|
---|
1085 | styles: [".mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:400ms;transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:400ms;transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%, 0, 0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active [dir=rtl] .mat-drawer,.cdk-high-contrast-active .mat-drawer.mat-drawer-end{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%, 0, 0)}[dir=rtl] .mat-drawer{transform:translate3d(100%, 0, 0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%, 0, 0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}\n"]
|
---|
1086 | },] }
|
---|
1087 | ];
|
---|
1088 | MatDrawerContainer.ctorParameters = function () { return [
|
---|
1089 | { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
|
---|
1090 | { type: core.ElementRef },
|
---|
1091 | { type: core.NgZone },
|
---|
1092 | { type: core.ChangeDetectorRef },
|
---|
1093 | { type: scrolling.ViewportRuler },
|
---|
1094 | { type: undefined, decorators: [{ type: core.Inject, args: [MAT_DRAWER_DEFAULT_AUTOSIZE,] }] },
|
---|
1095 | { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations$1.ANIMATION_MODULE_TYPE,] }] }
|
---|
1096 | ]; };
|
---|
1097 | MatDrawerContainer.propDecorators = {
|
---|
1098 | _allDrawers: [{ type: core.ContentChildren, args: [MatDrawer, {
|
---|
1099 | // We need to use `descendants: true`, because Ivy will no longer match
|
---|
1100 | // indirect descendants if it's left as false.
|
---|
1101 | descendants: true
|
---|
1102 | },] }],
|
---|
1103 | _content: [{ type: core.ContentChild, args: [MatDrawerContent,] }],
|
---|
1104 | _userContent: [{ type: core.ViewChild, args: [MatDrawerContent,] }],
|
---|
1105 | autosize: [{ type: core.Input }],
|
---|
1106 | hasBackdrop: [{ type: core.Input }],
|
---|
1107 | backdropClick: [{ type: core.Output }]
|
---|
1108 | };
|
---|
1109 |
|
---|
1110 | var MatSidenavContent = /** @class */ (function (_super) {
|
---|
1111 | __extends(MatSidenavContent, _super);
|
---|
1112 | function MatSidenavContent(changeDetectorRef, container, elementRef, scrollDispatcher, ngZone) {
|
---|
1113 | return _super.call(this, changeDetectorRef, container, elementRef, scrollDispatcher, ngZone) || this;
|
---|
1114 | }
|
---|
1115 | return MatSidenavContent;
|
---|
1116 | }(MatDrawerContent));
|
---|
1117 | MatSidenavContent.decorators = [
|
---|
1118 | { type: core.Component, args: [{
|
---|
1119 | selector: 'mat-sidenav-content',
|
---|
1120 | template: '<ng-content></ng-content>',
|
---|
1121 | host: {
|
---|
1122 | 'class': 'mat-drawer-content mat-sidenav-content',
|
---|
1123 | '[style.margin-left.px]': '_container._contentMargins.left',
|
---|
1124 | '[style.margin-right.px]': '_container._contentMargins.right',
|
---|
1125 | },
|
---|
1126 | changeDetection: core.ChangeDetectionStrategy.OnPush,
|
---|
1127 | encapsulation: core.ViewEncapsulation.None
|
---|
1128 | },] }
|
---|
1129 | ];
|
---|
1130 | MatSidenavContent.ctorParameters = function () { return [
|
---|
1131 | { type: core.ChangeDetectorRef },
|
---|
1132 | { type: MatSidenavContainer, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatSidenavContainer; }),] }] },
|
---|
1133 | { type: core.ElementRef },
|
---|
1134 | { type: scrolling.ScrollDispatcher },
|
---|
1135 | { type: core.NgZone }
|
---|
1136 | ]; };
|
---|
1137 | var MatSidenav = /** @class */ (function (_super) {
|
---|
1138 | __extends(MatSidenav, _super);
|
---|
1139 | function MatSidenav() {
|
---|
1140 | var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
|
---|
1141 | _this._fixedInViewport = false;
|
---|
1142 | _this._fixedTopGap = 0;
|
---|
1143 | _this._fixedBottomGap = 0;
|
---|
1144 | return _this;
|
---|
1145 | }
|
---|
1146 | Object.defineProperty(MatSidenav.prototype, "fixedInViewport", {
|
---|
1147 | /** Whether the sidenav is fixed in the viewport. */
|
---|
1148 | get: function () { return this._fixedInViewport; },
|
---|
1149 | set: function (value) { this._fixedInViewport = coercion.coerceBooleanProperty(value); },
|
---|
1150 | enumerable: false,
|
---|
1151 | configurable: true
|
---|
1152 | });
|
---|
1153 | Object.defineProperty(MatSidenav.prototype, "fixedTopGap", {
|
---|
1154 | /**
|
---|
1155 | * The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed
|
---|
1156 | * mode.
|
---|
1157 | */
|
---|
1158 | get: function () { return this._fixedTopGap; },
|
---|
1159 | set: function (value) { this._fixedTopGap = coercion.coerceNumberProperty(value); },
|
---|
1160 | enumerable: false,
|
---|
1161 | configurable: true
|
---|
1162 | });
|
---|
1163 | Object.defineProperty(MatSidenav.prototype, "fixedBottomGap", {
|
---|
1164 | /**
|
---|
1165 | * The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in
|
---|
1166 | * fixed mode.
|
---|
1167 | */
|
---|
1168 | get: function () { return this._fixedBottomGap; },
|
---|
1169 | set: function (value) { this._fixedBottomGap = coercion.coerceNumberProperty(value); },
|
---|
1170 | enumerable: false,
|
---|
1171 | configurable: true
|
---|
1172 | });
|
---|
1173 | return MatSidenav;
|
---|
1174 | }(MatDrawer));
|
---|
1175 | MatSidenav.decorators = [
|
---|
1176 | { type: core.Component, args: [{
|
---|
1177 | selector: 'mat-sidenav',
|
---|
1178 | exportAs: 'matSidenav',
|
---|
1179 | template: "<div class=\"mat-drawer-inner-container\" cdkScrollable>\r\n <ng-content></ng-content>\r\n</div>\r\n",
|
---|
1180 | animations: [matDrawerAnimations.transformDrawer],
|
---|
1181 | host: {
|
---|
1182 | 'class': 'mat-drawer mat-sidenav',
|
---|
1183 | 'tabIndex': '-1',
|
---|
1184 | // must prevent the browser from aligning text based on value
|
---|
1185 | '[attr.align]': 'null',
|
---|
1186 | '[class.mat-drawer-end]': 'position === "end"',
|
---|
1187 | '[class.mat-drawer-over]': 'mode === "over"',
|
---|
1188 | '[class.mat-drawer-push]': 'mode === "push"',
|
---|
1189 | '[class.mat-drawer-side]': 'mode === "side"',
|
---|
1190 | '[class.mat-drawer-opened]': 'opened',
|
---|
1191 | '[class.mat-sidenav-fixed]': 'fixedInViewport',
|
---|
1192 | '[style.top.px]': 'fixedInViewport ? fixedTopGap : null',
|
---|
1193 | '[style.bottom.px]': 'fixedInViewport ? fixedBottomGap : null',
|
---|
1194 | },
|
---|
1195 | changeDetection: core.ChangeDetectionStrategy.OnPush,
|
---|
1196 | encapsulation: core.ViewEncapsulation.None
|
---|
1197 | },] }
|
---|
1198 | ];
|
---|
1199 | MatSidenav.propDecorators = {
|
---|
1200 | fixedInViewport: [{ type: core.Input }],
|
---|
1201 | fixedTopGap: [{ type: core.Input }],
|
---|
1202 | fixedBottomGap: [{ type: core.Input }]
|
---|
1203 | };
|
---|
1204 | var MatSidenavContainer = /** @class */ (function (_super) {
|
---|
1205 | __extends(MatSidenavContainer, _super);
|
---|
1206 | function MatSidenavContainer() {
|
---|
1207 | return _super !== null && _super.apply(this, arguments) || this;
|
---|
1208 | }
|
---|
1209 | return MatSidenavContainer;
|
---|
1210 | }(MatDrawerContainer));
|
---|
1211 | MatSidenavContainer.decorators = [
|
---|
1212 | { type: core.Component, args: [{
|
---|
1213 | selector: 'mat-sidenav-container',
|
---|
1214 | exportAs: 'matSidenavContainer',
|
---|
1215 | template: "<div class=\"mat-drawer-backdrop\" (click)=\"_onBackdropClicked()\" *ngIf=\"hasBackdrop\"\n [class.mat-drawer-shown]=\"_isShowingBackdrop()\"></div>\n\n<ng-content select=\"mat-sidenav\"></ng-content>\n\n<ng-content select=\"mat-sidenav-content\">\n</ng-content>\n<mat-sidenav-content *ngIf=\"!_content\" cdkScrollable>\n <ng-content></ng-content>\n</mat-sidenav-content>\n",
|
---|
1216 | host: {
|
---|
1217 | 'class': 'mat-drawer-container mat-sidenav-container',
|
---|
1218 | '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
|
---|
1219 | },
|
---|
1220 | changeDetection: core.ChangeDetectionStrategy.OnPush,
|
---|
1221 | encapsulation: core.ViewEncapsulation.None,
|
---|
1222 | providers: [{
|
---|
1223 | provide: MAT_DRAWER_CONTAINER,
|
---|
1224 | useExisting: MatSidenavContainer
|
---|
1225 | }],
|
---|
1226 | styles: [".mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:400ms;transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:400ms;transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%, 0, 0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active [dir=rtl] .mat-drawer,.cdk-high-contrast-active .mat-drawer.mat-drawer-end{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%, 0, 0)}[dir=rtl] .mat-drawer{transform:translate3d(100%, 0, 0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%, 0, 0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}\n"]
|
---|
1227 | },] }
|
---|
1228 | ];
|
---|
1229 | MatSidenavContainer.propDecorators = {
|
---|
1230 | _allDrawers: [{ type: core.ContentChildren, args: [MatSidenav, {
|
---|
1231 | // We need to use `descendants: true`, because Ivy will no longer match
|
---|
1232 | // indirect descendants if it's left as false.
|
---|
1233 | descendants: true
|
---|
1234 | },] }],
|
---|
1235 | _content: [{ type: core.ContentChild, args: [MatSidenavContent,] }]
|
---|
1236 | };
|
---|
1237 |
|
---|
1238 | /**
|
---|
1239 | * @license
|
---|
1240 | * Copyright Google LLC All Rights Reserved.
|
---|
1241 | *
|
---|
1242 | * Use of this source code is governed by an MIT-style license that can be
|
---|
1243 | * found in the LICENSE file at https://angular.io/license
|
---|
1244 | */
|
---|
1245 | var MatSidenavModule = /** @class */ (function () {
|
---|
1246 | function MatSidenavModule() {
|
---|
1247 | }
|
---|
1248 | return MatSidenavModule;
|
---|
1249 | }());
|
---|
1250 | MatSidenavModule.decorators = [
|
---|
1251 | { type: core.NgModule, args: [{
|
---|
1252 | imports: [
|
---|
1253 | common.CommonModule,
|
---|
1254 | core$1.MatCommonModule,
|
---|
1255 | platform.PlatformModule,
|
---|
1256 | scrolling.CdkScrollableModule,
|
---|
1257 | ],
|
---|
1258 | exports: [
|
---|
1259 | scrolling.CdkScrollableModule,
|
---|
1260 | core$1.MatCommonModule,
|
---|
1261 | MatDrawer,
|
---|
1262 | MatDrawerContainer,
|
---|
1263 | MatDrawerContent,
|
---|
1264 | MatSidenav,
|
---|
1265 | MatSidenavContainer,
|
---|
1266 | MatSidenavContent,
|
---|
1267 | ],
|
---|
1268 | declarations: [
|
---|
1269 | MatDrawer,
|
---|
1270 | MatDrawerContainer,
|
---|
1271 | MatDrawerContent,
|
---|
1272 | MatSidenav,
|
---|
1273 | MatSidenavContainer,
|
---|
1274 | MatSidenavContent,
|
---|
1275 | ],
|
---|
1276 | },] }
|
---|
1277 | ];
|
---|
1278 |
|
---|
1279 | /**
|
---|
1280 | * @license
|
---|
1281 | * Copyright Google LLC All Rights Reserved.
|
---|
1282 | *
|
---|
1283 | * Use of this source code is governed by an MIT-style license that can be
|
---|
1284 | * found in the LICENSE file at https://angular.io/license
|
---|
1285 | */
|
---|
1286 |
|
---|
1287 | /**
|
---|
1288 | * Generated bundle index. Do not edit.
|
---|
1289 | */
|
---|
1290 |
|
---|
1291 | exports.MAT_DRAWER_DEFAULT_AUTOSIZE = MAT_DRAWER_DEFAULT_AUTOSIZE;
|
---|
1292 | exports.MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY = MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY;
|
---|
1293 | exports.MatDrawer = MatDrawer;
|
---|
1294 | exports.MatDrawerContainer = MatDrawerContainer;
|
---|
1295 | exports.MatDrawerContent = MatDrawerContent;
|
---|
1296 | exports.MatSidenav = MatSidenav;
|
---|
1297 | exports.MatSidenavContainer = MatSidenavContainer;
|
---|
1298 | exports.MatSidenavContent = MatSidenavContent;
|
---|
1299 | exports.MatSidenavModule = MatSidenavModule;
|
---|
1300 | exports.matDrawerAnimations = matDrawerAnimations;
|
---|
1301 | exports.throwMatDuplicatedDrawerError = throwMatDuplicatedDrawerError;
|
---|
1302 | exports.ɵangular_material_src_material_sidenav_sidenav_a = MAT_DRAWER_CONTAINER;
|
---|
1303 |
|
---|
1304 | Object.defineProperty(exports, '__esModule', { value: true });
|
---|
1305 |
|
---|
1306 | })));
|
---|
1307 | //# sourceMappingURL=material-sidenav.umd.js.map
|
---|