@angular/flex-layout
Version:
Angular Flex-Layout
1,508 lines (1,475 loc) • 304 kB
JavaScript
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/coercion'), require('@angular/platform-browser'), require('@angular/cdk/bidi')) :
typeof define === 'function' && define.amd ? define('@angular/flex-layout', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/cdk/coercion', '@angular/platform-browser', '@angular/cdk/bidi'], factory) :
(factory((global.ng = global.ng || {}, global.ng.flexLayout = {}),global.ng.core,global.ng.common,global.rxjs,global.rxjs.operators,global.ng.cdk.coercion,global.ng.platformBrowser,global.ng.cdk.bidi));
}(this, (function (exports,core,common,rxjs,operators,coercion,platformBrowser,bidi) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
/**
* @fileoverview added by tsickle
* Generated from: core/browser-provider.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Find all of the server-generated stylings, if any, and remove them
* This will be in the form of inline classes and the style block in the
* head of the DOM
* @param {?} _document
* @param {?} platformId
* @return {?}
*/
function removeStyles(_document, platformId) {
return (/**
* @return {?}
*/
function () {
if (common.isPlatformBrowser(platformId)) {
/** @type {?} */
var elements = Array.from(_document.querySelectorAll("[class*=" + CLASS_NAME + "]"));
// RegExp constructor should only be used if passing a variable to the constructor.
// When using static regular expression it is more performant to use reg exp literal.
// This is also needed to provide Safari 9 compatibility, please see
// https://stackoverflow.com/questions/37919802 for more discussion.
/** @type {?} */
var classRegex_1 = /\bflex-layout-.+?\b/g;
elements.forEach((/**
* @param {?} el
* @return {?}
*/
function (el) {
el.classList.contains(CLASS_NAME + "ssr") && el.parentNode ?
el.parentNode.removeChild(el) : el.className.replace(classRegex_1, '');
}));
}
});
}
/**
* Provider to remove SSR styles on the browser
* @type {?}
*/
var BROWSER_PROVIDER = {
provide: (/** @type {?} */ (core.APP_BOOTSTRAP_LISTENER)),
useFactory: removeStyles,
deps: [common.DOCUMENT, core.PLATFORM_ID],
multi: true
};
/** @type {?} */
var CLASS_NAME = 'flex-layout-';
/**
* @fileoverview added by tsickle
* Generated from: core/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* *****************************************************************
* Define module for common Angular Layout utilities
* *****************************************************************
*/
var CoreModule = /** @class */ (function () {
function CoreModule() {
}
CoreModule.decorators = [
{ type: core.NgModule, args: [{
providers: [BROWSER_PROVIDER]
},] },
];
return CoreModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: core/media-change.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Class instances emitted [to observers] for each mql notification
*/
var /**
* Class instances emitted [to observers] for each mql notification
*/
MediaChange = /** @class */ (function () {
/**
* @param matches whether the mediaQuery is currently activated
* @param mediaQuery e.g. (min-width: 600px) and (max-width: 959px)
* @param mqAlias e.g. gt-sm, md, gt-lg
* @param suffix e.g. GtSM, Md, GtLg
* @param priority the priority of activation for the given breakpoint
*/
function MediaChange(matches, mediaQuery, mqAlias, suffix, priority) {
if (matches === void 0) { matches = false; }
if (mediaQuery === void 0) { mediaQuery = 'all'; }
if (mqAlias === void 0) { mqAlias = ''; }
if (suffix === void 0) { suffix = ''; }
if (priority === void 0) { priority = 0; }
this.matches = matches;
this.mediaQuery = mediaQuery;
this.mqAlias = mqAlias;
this.suffix = suffix;
this.priority = priority;
this.property = '';
}
/** Create an exact copy of the MediaChange */
/**
* Create an exact copy of the MediaChange
* @return {?}
*/
MediaChange.prototype.clone = /**
* Create an exact copy of the MediaChange
* @return {?}
*/
function () {
return new MediaChange(this.matches, this.mediaQuery, this.mqAlias, this.suffix);
};
return MediaChange;
}());
/**
* @fileoverview added by tsickle
* Generated from: core/stylesheet-map/stylesheet-map.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Utility to emulate a CSS stylesheet
*
* This utility class stores all of the styles for a given HTML element
* as a readonly `stylesheet` map.
*/
var StylesheetMap = /** @class */ (function () {
function StylesheetMap() {
this.stylesheet = new Map();
}
/**
* Add an individual style to an HTML element
*/
/**
* Add an individual style to an HTML element
* @param {?} element
* @param {?} style
* @param {?} value
* @return {?}
*/
StylesheetMap.prototype.addStyleToElement = /**
* Add an individual style to an HTML element
* @param {?} element
* @param {?} style
* @param {?} value
* @return {?}
*/
function (element, style, value) {
/** @type {?} */
var stylesheet = this.stylesheet.get(element);
if (stylesheet) {
stylesheet.set(style, value);
}
else {
this.stylesheet.set(element, new Map([[style, value]]));
}
};
/**
* Clear the virtual stylesheet
*/
/**
* Clear the virtual stylesheet
* @return {?}
*/
StylesheetMap.prototype.clearStyles = /**
* Clear the virtual stylesheet
* @return {?}
*/
function () {
this.stylesheet.clear();
};
/**
* Retrieve a given style for an HTML element
*/
/**
* Retrieve a given style for an HTML element
* @param {?} el
* @param {?} styleName
* @return {?}
*/
StylesheetMap.prototype.getStyleForElement = /**
* Retrieve a given style for an HTML element
* @param {?} el
* @param {?} styleName
* @return {?}
*/
function (el, styleName) {
/** @type {?} */
var styles = this.stylesheet.get(el);
/** @type {?} */
var value = '';
if (styles) {
/** @type {?} */
var style = styles.get(styleName);
if (typeof style === 'number' || typeof style === 'string') {
value = style + '';
}
}
return value;
};
StylesheetMap.decorators = [
{ type: core.Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ StylesheetMap.ɵprov = core.ɵɵdefineInjectable({ factory: function StylesheetMap_Factory() { return new StylesheetMap(); }, token: StylesheetMap, providedIn: "root" });
return StylesheetMap;
}());
/**
* @fileoverview added by tsickle
* Generated from: core/stylesheet-map/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: core/tokens/library-config.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DEFAULT_CONFIG = {
addFlexToParent: true,
addOrientationBps: false,
disableDefaultBps: false,
disableVendorPrefixes: false,
serverLoaded: false,
useColumnBasisZero: true,
printWithBreakpoints: [],
mediaTriggerAutoRestore: true,
ssrObserveBreakpoints: [],
};
/** @type {?} */
var LAYOUT_CONFIG = new core.InjectionToken('Flex Layout token, config options for the library', {
providedIn: 'root',
factory: (/**
* @return {?}
*/
function () { return DEFAULT_CONFIG; })
});
/**
* @fileoverview added by tsickle
* Generated from: core/tokens/server-token.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Token that is provided to tell whether the FlexLayoutServerModule
* has been included in the bundle
*
* NOTE: This can be manually provided to disable styles when using SSR
* @type {?}
*/
var SERVER_TOKEN = new core.InjectionToken('FlexLayoutServerLoaded', {
providedIn: 'root',
factory: (/**
* @return {?}
*/
function () { return false; })
});
/**
* @fileoverview added by tsickle
* Generated from: core/tokens/breakpoint-token.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var BREAKPOINT = new core.InjectionToken('Flex Layout token, collect all breakpoints into one provider', {
providedIn: 'root',
factory: (/**
* @return {?}
*/
function () { return null; })
});
/**
* @fileoverview added by tsickle
* Generated from: core/tokens/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: core/add-alias.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* For the specified MediaChange, make sure it contains the breakpoint alias
* and suffix (if available).
* @param {?} dest
* @param {?} source
* @return {?}
*/
function mergeAlias(dest, source) {
dest = dest ? dest.clone() : new MediaChange();
if (source) {
dest.mqAlias = source.alias;
dest.mediaQuery = source.mediaQuery;
dest.suffix = (/** @type {?} */ (source.suffix));
dest.priority = (/** @type {?} */ (source.priority));
}
return dest;
}
/**
* @fileoverview added by tsickle
* Generated from: utils/layout-validator.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
* @type {?}
*/
var INLINE = 'inline';
/** @type {?} */
var LAYOUT_VALUES = ['row', 'column', 'row-reverse', 'column-reverse'];
/**
* Validate the direction|'direction wrap' value and then update the host's inline flexbox styles
* @param {?} value
* @return {?}
*/
function buildLayoutCSS(value) {
var _a = validateValue(value), direction = _a[0], wrap = _a[1], isInline = _a[2];
return buildCSS(direction, wrap, isInline);
}
/**
* Validate the value to be one of the acceptable value options
* Use default fallback of 'row'
* @param {?} value
* @return {?}
*/
function validateValue(value) {
value = value ? value.toLowerCase() : '';
var _a = value.split(' '), direction = _a[0], wrap = _a[1], inline = _a[2];
// First value must be the `flex-direction`
if (!LAYOUT_VALUES.find((/**
* @param {?} x
* @return {?}
*/
function (x) { return x === direction; }))) {
direction = LAYOUT_VALUES[0];
}
if (wrap === INLINE) {
wrap = (inline !== INLINE) ? inline : '';
inline = INLINE;
}
return [direction, validateWrapValue(wrap), !!inline];
}
/**
* Convert layout-wrap='<value>' to expected flex-wrap style
* @param {?} value
* @return {?}
*/
function validateWrapValue(value) {
if (!!value) {
switch (value.toLowerCase()) {
case 'reverse':
case 'wrap-reverse':
case 'reverse-wrap':
value = 'wrap-reverse';
break;
case 'no':
case 'none':
case 'nowrap':
value = 'nowrap';
break;
// All other values fallback to 'wrap'
default:
value = 'wrap';
break;
}
}
return value;
}
/**
* Build the CSS that should be assigned to the element instance
* BUG:
* 1) min-height on a column flex container won’t apply to its flex item children in IE 10-11.
* Use height instead if possible; height : <xxx>vh;
*
* This way any padding or border specified on the child elements are
* laid out and drawn inside that element's specified width and height.
* @param {?} direction
* @param {?=} wrap
* @param {?=} inline
* @return {?}
*/
function buildCSS(direction, wrap, inline) {
if (wrap === void 0) { wrap = null; }
if (inline === void 0) { inline = false; }
return {
'display': inline ? 'inline-flex' : 'flex',
'box-sizing': 'border-box',
'flex-direction': direction,
'flex-wrap': !!wrap ? wrap : null
};
}
/**
* @fileoverview added by tsickle
* Generated from: core/base/base2.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @abstract
*/
var /**
* @abstract
*/
BaseDirective2 = /** @class */ (function () {
function BaseDirective2(elementRef, styleBuilder, styler, marshal) {
this.elementRef = elementRef;
this.styleBuilder = styleBuilder;
this.styler = styler;
this.marshal = marshal;
this.DIRECTIVE_KEY = '';
this.inputs = [];
/**
* The most recently used styles for the builder
*/
this.mru = {};
this.destroySubject = new rxjs.Subject();
/**
* Cache map for style computation
*/
this.styleCache = new Map();
}
Object.defineProperty(BaseDirective2.prototype, "parentElement", {
/** Access to host element's parent DOM node */
get: /**
* Access to host element's parent DOM node
* @protected
* @return {?}
*/
function () {
return this.elementRef.nativeElement.parentElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseDirective2.prototype, "nativeElement", {
/** Access to the HTMLElement for the directive */
get: /**
* Access to the HTMLElement for the directive
* @protected
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseDirective2.prototype, "activatedValue", {
/** Access to the activated value for the directive */
get: /**
* Access to the activated value for the directive
* @return {?}
*/
function () {
return this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY);
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.marshal.setValue(this.nativeElement, this.DIRECTIVE_KEY, value, this.marshal.activatedAlias);
},
enumerable: true,
configurable: true
});
/** For @Input changes */
/**
* For \@Input changes
* @param {?} changes
* @return {?}
*/
BaseDirective2.prototype.ngOnChanges = /**
* For \@Input changes
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
Object.keys(changes).forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (_this.inputs.indexOf(key) !== -1) {
/** @type {?} */
var bp = key.split('.').slice(1).join('.');
/** @type {?} */
var val = changes[key].currentValue;
_this.setValue(val, bp);
}
}));
};
/**
* @return {?}
*/
BaseDirective2.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroySubject.next();
this.destroySubject.complete();
this.marshal.releaseElement(this.nativeElement);
};
/** Register with central marshaller service */
/**
* Register with central marshaller service
* @protected
* @param {?=} extraTriggers
* @return {?}
*/
BaseDirective2.prototype.init = /**
* Register with central marshaller service
* @protected
* @param {?=} extraTriggers
* @return {?}
*/
function (extraTriggers) {
if (extraTriggers === void 0) { extraTriggers = []; }
this.marshal.init(this.elementRef.nativeElement, this.DIRECTIVE_KEY, this.updateWithValue.bind(this), this.clearStyles.bind(this), extraTriggers);
};
/** Add styles to the element using predefined style builder */
/**
* Add styles to the element using predefined style builder
* @protected
* @param {?} input
* @param {?=} parent
* @return {?}
*/
BaseDirective2.prototype.addStyles = /**
* Add styles to the element using predefined style builder
* @protected
* @param {?} input
* @param {?=} parent
* @return {?}
*/
function (input, parent) {
/** @type {?} */
var builder = this.styleBuilder;
/** @type {?} */
var useCache = builder.shouldCache;
/** @type {?} */
var genStyles = this.styleCache.get(input);
if (!genStyles || !useCache) {
genStyles = builder.buildStyles(input, parent);
if (useCache) {
this.styleCache.set(input, genStyles);
}
}
this.mru = __assign({}, genStyles);
this.applyStyleToElement(genStyles);
builder.sideEffect(input, genStyles, parent);
};
/** Remove generated styles from an element using predefined style builder */
/**
* Remove generated styles from an element using predefined style builder
* @protected
* @return {?}
*/
BaseDirective2.prototype.clearStyles = /**
* Remove generated styles from an element using predefined style builder
* @protected
* @return {?}
*/
function () {
var _this = this;
Object.keys(this.mru).forEach((/**
* @param {?} k
* @return {?}
*/
function (k) {
_this.mru[k] = '';
}));
this.applyStyleToElement(this.mru);
this.mru = {};
};
/** Force trigger style updates on DOM element */
/**
* Force trigger style updates on DOM element
* @protected
* @return {?}
*/
BaseDirective2.prototype.triggerUpdate = /**
* Force trigger style updates on DOM element
* @protected
* @return {?}
*/
function () {
this.marshal.triggerUpdate(this.nativeElement, this.DIRECTIVE_KEY);
};
/**
* Determine the DOM element's Flexbox flow (flex-direction).
*
* Check inline style first then check computed (stylesheet) style.
* And optionally add the flow value to element's inline style.
*/
/**
* Determine the DOM element's Flexbox flow (flex-direction).
*
* Check inline style first then check computed (stylesheet) style.
* And optionally add the flow value to element's inline style.
* @protected
* @param {?} target
* @param {?=} addIfMissing
* @return {?}
*/
BaseDirective2.prototype.getFlexFlowDirection = /**
* Determine the DOM element's Flexbox flow (flex-direction).
*
* Check inline style first then check computed (stylesheet) style.
* And optionally add the flow value to element's inline style.
* @protected
* @param {?} target
* @param {?=} addIfMissing
* @return {?}
*/
function (target, addIfMissing) {
if (addIfMissing === void 0) { addIfMissing = false; }
if (target) {
var _a = this.styler.getFlowDirection(target), value = _a[0], hasInlineValue = _a[1];
if (!hasInlineValue && addIfMissing) {
/** @type {?} */
var style = buildLayoutCSS(value);
/** @type {?} */
var elements = [target];
this.styler.applyStyleToElements(style, elements);
}
return value.trim();
}
return 'row';
};
/** Applies styles given via string pair or object map to the directive element */
/**
* Applies styles given via string pair or object map to the directive element
* @protected
* @param {?} style
* @param {?=} value
* @param {?=} element
* @return {?}
*/
BaseDirective2.prototype.applyStyleToElement = /**
* Applies styles given via string pair or object map to the directive element
* @protected
* @param {?} style
* @param {?=} value
* @param {?=} element
* @return {?}
*/
function (style, value, element) {
if (element === void 0) { element = this.nativeElement; }
this.styler.applyStyleToElement(element, style, value);
};
/**
* @protected
* @param {?} val
* @param {?} bp
* @return {?}
*/
BaseDirective2.prototype.setValue = /**
* @protected
* @param {?} val
* @param {?} bp
* @return {?}
*/
function (val, bp) {
this.marshal.setValue(this.nativeElement, this.DIRECTIVE_KEY, val, bp);
};
/**
* @protected
* @param {?} input
* @return {?}
*/
BaseDirective2.prototype.updateWithValue = /**
* @protected
* @param {?} input
* @return {?}
*/
function (input) {
this.addStyles(input);
};
return BaseDirective2;
}());
/**
* @fileoverview added by tsickle
* Generated from: core/base/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: core/breakpoints/data/break-points.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* NOTE: Smaller ranges have HIGHER priority since the match is more specific
* @type {?}
*/
var DEFAULT_BREAKPOINTS = [
{
alias: 'xs',
mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.9px)',
priority: 1000,
},
{
alias: 'sm',
mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.9px)',
priority: 900,
},
{
alias: 'md',
mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.9px)',
priority: 800,
},
{
alias: 'lg',
mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.9px)',
priority: 700,
},
{
alias: 'xl',
mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.9px)',
priority: 600,
},
{
alias: 'lt-sm',
overlapping: true,
mediaQuery: 'screen and (max-width: 599.9px)',
priority: 950,
},
{
alias: 'lt-md',
overlapping: true,
mediaQuery: 'screen and (max-width: 959.9px)',
priority: 850,
},
{
alias: 'lt-lg',
overlapping: true,
mediaQuery: 'screen and (max-width: 1279.9px)',
priority: 750,
},
{
alias: 'lt-xl',
overlapping: true,
priority: 650,
mediaQuery: 'screen and (max-width: 1919.9px)',
},
{
alias: 'gt-xs',
overlapping: true,
mediaQuery: 'screen and (min-width: 600px)',
priority: -950,
},
{
alias: 'gt-sm',
overlapping: true,
mediaQuery: 'screen and (min-width: 960px)',
priority: -850,
}, {
alias: 'gt-md',
overlapping: true,
mediaQuery: 'screen and (min-width: 1280px)',
priority: -750,
},
{
alias: 'gt-lg',
overlapping: true,
mediaQuery: 'screen and (min-width: 1920px)',
priority: -650,
}
];
/**
* @fileoverview added by tsickle
* Generated from: core/breakpoints/data/orientation-break-points.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/* tslint:disable */
/** @type {?} */
var HANDSET_PORTRAIT = '(orientation: portrait) and (max-width: 599.9px)';
/** @type {?} */
var HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959.9px)';
/** @type {?} */
var TABLET_PORTRAIT = '(orientation: portrait) and (min-width: 600px) and (max-width: 839.9px)';
/** @type {?} */
var TABLET_LANDSCAPE = '(orientation: landscape) and (min-width: 960px) and (max-width: 1279.9px)';
/** @type {?} */
var WEB_PORTRAIT = '(orientation: portrait) and (min-width: 840px)';
/** @type {?} */
var WEB_LANDSCAPE = '(orientation: landscape) and (min-width: 1280px)';
/** @type {?} */
var ScreenTypes = {
'HANDSET': HANDSET_PORTRAIT + ", " + HANDSET_LANDSCAPE,
'TABLET': TABLET_PORTRAIT + " , " + TABLET_LANDSCAPE,
'WEB': WEB_PORTRAIT + ", " + WEB_LANDSCAPE + " ",
'HANDSET_PORTRAIT': "" + HANDSET_PORTRAIT,
'TABLET_PORTRAIT': TABLET_PORTRAIT + " ",
'WEB_PORTRAIT': "" + WEB_PORTRAIT,
'HANDSET_LANDSCAPE': HANDSET_LANDSCAPE + "]",
'TABLET_LANDSCAPE': "" + TABLET_LANDSCAPE,
'WEB_LANDSCAPE': "" + WEB_LANDSCAPE
};
/**
* Extended Breakpoints for handset/tablets with landscape or portrait orientations
* @type {?}
*/
var ORIENTATION_BREAKPOINTS = [
{ 'alias': 'handset', priority: 2000, 'mediaQuery': ScreenTypes.HANDSET },
{ 'alias': 'handset.landscape', priority: 2000, 'mediaQuery': ScreenTypes.HANDSET_LANDSCAPE },
{ 'alias': 'handset.portrait', priority: 2000, 'mediaQuery': ScreenTypes.HANDSET_PORTRAIT },
{ 'alias': 'tablet', priority: 2100, 'mediaQuery': ScreenTypes.TABLET },
{ 'alias': 'tablet.landscape', priority: 2100, 'mediaQuery': ScreenTypes.TABLET },
{ 'alias': 'tablet.portrait', priority: 2100, 'mediaQuery': ScreenTypes.TABLET_PORTRAIT },
{ 'alias': 'web', priority: 2200, 'mediaQuery': ScreenTypes.WEB, overlapping: true },
{ 'alias': 'web.landscape', priority: 2200, 'mediaQuery': ScreenTypes.WEB_LANDSCAPE, overlapping: true },
{ 'alias': 'web.portrait', priority: 2200, 'mediaQuery': ScreenTypes.WEB_PORTRAIT, overlapping: true }
];
/**
* @fileoverview added by tsickle
* Generated from: core/breakpoints/break-point.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: utils/object-extend.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Extends an object with the *enumerable* and *own* properties of one or more source objects,
* similar to Object.assign.
*
* @param {?} dest The object which will have properties copied to it.
* @param {...?} sources The source objects from which properties will be copied.
* @return {?}
*/
function extendObject(dest) {
var sources = [];
for (var _i = 1; _i < arguments.length; _i++) {
sources[_i - 1] = arguments[_i];
}
if (dest == null) {
throw TypeError('Cannot convert undefined or null to object');
}
for (var _a = 0, sources_1 = sources; _a < sources_1.length; _a++) {
var source = sources_1[_a];
if (source != null) {
for (var key in source) {
if (source.hasOwnProperty(key)) {
dest[key] = source[key];
}
}
}
}
return dest;
}
/**
* @fileoverview added by tsickle
* Generated from: core/breakpoints/breakpoint-tools.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var ALIAS_DELIMITERS = /(\.|-|_)/g;
/**
* @param {?} part
* @return {?}
*/
function firstUpperCase(part) {
/** @type {?} */
var first = part.length > 0 ? part.charAt(0) : '';
/** @type {?} */
var remainder = (part.length > 1) ? part.slice(1) : '';
return first.toUpperCase() + remainder;
}
/**
* Converts snake-case to SnakeCase.
* @param {?} name Text to UpperCamelCase
* @return {?}
*/
function camelCase(name) {
return name
.replace(ALIAS_DELIMITERS, '|')
.split('|')
.map(firstUpperCase)
.join('');
}
/**
* For each breakpoint, ensure that a Suffix is defined;
* fallback to UpperCamelCase the unique Alias value
* @param {?} list
* @return {?}
*/
function validateSuffixes(list) {
list.forEach((/**
* @param {?} bp
* @return {?}
*/
function (bp) {
if (!bp.suffix) {
bp.suffix = camelCase(bp.alias); // create Suffix value based on alias
bp.overlapping = !!bp.overlapping; // ensure default value
}
}));
return list;
}
/**
* Merge a custom breakpoint list with the default list based on unique alias values
* - Items are added if the alias is not in the default list
* - Items are merged with the custom override if the alias exists in the default list
* @param {?} defaults
* @param {?=} custom
* @return {?}
*/
function mergeByAlias(defaults, custom) {
if (custom === void 0) { custom = []; }
/** @type {?} */
var dict = {};
defaults.forEach((/**
* @param {?} bp
* @return {?}
*/
function (bp) {
dict[bp.alias] = bp;
}));
// Merge custom breakpoints
custom.forEach((/**
* @param {?} bp
* @return {?}
*/
function (bp) {
if (dict[bp.alias]) {
extendObject(dict[bp.alias], bp);
}
else {
dict[bp.alias] = bp;
}
}));
return validateSuffixes(Object.keys(dict).map((/**
* @param {?} k
* @return {?}
*/
function (k) { return dict[k]; })));
}
/**
* @fileoverview added by tsickle
* Generated from: core/breakpoints/break-points-token.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token unique to the flex-layout library.
* Use this token when build a custom provider (see below).
* @type {?}
*/
var BREAKPOINTS = new core.InjectionToken('Token (@angular/flex-layout) Breakpoints', {
providedIn: 'root',
factory: (/**
* @return {?}
*/
function () {
/** @type {?} */
var breakpoints = core.inject(BREAKPOINT);
/** @type {?} */
var layoutConfig = core.inject(LAYOUT_CONFIG);
/** @type {?} */
var bpFlattenArray = [].concat.apply([], (breakpoints || [])
.map((/**
* @param {?} v
* @return {?}
*/
function (v) { return Array.isArray(v) ? v : [v]; })));
/** @type {?} */
var builtIns = (layoutConfig.disableDefaultBps ? [] : DEFAULT_BREAKPOINTS)
.concat(layoutConfig.addOrientationBps ? ORIENTATION_BREAKPOINTS : []);
return mergeByAlias(builtIns, bpFlattenArray);
})
});
/**
* @fileoverview added by tsickle
* Generated from: core/utils/sort.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* HOF to sort the breakpoints by descending priority
* @template T
* @param {?} a
* @param {?} b
* @return {?}
*/
function sortDescendingPriority(a, b) {
/** @type {?} */
var priorityA = a ? a.priority || 0 : 0;
/** @type {?} */
var priorityB = b ? b.priority || 0 : 0;
return priorityB - priorityA;
}
/**
* HOF to sort the breakpoints by ascending priority
* @template T
* @param {?} a
* @param {?} b
* @return {?}
*/
function sortAscendingPriority(a, b) {
/** @type {?} */
var pA = a.priority || 0;
/** @type {?} */
var pB = b.priority || 0;
return pA - pB;
}
/**
* @fileoverview added by tsickle
* Generated from: core/breakpoints/break-point-registry.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Registry of 1..n MediaQuery breakpoint ranges
* This is published as a provider and may be overridden from custom, application-specific ranges
*
*/
var BreakPointRegistry = /** @class */ (function () {
function BreakPointRegistry(list) {
/**
* Memoized BreakPoint Lookups
*/
this.findByMap = new Map();
this.items = __spreadArrays(list).sort(sortAscendingPriority);
}
/**
* Search breakpoints by alias (e.g. gt-xs)
*/
/**
* Search breakpoints by alias (e.g. gt-xs)
* @param {?} alias
* @return {?}
*/
BreakPointRegistry.prototype.findByAlias = /**
* Search breakpoints by alias (e.g. gt-xs)
* @param {?} alias
* @return {?}
*/
function (alias) {
return !alias ? null : this.findWithPredicate(alias, (/**
* @param {?} bp
* @return {?}
*/
function (bp) { return bp.alias == alias; }));
};
/**
* @param {?} query
* @return {?}
*/
BreakPointRegistry.prototype.findByQuery = /**
* @param {?} query
* @return {?}
*/
function (query) {
return this.findWithPredicate(query, (/**
* @param {?} bp
* @return {?}
*/
function (bp) { return bp.mediaQuery == query; }));
};
Object.defineProperty(BreakPointRegistry.prototype, "overlappings", {
/**
* Get all the breakpoints whose ranges could overlapping `normal` ranges;
* e.g. gt-sm overlaps md, lg, and xl
*/
get: /**
* Get all the breakpoints whose ranges could overlapping `normal` ranges;
* e.g. gt-sm overlaps md, lg, and xl
* @return {?}
*/
function () {
return this.items.filter((/**
* @param {?} it
* @return {?}
*/
function (it) { return it.overlapping == true; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(BreakPointRegistry.prototype, "aliases", {
/**
* Get list of all registered (non-empty) breakpoint aliases
*/
get: /**
* Get list of all registered (non-empty) breakpoint aliases
* @return {?}
*/
function () {
return this.items.map((/**
* @param {?} it
* @return {?}
*/
function (it) { return it.alias; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(BreakPointRegistry.prototype, "suffixes", {
/**
* Aliases are mapped to properties using suffixes
* e.g. 'gt-sm' for property 'layout' uses suffix 'GtSm'
* for property layoutGtSM.
*/
get: /**
* Aliases are mapped to properties using suffixes
* e.g. 'gt-sm' for property 'layout' uses suffix 'GtSm'
* for property layoutGtSM.
* @return {?}
*/
function () {
return this.items.map((/**
* @param {?} it
* @return {?}
*/
function (it) { return !!it.suffix ? it.suffix : ''; }));
},
enumerable: true,
configurable: true
});
/**
* Memoized lookup using custom predicate function
*/
/**
* Memoized lookup using custom predicate function
* @private
* @param {?} key
* @param {?} searchFn
* @return {?}
*/
BreakPointRegistry.prototype.findWithPredicate = /**
* Memoized lookup using custom predicate function
* @private
* @param {?} key
* @param {?} searchFn
* @return {?}
*/
function (key, searchFn) {
/** @type {?} */
var response = this.findByMap.get(key);
if (!response) {
response = this.items.find(searchFn) || null;
this.findByMap.set(key, response);
}
return response || null;
};
BreakPointRegistry.decorators = [
{ type: core.Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
BreakPointRegistry.ctorParameters = function () { return [
{ type: Array, decorators: [{ type: core.Inject, args: [BREAKPOINTS,] }] }
]; };
/** @nocollapse */ BreakPointRegistry.ɵprov = core.ɵɵdefineInjectable({ factory: function BreakPointRegistry_Factory() { return new BreakPointRegistry(core.ɵɵinject(BREAKPOINTS)); }, token: BreakPointRegistry, providedIn: "root" });
return BreakPointRegistry;
}());
/**
* @fileoverview added by tsickle
* Generated from: core/breakpoints/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: core/match-media/match-media.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* MediaMonitor configures listeners to mediaQuery changes and publishes an Observable facade to
* convert mediaQuery change callbacks to subscriber notifications. These notifications will be
* performed within the ng Zone to trigger change detections and component updates.
*
* NOTE: both mediaQuery activations and de-activations are announced in notifications
*/
var MatchMedia = /** @class */ (function () {
function MatchMedia(_zone, _platformId, _document) {
this._zone = _zone;
this._platformId = _platformId;
this._document = _document;
/**
* Initialize source with 'all' so all non-responsive APIs trigger style updates
*/
this.source = new rxjs.BehaviorSubject(new MediaChange(true));
this.registry = new Map();
this._observable$ = this.source.asObservable();
}
Object.defineProperty(MatchMedia.prototype, "activations", {
/**
* Publish list of all current activations
*/
get: /**
* Publish list of all current activations
* @return {?}
*/
function () {
/** @type {?} */
var results = [];
this.registry.forEach((/**
* @param {?} mql
* @param {?} key
* @return {?}
*/
function (mql, key) {
if (mql.matches) {
results.push(key);
}
}));
return results;
},
enumerable: true,
configurable: true
});
/**
* For the specified mediaQuery?
*/
/**
* For the specified mediaQuery?
* @param {?} mediaQuery
* @return {?}
*/
MatchMedia.prototype.isActive = /**
* For the specified mediaQuery?
* @param {?} mediaQuery
* @return {?}
*/
function (mediaQuery) {
/** @type {?} */
var mql = this.registry.get(mediaQuery);
return !!mql ? mql.matches : false;
};
/**
* External observers can watch for all (or a specific) mql changes.
* Typically used by the MediaQueryAdaptor; optionally available to components
* who wish to use the MediaMonitor as mediaMonitor$ observable service.
*
* Use deferred registration process to register breakpoints only on subscription
* This logic also enforces logic to register all mediaQueries BEFORE notify
* subscribers of notifications.
*/
/**
* External observers can watch for all (or a specific) mql changes.
* Typically used by the MediaQueryAdaptor; optionally available to components
* who wish to use the MediaMonitor as mediaMonitor$ observable service.
*
* Use deferred registration process to register breakpoints only on subscription
* This logic also enforces logic to register all mediaQueries BEFORE notify
* subscribers of notifications.
* @param {?=} mqList
* @param {?=} filterOthers
* @return {?}
*/
MatchMedia.prototype.observe = /**
* External observers can watch for all (or a specific) mql changes.
* Typically used by the MediaQueryAdaptor; optionally available to components
* who wish to use the MediaMonitor as mediaMonitor$ observable service.
*
* Use deferred registration process to register breakpoints only on subscription
* This logic also enforces logic to register all mediaQueries BEFORE notify
* subscribers of notifications.
* @param {?=} mqList
* @param {?=} filterOthers
* @return {?}
*/
function (mqList, filterOthers) {
var _this = this;
if (filterOthers === void 0) { filterOthers = false; }
if (mqList && mqList.length) {
/** @type {?} */
var matchMedia$ = this._observable$.pipe(operators.filter((/**
* @param {?} change
* @return {?}
*/
function (change) {
return !filterOthers ? true : (mqList.indexOf(change.mediaQuery) > -1);
})));
/** @type {?} */
var registration$ = new rxjs.Observable((/**
* @param {?} observer
* @return {?}
*/
function (observer) {
// tslint:disable-line:max-line-length
/** @type {?} */
var matches = _this.registerQuery(mqList);
if (matches.length) {
/** @type {?} */
var lastChange = (/** @type {?} */ (matches.pop()));
matches.forEach((/**
* @param {?} e
* @return {?}
*/
function (e) {
observer.next(e);
}));
_this.source.next(lastChange); // last match is cached
}
observer.complete();
}));
return rxjs.merge(registration$, matchMedia$);
}
return this._observable$;
};
/**
* Based on the BreakPointRegistry provider, register internal listeners for each unique
* mediaQuery. Each listener emits specific MediaChange data to observers
*/
/**
* Based on the BreakPointRegistry provider, register internal listeners for each unique
* mediaQuery. Each listener emits specific MediaChange data to observers
* @param {?} mediaQuery
* @return {?}
*/
MatchMedia.prototype.registerQuery = /**
* Based on the BreakPointRegistry provider, register internal listeners for each unique
* mediaQuery. Each listener emits specific MediaChange data to observers
* @param {?} mediaQuery
* @return {?}
*/
function (mediaQuery) {
var _this = this;
/** @type {?} */
var list = Array.isArray(mediaQuery) ? mediaQuery : [mediaQuery];
/** @type {?} */
var matches = [];
buildQueryCss(list, this._document);
list.forEach((/**
* @param {?} query
* @return {?}
*/
function (query) {
/** @type {?} */
var onMQLEvent = (/**
* @param {?} e
* @return {?}
*/
function (e) {
_this._zone.run((/**
* @return {?}
*/
function () { return _this.source.next(new MediaChange(e.matches, query)); }));
});
/** @type {?} */
var mql = _this.registry.get(query);
if (!mql) {
mql = _this.buildMQL(query);
mql.addListener(onMQLEvent);
_this.registry.set(query, mql);
}
if (mql.matches) {
matches.push(new MediaChange(true, query));
}
}));
return matches;
};
/**
* Call window.matchMedia() to build a MediaQueryList; which
* supports 0..n listeners for activation/deactivation
*/
/**
* Call window.matchMedia() to build a MediaQueryList; which
* supports 0..n listeners for activation/deactivation
* @protected
* @param {?} query
* @return {?}
*/
MatchMedia.prototype.buildMQL = /**
* Call window.matchMedia() to build a MediaQueryList; which
* supports 0..n listeners for activation/deactivation
* @protected
* @param {?} query
* @return {?}
*/
function (query) {
return constructMql(query, common.isPlatformBrowser(this._platformId));
};
MatchMedia.decorators = [
{ type: core.Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
MatchMedia.ctorParameters = function () { return [
{ type: core.NgZone },
{ type: Object, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
]; };
/** @nocollapse */ MatchMedia.ɵprov = core.ɵɵdefineInjectable({ factory: function MatchMedia_Factory() { return new MatchMedia(core.ɵɵinject(core.NgZone), core.ɵɵinject(core.PLATFORM_ID), core.ɵɵinject(common.DOCUMENT)); }, token: MatchMedia, providedIn: "root" });
return MatchMedia;
}());
/**
* Private global registry for all dynamically-created, injected style tags
* @see prepare(query)
* @type {?}
*/
var ALL_STYLES = {};
/**
* For Webkit engines that only trigger the MediaQueryList Listener
* when there is at least one CSS selector for the respective media query.
*
* @param {?} mediaQueries
* @param {?} _document
* @return {?}
*/
function buildQueryCss(mediaQueries, _document) {
/** @type {?} */
var list = mediaQueries.filter((/**
* @param {?} it
* @return {?}
*/
function (it) { return !ALL_STYLES[it]; }));
if (list.length > 0) {
/** @type {?} */
var query = list.join(', ');
try {
/** @type {?} */
var styleEl_1 = _document.createElement('style');
styleEl_1.setAttribute('type', 'text/css');
if (!((/** @type {?} */ (styleEl_1))).styleSheet) {
/** @type {?} */
var cssText = "\n/*\n @angular/flex-layout - workaround for possible browser quirk with mediaQuery listeners\n see http://bit.ly/2sd4HMP\n*/\n@media " + query + " {.fx-query-test{ }}\n";
styleEl_1.appendChild(_document.createTextNode(cssText));
}
(/** @type {?} */ (_document.head)).appendChild(styleEl_1);
// Store in private global registry
list.forEach((/**