@ngbracket/ngx-layout
Version:
ngbracket/ngx-layout =======
930 lines (923 loc) • 69.5 kB
JavaScript
import * as i1$1 from '@angular/cdk/bidi';
import { BidiModule } from '@angular/cdk/bidi';
import * as i0 from '@angular/core';
import { Injectable, Directive, Inject, Input, NgModule } from '@angular/core';
import * as i1 from '@ngbracket/ngx-layout/core';
import { StyleBuilder, BaseDirective2, ɵmultiply as _multiply, LAYOUT_CONFIG, validateBasis, CoreModule } from '@ngbracket/ngx-layout/core';
import { isFlowHorizontal, extendObject, LAYOUT_VALUES, buildLayoutCSS } from '@ngbracket/ngx-layout/_private-utils';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
class FlexAlignStyleBuilder extends StyleBuilder {
buildStyles(input) {
input = input || 'stretch';
const styles = {};
// Cross-axis
switch (input) {
case 'start':
styles['align-self'] = 'flex-start';
break;
case 'end':
styles['align-self'] = 'flex-end';
break;
default:
styles['align-self'] = input;
break;
}
return styles;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexAlignStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexAlignStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexAlignStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$6 = [
'fxFlexAlign',
'fxFlexAlign.xs',
'fxFlexAlign.sm',
'fxFlexAlign.md',
'fxFlexAlign.lg',
'fxFlexAlign.xl',
'fxFlexAlign.lt-sm',
'fxFlexAlign.lt-md',
'fxFlexAlign.lt-lg',
'fxFlexAlign.lt-xl',
'fxFlexAlign.gt-xs',
'fxFlexAlign.gt-sm',
'fxFlexAlign.gt-md',
'fxFlexAlign.gt-lg',
];
const selector$6 = `
[fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],
[fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],
[fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],
[fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]
`;
/**
* 'flex-align' flexbox styling directive
* Allows element-specific overrides for cross-axis alignments in a layout container
* @see https://css-tricks.com/almanac/properties/a/align-self/
*/
class FlexAlignDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.DIRECTIVE_KEY = 'flex-align';
this.inputs = inputs$6;
this.styleCache = flexAlignCache;
this.init();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexAlignDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: FlexAlignStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: FlexAlignDirective, isStandalone: true, selector: "\n [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],\n [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],\n [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],\n [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]\n", inputs: { fxFlexAlign: "fxFlexAlign", "fxFlexAlign.xs": "fxFlexAlign.xs", "fxFlexAlign.sm": "fxFlexAlign.sm", "fxFlexAlign.md": "fxFlexAlign.md", "fxFlexAlign.lg": "fxFlexAlign.lg", "fxFlexAlign.xl": "fxFlexAlign.xl", "fxFlexAlign.lt-sm": "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md": "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg": "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl": "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs": "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm": "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md": "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg": "fxFlexAlign.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexAlignDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$6, selector: selector$6 }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: FlexAlignStyleBuilder }, { type: i1.MediaMarshaller }] });
const flexAlignCache = new Map();
/**
* @deprecated The DefaultFlexAlignDirective will be removed in version 21.
* Use FlexAlignDirective directly instead.
*/
class DefaultFlexAlignDirective extends FlexAlignDirective {
constructor() {
super(...arguments);
this.inputs = inputs$6;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexAlignDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DefaultFlexAlignDirective, isStandalone: true, selector: "\n [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],\n [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],\n [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],\n [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]\n", inputs: { fxFlexAlign: "fxFlexAlign", "fxFlexAlign.xs": "fxFlexAlign.xs", "fxFlexAlign.sm": "fxFlexAlign.sm", "fxFlexAlign.md": "fxFlexAlign.md", "fxFlexAlign.lg": "fxFlexAlign.lg", "fxFlexAlign.xl": "fxFlexAlign.xl", "fxFlexAlign.lt-sm": "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md": "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg": "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl": "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs": "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm": "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md": "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg": "fxFlexAlign.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexAlignDirective, decorators: [{
type: Directive,
args: [{ selector: selector$6, inputs: inputs$6 }]
}] });
const FLEX_FILL_CSS = {
margin: 0,
width: '100%',
height: '100%',
'min-width': '100%',
'min-height': '100%',
};
class FlexFillStyleBuilder extends StyleBuilder {
buildStyles(_input) {
return FLEX_FILL_CSS;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexFillStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexFillStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexFillStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
/**
* 'fxFill' flexbox styling directive
* Maximizes width and height of element in a layout container
*
* NOTE: fxFill is NOT responsive API!!
*/
class FlexFillDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.styleCache = flexFillCache;
this.addStyles('');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexFillDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: FlexFillStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: FlexFillDirective, isStandalone: true, selector: "[fxFill], [fxFlexFill]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexFillDirective, decorators: [{
type: Directive,
args: [{
selector: `[fxFill], [fxFlexFill]`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: FlexFillStyleBuilder }, { type: i1.MediaMarshaller }] });
const flexFillCache = new Map();
class FlexOffsetStyleBuilder extends StyleBuilder {
constructor(_config) {
super();
this._config = _config;
}
buildStyles(offset, parent) {
offset ||= '0';
offset = _multiply(offset, this._config.multiplier);
const isPercent = String(offset).indexOf('%') > -1;
const isPx = String(offset).indexOf('px') > -1;
if (!isPx && !isPercent && !isNaN(+offset)) {
offset = `${offset}%`;
}
const horizontalLayoutKey = parent.isRtl ? 'margin-right' : 'margin-left';
const styles = isFlowHorizontal(parent.layout)
? { [horizontalLayoutKey]: offset }
: { 'margin-top': offset };
return styles;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOffsetStyleBuilder, deps: [{ token: LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOffsetStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOffsetStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }] });
const inputs$5 = [
'fxFlexOffset',
'fxFlexOffset.xs',
'fxFlexOffset.sm',
'fxFlexOffset.md',
'fxFlexOffset.lg',
'fxFlexOffset.xl',
'fxFlexOffset.lt-sm',
'fxFlexOffset.lt-md',
'fxFlexOffset.lt-lg',
'fxFlexOffset.lt-xl',
'fxFlexOffset.gt-xs',
'fxFlexOffset.gt-sm',
'fxFlexOffset.gt-md',
'fxFlexOffset.gt-lg',
];
const selector$5 = `
[fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],
[fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],
[fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],
[fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]
`;
/**
* 'flex-offset' flexbox styling directive
* Configures the 'margin-left' of the element in a layout container
*/
class FlexOffsetDirective extends BaseDirective2 {
constructor(elRef, directionality, styleBuilder, marshal, styler) {
super(elRef, styleBuilder, styler, marshal);
this.directionality = directionality;
this.DIRECTIVE_KEY = 'flex-offset';
this.inputs = inputs$5;
this.init([this.directionality.change]);
// Parent DOM `layout-gap` with affect the nested child with `flex-offset`
if (this.parentElement) {
this.marshal
.trackValue(this.parentElement, 'layout-gap')
.pipe(takeUntil(this.destroySubject))
.subscribe(this.triggerUpdate.bind(this));
}
}
// *********************************************
// Protected methods
// *********************************************
/**
* Using the current fxFlexOffset value, update the inline CSS
* NOTE: this will assign `margin-left` if the parent flex-direction == 'row',
* otherwise `margin-top` is used for the offset.
*/
updateWithValue(value = '') {
// The flex-direction of this element's flex container. Defaults to 'row'.
const layout = this.getFlexFlowDirection(this.parentElement, true);
const isRtl = this.directionality.value === 'rtl';
if (layout === 'row' && isRtl) {
this.styleCache = flexOffsetCacheRowRtl;
}
else if (layout === 'row' && !isRtl) {
this.styleCache = flexOffsetCacheRowLtr;
}
else if (layout === 'column' && isRtl) {
this.styleCache = flexOffsetCacheColumnRtl;
}
else if (layout === 'column' && !isRtl) {
this.styleCache = flexOffsetCacheColumnLtr;
}
this.addStyles(value + '', { layout, isRtl });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOffsetDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Directionality }, { token: FlexOffsetStyleBuilder }, { token: i1.MediaMarshaller }, { token: i1.StyleUtils }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: FlexOffsetDirective, isStandalone: true, selector: "\n [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],\n [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],\n [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],\n [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]\n", inputs: { fxFlexOffset: "fxFlexOffset", "fxFlexOffset.xs": "fxFlexOffset.xs", "fxFlexOffset.sm": "fxFlexOffset.sm", "fxFlexOffset.md": "fxFlexOffset.md", "fxFlexOffset.lg": "fxFlexOffset.lg", "fxFlexOffset.xl": "fxFlexOffset.xl", "fxFlexOffset.lt-sm": "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md": "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg": "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl": "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs": "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm": "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md": "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg": "fxFlexOffset.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOffsetDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$5, selector: selector$5 }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Directionality }, { type: FlexOffsetStyleBuilder }, { type: i1.MediaMarshaller }, { type: i1.StyleUtils }] });
/**
* @deprecated The DefaultFlexOffsetDirective will be removed in version 21.
* Use FlexOffsetDirective directly instead.
*/
class DefaultFlexOffsetDirective extends FlexOffsetDirective {
constructor() {
super(...arguments);
this.inputs = inputs$5;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexOffsetDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DefaultFlexOffsetDirective, isStandalone: true, selector: "\n [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],\n [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],\n [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],\n [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]\n", inputs: { fxFlexOffset: "fxFlexOffset", "fxFlexOffset.xs": "fxFlexOffset.xs", "fxFlexOffset.sm": "fxFlexOffset.sm", "fxFlexOffset.md": "fxFlexOffset.md", "fxFlexOffset.lg": "fxFlexOffset.lg", "fxFlexOffset.xl": "fxFlexOffset.xl", "fxFlexOffset.lt-sm": "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md": "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg": "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl": "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs": "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm": "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md": "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg": "fxFlexOffset.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexOffsetDirective, decorators: [{
type: Directive,
args: [{ selector: selector$5, inputs: inputs$5 }]
}] });
const flexOffsetCacheRowRtl = new Map();
const flexOffsetCacheColumnRtl = new Map();
const flexOffsetCacheRowLtr = new Map();
const flexOffsetCacheColumnLtr = new Map();
class FlexOrderStyleBuilder extends StyleBuilder {
buildStyles(value) {
return { order: (value && parseInt(value, 10)) || '' };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOrderStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOrderStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOrderStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$4 = [
'fxFlexOrder',
'fxFlexOrder.xs',
'fxFlexOrder.sm',
'fxFlexOrder.md',
'fxFlexOrder.lg',
'fxFlexOrder.xl',
'fxFlexOrder.lt-sm',
'fxFlexOrder.lt-md',
'fxFlexOrder.lt-lg',
'fxFlexOrder.lt-xl',
'fxFlexOrder.gt-xs',
'fxFlexOrder.gt-sm',
'fxFlexOrder.gt-md',
'fxFlexOrder.gt-lg',
];
const selector$4 = `
[fxFlexOrder], [fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md],
[fxFlexOrder.lg], [fxFlexOrder.xl], [fxFlexOrder.lt-sm], [fxFlexOrder.lt-md],
[fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl], [fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm],
[fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]
`;
/**
* 'flex-order' flexbox styling directive
* Configures the positional ordering of the element in a sorted layout container
* @see https://css-tricks.com/almanac/properties/o/order/
*/
class FlexOrderDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.DIRECTIVE_KEY = 'flex-order';
this.inputs = inputs$4;
this.styleCache = flexOrderCache;
this.init();
}
updateWithValue(input) {
super.updateWithValue(input);
if (this.parentElement) {
this.marshal.triggerUpdate(this.parentElement, 'layout-gap');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOrderDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: FlexOrderStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: FlexOrderDirective, isStandalone: true, selector: "\n [fxFlexOrder], [fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md],\n [fxFlexOrder.lg], [fxFlexOrder.xl], [fxFlexOrder.lt-sm], [fxFlexOrder.lt-md],\n [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl], [fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm],\n [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]\n", inputs: { fxFlexOrder: "fxFlexOrder", "fxFlexOrder.xs": "fxFlexOrder.xs", "fxFlexOrder.sm": "fxFlexOrder.sm", "fxFlexOrder.md": "fxFlexOrder.md", "fxFlexOrder.lg": "fxFlexOrder.lg", "fxFlexOrder.xl": "fxFlexOrder.xl", "fxFlexOrder.lt-sm": "fxFlexOrder.lt-sm", "fxFlexOrder.lt-md": "fxFlexOrder.lt-md", "fxFlexOrder.lt-lg": "fxFlexOrder.lt-lg", "fxFlexOrder.lt-xl": "fxFlexOrder.lt-xl", "fxFlexOrder.gt-xs": "fxFlexOrder.gt-xs", "fxFlexOrder.gt-sm": "fxFlexOrder.gt-sm", "fxFlexOrder.gt-md": "fxFlexOrder.gt-md", "fxFlexOrder.gt-lg": "fxFlexOrder.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexOrderDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$4, selector: selector$4 }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: FlexOrderStyleBuilder }, { type: i1.MediaMarshaller }] });
const flexOrderCache = new Map();
/**
* @deprecated The DefaultFlexOrderDirective will be removed in version 21.
* Use FlexOrderDirective directly instead.
*/
class DefaultFlexOrderDirective extends FlexOrderDirective {
constructor() {
super(...arguments);
this.inputs = inputs$4;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexOrderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DefaultFlexOrderDirective, isStandalone: true, selector: "\n [fxFlexOrder], [fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md],\n [fxFlexOrder.lg], [fxFlexOrder.xl], [fxFlexOrder.lt-sm], [fxFlexOrder.lt-md],\n [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl], [fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm],\n [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]\n", inputs: { fxFlexOrder: "fxFlexOrder", "fxFlexOrder.xs": "fxFlexOrder.xs", "fxFlexOrder.sm": "fxFlexOrder.sm", "fxFlexOrder.md": "fxFlexOrder.md", "fxFlexOrder.lg": "fxFlexOrder.lg", "fxFlexOrder.xl": "fxFlexOrder.xl", "fxFlexOrder.lt-sm": "fxFlexOrder.lt-sm", "fxFlexOrder.lt-md": "fxFlexOrder.lt-md", "fxFlexOrder.lt-lg": "fxFlexOrder.lt-lg", "fxFlexOrder.lt-xl": "fxFlexOrder.lt-xl", "fxFlexOrder.gt-xs": "fxFlexOrder.gt-xs", "fxFlexOrder.gt-sm": "fxFlexOrder.gt-sm", "fxFlexOrder.gt-md": "fxFlexOrder.gt-md", "fxFlexOrder.gt-lg": "fxFlexOrder.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexOrderDirective, decorators: [{
type: Directive,
args: [{ selector: selector$4, inputs: inputs$4 }]
}] });
class FlexStyleBuilder extends StyleBuilder {
constructor(layoutConfig) {
super();
this.layoutConfig = layoutConfig;
}
buildStyles(input, parent) {
let [grow, shrink, ...basisParts] = input.split(' ');
let basis = basisParts.join(' ');
// The flex-direction of this element's flex container. Defaults to 'row'.
const direction = parent.direction.indexOf('column') > -1 ? 'column' : 'row';
const max = isFlowHorizontal(direction) ? 'max-width' : 'max-height';
const min = isFlowHorizontal(direction) ? 'min-width' : 'min-height';
const hasCalc = String(basis).indexOf('calc') > -1;
const usingCalc = hasCalc || basis === 'auto';
const isPercent = String(basis).indexOf('%') > -1 && !hasCalc;
const hasUnits = String(basis).indexOf('px') > -1 ||
String(basis).indexOf('rem') > -1 ||
String(basis).indexOf('em') > -1 ||
String(basis).indexOf('vw') > -1 ||
String(basis).indexOf('vh') > -1;
let isValue = hasCalc || hasUnits;
grow = grow == '0' ? 0 : grow;
shrink = shrink == '0' ? 0 : shrink;
// make box inflexible when shrink and grow are both zero
// should not set a min when the grow is zero
// should not set a max when the shrink is zero
const isFixed = !grow && !shrink;
let css = {};
// flex-basis allows you to specify the initial/starting main-axis size of the element,
// before anything else is computed. It can either be a percentage or an absolute value.
// It is, however, not the breaking point for flex-grow/shrink properties
//
// flex-grow can be seen as this:
// 0: Do not stretch. Either size to element's content width, or obey 'flex-basis'.
// 1: (Default value). Stretch; will be the same size to all other flex items on
// the same row since they have a default value of 1.
// ≥2 (integer n): Stretch. Will be n times the size of other elements
// with 'flex-grow: 1' on the same row.
// Use `null` to clear existing styles.
const clearStyles = {
'max-width': null,
'max-height': null,
'min-width': null,
'min-height': null,
};
switch (basis || '') {
case '':
const useColumnBasisZero = this.layoutConfig.useColumnBasisZero !== false;
basis =
direction === 'row'
? '0%'
: useColumnBasisZero
? '0.000000001px'
: 'auto';
break;
case 'initial': // default
case 'nogrow':
grow = 0;
basis = 'auto';
break;
case 'grow':
basis = '100%';
break;
case 'noshrink':
shrink = 0;
basis = 'auto';
break;
case 'auto':
break;
case 'none':
grow = 0;
shrink = 0;
basis = 'auto';
break;
default:
// Defaults to percentage sizing unless `px` is explicitly set
if (!isValue && !isPercent && !isNaN(basis)) {
basis = basis + '%';
}
// Fix for issue 280
if (basis === '0%') {
isValue = true;
}
if (basis === '0px') {
basis = '0%';
}
// fix issue #5345
if (hasCalc) {
css = extendObject(clearStyles, {
'flex-grow': grow,
'flex-shrink': shrink,
'flex-basis': isValue ? basis : '100%',
});
}
else {
css = extendObject(clearStyles, {
flex: `${grow} ${shrink} ${isValue ? basis : '100%'}`,
});
}
break;
}
if (!(css['flex'] || css['flex-grow'])) {
if (hasCalc) {
css = extendObject(clearStyles, {
'flex-grow': grow,
'flex-shrink': shrink,
'flex-basis': basis,
});
}
else {
css = extendObject(clearStyles, {
flex: `${grow} ${shrink} ${basis}`,
});
}
}
// Fix for issues 277, 534, and 728
if (basis !== '0%' &&
basis !== '0px' &&
basis !== '0.000000001px' &&
basis !== 'auto') {
css[min] = isFixed || (isValue && grow) ? basis : null;
css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
}
// Fix for issue 528
if (!css[min] && !css[max]) {
if (hasCalc) {
css = extendObject(clearStyles, {
'flex-grow': grow,
'flex-shrink': shrink,
'flex-basis': basis,
});
}
else {
css = extendObject(clearStyles, {
flex: `${grow} ${shrink} ${basis}`,
});
}
}
else {
// Fix for issue 660
if (parent.hasWrap) {
css[hasCalc ? 'flex-basis' : 'flex'] = css[max]
? hasCalc
? css[max]
: `${grow} ${shrink} ${css[max]}`
: hasCalc
? css[min]
: `${grow} ${shrink} ${css[min]}`;
}
}
return extendObject(css, { 'box-sizing': 'border-box' });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexStyleBuilder, deps: [{ token: LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }] });
const inputs$3 = [
'fxFlex',
'fxFlex.xs',
'fxFlex.sm',
'fxFlex.md',
'fxFlex.lg',
'fxFlex.xl',
'fxFlex.lt-sm',
'fxFlex.lt-md',
'fxFlex.lt-lg',
'fxFlex.lt-xl',
'fxFlex.gt-xs',
'fxFlex.gt-sm',
'fxFlex.gt-md',
'fxFlex.gt-lg',
];
const selector$3 = `
[fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],
[fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],
[fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],
[fxFlex.gt-md], [fxFlex.gt-lg]
`;
/**
* Directive to control the size of a flex item using flex-basis, flex-grow, and flex-shrink.
* Corresponds to the css `flex` shorthand property.
*
* @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
class FlexDirective extends BaseDirective2 {
get shrink() {
return this.flexShrink;
}
set shrink(value) {
this.flexShrink = value || '1';
this.triggerReflow();
}
get grow() {
return this.flexGrow;
}
set grow(value) {
this.flexGrow = value || '1';
this.triggerReflow();
}
constructor(elRef, styleUtils, layoutConfig, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.layoutConfig = layoutConfig;
this.marshal = marshal;
this.DIRECTIVE_KEY = 'flex';
this.inputs = inputs$3;
this.direction = undefined;
this.wrap = undefined;
this.flexGrow = '1';
this.flexShrink = '1';
this.init();
}
ngOnInit() {
if (this.parentElement) {
this.marshal
.trackValue(this.parentElement, 'layout')
.pipe(takeUntil(this.destroySubject))
.subscribe(this.onLayoutChange.bind(this));
this.marshal
.trackValue(this.nativeElement, 'layout-align')
.pipe(takeUntil(this.destroySubject))
.subscribe(this.triggerReflow.bind(this));
}
}
/**
* Caches the parent container's 'flex-direction' and updates the element's style.
* Used as a handler for layout change events from the parent flex container.
*/
onLayoutChange(matcher) {
const layout = matcher.value;
const layoutParts = layout.split(' ');
this.direction = layoutParts[0];
this.wrap = layoutParts[1] !== undefined && layoutParts[1] === 'wrap';
this.triggerUpdate();
}
/** Input to this is exclusively the basis input value */
updateWithValue(value) {
const addFlexToParent = this.layoutConfig.addFlexToParent !== false;
if (this.direction === undefined) {
this.direction = this.getFlexFlowDirection(this.parentElement, addFlexToParent);
}
if (this.wrap === undefined) {
this.wrap = this.hasWrap(this.parentElement);
}
const direction = this.direction;
const isHorizontal = direction.startsWith('row');
const hasWrap = this.wrap;
if (isHorizontal && hasWrap) {
this.styleCache = flexRowWrapCache;
}
else if (isHorizontal && !hasWrap) {
this.styleCache = flexRowCache;
}
else if (!isHorizontal && hasWrap) {
this.styleCache = flexColumnWrapCache;
}
else if (!isHorizontal && !hasWrap) {
this.styleCache = flexColumnCache;
}
const basis = String(value).replace(';', '');
const parts = validateBasis(basis, this.flexGrow, this.flexShrink);
this.addStyles(parts.join(' '), { direction, hasWrap });
}
/** Trigger a style reflow, usually based on a shrink/grow input event */
triggerReflow() {
const activatedValue = this.activatedValue;
if (activatedValue !== undefined) {
const parts = validateBasis(activatedValue + '', this.flexGrow, this.flexShrink);
this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' '));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: LAYOUT_CONFIG }, { token: FlexStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: FlexDirective, isStandalone: true, selector: "\n [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],\n [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],\n [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],\n [fxFlex.gt-md], [fxFlex.gt-lg]\n", inputs: { fxFlex: "fxFlex", "fxFlex.xs": "fxFlex.xs", "fxFlex.sm": "fxFlex.sm", "fxFlex.md": "fxFlex.md", "fxFlex.lg": "fxFlex.lg", "fxFlex.xl": "fxFlex.xl", "fxFlex.lt-sm": "fxFlex.lt-sm", "fxFlex.lt-md": "fxFlex.lt-md", "fxFlex.lt-lg": "fxFlex.lt-lg", "fxFlex.lt-xl": "fxFlex.lt-xl", "fxFlex.gt-xs": "fxFlex.gt-xs", "fxFlex.gt-sm": "fxFlex.gt-sm", "fxFlex.gt-md": "fxFlex.gt-md", "fxFlex.gt-lg": "fxFlex.gt-lg", shrink: ["fxShrink", "shrink"], grow: ["fxGrow", "grow"] }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FlexDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$3, selector: selector$3 }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }, { type: FlexStyleBuilder }, { type: i1.MediaMarshaller }], propDecorators: { shrink: [{
type: Input,
args: ['fxShrink']
}], grow: [{
type: Input,
args: ['fxGrow']
}] } });
/**
* @deprecated The DefaultFlexDirective will be removed in version 21.
* Use FlexDirective directly instead.
*/
class DefaultFlexDirective extends FlexDirective {
constructor() {
super(...arguments);
this.inputs = inputs$3;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DefaultFlexDirective, isStandalone: true, selector: "\n [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],\n [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],\n [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],\n [fxFlex.gt-md], [fxFlex.gt-lg]\n", inputs: { fxFlex: "fxFlex", "fxFlex.xs": "fxFlex.xs", "fxFlex.sm": "fxFlex.sm", "fxFlex.md": "fxFlex.md", "fxFlex.lg": "fxFlex.lg", "fxFlex.xl": "fxFlex.xl", "fxFlex.lt-sm": "fxFlex.lt-sm", "fxFlex.lt-md": "fxFlex.lt-md", "fxFlex.lt-lg": "fxFlex.lt-lg", "fxFlex.lt-xl": "fxFlex.lt-xl", "fxFlex.gt-xs": "fxFlex.gt-xs", "fxFlex.gt-sm": "fxFlex.gt-sm", "fxFlex.gt-md": "fxFlex.gt-md", "fxFlex.gt-lg": "fxFlex.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultFlexDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$3, selector: selector$3 }]
}] });
const flexRowCache = new Map();
const flexColumnCache = new Map();
const flexRowWrapCache = new Map();
const flexColumnWrapCache = new Map();
class LayoutAlignStyleBuilder extends StyleBuilder {
buildStyles(align, parent) {
const css = {}, [mainAxis, crossAxis] = align.split(' ');
// Main axis
switch (mainAxis) {
case 'center':
css['justify-content'] = 'center';
break;
case 'space-around':
css['justify-content'] = 'space-around';
break;
case 'space-between':
css['justify-content'] = 'space-between';
break;
case 'space-evenly':
css['justify-content'] = 'space-evenly';
break;
case 'end':
case 'flex-end':
css['justify-content'] = 'flex-end';
break;
case 'start':
case 'flex-start':
default: // default main axis
css['justify-content'] = 'flex-start';
break;
}
// Cross-axis
switch (crossAxis) {
case 'start':
case 'flex-start':
css['align-items'] = css['align-content'] = 'flex-start';
break;
case 'center':
css['align-items'] = css['align-content'] = 'center';
break;
case 'end':
case 'flex-end':
css['align-items'] = css['align-content'] = 'flex-end';
break;
case 'space-between':
css['align-content'] = 'space-between';
css['align-items'] = 'stretch';
break;
case 'space-around':
css['align-content'] = 'space-around';
css['align-items'] = 'stretch';
break;
case 'baseline':
css['align-content'] = 'stretch';
css['align-items'] = 'baseline';
break;
case 'stretch':
default: // 'stretch'
// default cross axis
css['align-items'] = css['align-content'] = 'stretch';
break;
}
return extendObject(css, {
display: parent.inline ? 'inline-flex' : 'flex',
'flex-direction': parent.layout,
'box-sizing': 'border-box',
'max-width': crossAxis === 'stretch'
? !isFlowHorizontal(parent.layout)
? '100%'
: null
: null,
'max-height': crossAxis === 'stretch'
? isFlowHorizontal(parent.layout)
? '100%'
: null
: null,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutAlignStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutAlignStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutAlignStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$2 = [
'fxLayoutAlign',
'fxLayoutAlign.xs',
'fxLayoutAlign.sm',
'fxLayoutAlign.md',
'fxLayoutAlign.lg',
'fxLayoutAlign.xl',
'fxLayoutAlign.lt-sm',
'fxLayoutAlign.lt-md',
'fxLayoutAlign.lt-lg',
'fxLayoutAlign.lt-xl',
'fxLayoutAlign.gt-xs',
'fxLayoutAlign.gt-sm',
'fxLayoutAlign.gt-md',
'fxLayoutAlign.gt-lg',
];
const selector$2 = `
[fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],
[fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],
[fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],
[fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]
`;
/**
* 'layout-align' flexbox styling directive
* Defines positioning of child elements along main and cross axis in a layout container
* Optional values: {main-axis} values or {main-axis cross-axis} value pairs
*
* @see https://css-tricks.com/almanac/properties/j/justify-content/
* @see https://css-tricks.com/almanac/properties/a/align-items/
* @see https://css-tricks.com/almanac/properties/a/align-content/
*/
class LayoutAlignDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.DIRECTIVE_KEY = 'layout-align';
this.inputs = inputs$2;
this.layout = 'row'; // default flex-direction
this.inline = false; // default inline value
this.init();
this.marshal
.trackValue(this.nativeElement, 'layout')
.pipe(takeUntil(this.destroySubject))
.subscribe(this.onLayoutChange.bind(this));
}
// *********************************************
// Protected methods
// *********************************************
/**
*
*/
updateWithValue(value) {
const layout = this.layout || 'row';
const inline = this.inline;
if (layout === 'row' && inline) {
this.styleCache = layoutAlignHorizontalInlineCache;
}
else if (layout === 'row' && !inline) {
this.styleCache = layoutAlignHorizontalCache;
}
else if (layout === 'row-reverse' && inline) {
this.styleCache = layoutAlignHorizontalRevInlineCache;
}
else if (layout === 'row-reverse' && !inline) {
this.styleCache = layoutAlignHorizontalRevCache;
}
else if (layout === 'column' && inline) {
this.styleCache = layoutAlignVerticalInlineCache;
}
else if (layout === 'column' && !inline) {
this.styleCache = layoutAlignVerticalCache;
}
else if (layout === 'column-reverse' && inline) {
this.styleCache = layoutAlignVerticalRevInlineCache;
}
else if (layout === 'column-reverse' && !inline) {
this.styleCache = layoutAlignVerticalRevCache;
}
this.addStyles(value, { layout, inline });
}
/**
* Cache the parent container 'flex-direction' and update the 'flex' styles
*/
onLayoutChange(matcher) {
const layoutKeys = matcher.value.split(' ');
this.layout = layoutKeys[0];
this.inline = matcher.value.includes('inline');
if (!LAYOUT_VALUES.find((x) => x === this.layout)) {
this.layout = 'row';
}
this.triggerUpdate();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutAlignDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: LayoutAlignStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: LayoutAlignDirective, isStandalone: true, selector: "\n [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],\n [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]\n", inputs: { fxLayoutAlign: "fxLayoutAlign", "fxLayoutAlign.xs": "fxLayoutAlign.xs", "fxLayoutAlign.sm": "fxLayoutAlign.sm", "fxLayoutAlign.md": "fxLayoutAlign.md", "fxLayoutAlign.lg": "fxLayoutAlign.lg", "fxLayoutAlign.xl": "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm": "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md": "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg": "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl": "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs": "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm": "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md": "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg": "fxLayoutAlign.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutAlignDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$2, selector: selector$2 }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: LayoutAlignStyleBuilder }, { type: i1.MediaMarshaller }] });
/**
* @deprecated The DefaultLayoutAlignDirective will be removed in version 21.
* Use LayoutAlignDirective directly instead.
*/
class DefaultLayoutAlignDirective extends LayoutAlignDirective {
constructor() {
super(...arguments);
this.inputs = inputs$2;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultLayoutAlignDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: DefaultLayoutAlignDirective, isStandalone: true, selector: "\n [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],\n [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],\n [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]\n", inputs: { fxLayoutAlign: "fxLayoutAlign", "fxLayoutAlign.xs": "fxLayoutAlign.xs", "fxLayoutAlign.sm": "fxLayoutAlign.sm", "fxLayoutAlign.md": "fxLayoutAlign.md", "fxLayoutAlign.lg": "fxLayoutAlign.lg", "fxLayoutAlign.xl": "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm": "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md": "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg": "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl": "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs": "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm": "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md": "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg": "fxLayoutAlign.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DefaultLayoutAlignDirective, decorators: [{
type: Directive,
args: [{ selector: selector$2, inputs: inputs$2 }]
}] });
const layoutAlignHorizontalCache = new Map();
const layoutAlignVerticalCache = new Map();
const layoutAlignHorizontalRevCache = new Map();
const layoutAlignVerticalRevCache = new Map();
const layoutAlignHorizontalInlineCache = new Map();
const layoutAlignVerticalInlineCache = new Map();
const layoutAlignHorizontalRevInlineCache = new Map();
const layoutAlignVerticalRevInlineCache = new Map();
/* eslint-disable prefer-const */
const CLEAR_MARGIN_CSS = {
'margin-left': null,
'margin-right': null,
'margin-top': null,
'margin-bottom': null,
};
class LayoutGapStyleBuilder extends StyleBuilder {
constructor(_styler, _config) {
super();
this._styler = _styler;
this._config = _config;
}
buildStyles(gapValue, parent) {
if (gapValue.endsWith(GRID_SPECIFIER)) {
gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER));
gapValue = _multiply(gapValue, this._config.multiplier);
// Add the margin to the host element
return buildGridMargin(gapValue, parent.directionality);
}
else {
return {};
}
}
sideEffect(gapValue, _styles, parent) {
const items = parent.items;
if (gapValue.endsWith(GRID_SPECIFIER)) {
gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER));
gapValue = _multiply(gapValue, this._config.multiplier);
// For each `element` children, set the padding
const paddingStyles = buildGridPadding(gapValue, parent.directionality);
this._styler.applyStyleToElements(paddingStyles, parent.items);
}
else {
gapValue = _multiply(gapValue, this._config.multiplier);
gapValue = this.addFallbackUnit(gapValue);
const lastItem = items.pop();
// For each `element` children EXCEPT the last,
// set the margin right/bottom styles...
const gapCss = buildGapCSS(gapValue, parent);
this._styler.applyStyleToElements(gapCss, items);
// Clear all gaps for all visible elements
this._styler.applyStyleToElements(CLEAR_MARGIN_CSS, [lastItem]);
}
}
addFallbackUnit(value) {
return !isNaN(+value) ? `${value}${this._config.defaultUnit}` : value;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutGapStyleBuilder, deps: [{ token: i1.StyleUtils }, { token: LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutGapStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LayoutGapStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: i1.StyleUtils }, { type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }] });
const inputs$1 = [
'fxLayoutGap',
'fxLayoutGap.xs',
'fxLayoutGap.sm',
'fxLayoutGap.md',
'fxLayoutGap.lg',
'fxLayoutGap.xl',
'fxLayoutGap.lt-sm',
'fxLayoutGap.lt-md',
'fxLayoutGap.lt-lg',
'fxLayoutGap.lt-xl',
'fxLayoutGap.gt-xs',
'fxLayoutGap.gt-sm',
'fxLayoutGap.gt-md',
'fxLayoutGap.gt-lg',
];
const selector$1 = `
[fxLayoutGap],