ri-flex-layout
Version:
An alternative library to Angular's deprecated [angular-flex-layout](https://github.com/angular/flex-layout) library. `ri-flex-layout` helps you achieve responsive layouts in Angular applications with minimal code changes.
915 lines (905 loc) • 50.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Inject, Directive, Input, NgModule } from '@angular/core';
import * as i1 from 'ri-flex-layout/src/lib/core';
import { StyleGenerator, BaseDirective, LAYOUT_CONFIG, validateBasis, multiply, CoreModule } from 'ri-flex-layout/src/lib/core';
import { buildLayoutCSS, isFlowHorizontal, extendObject, LAYOUT_VALUES } from 'ri-flex-layout/src/lib/_private-utils';
import * as i2 from '@angular/cdk/bidi';
import { BidiModule } from '@angular/cdk/bidi';
import { takeUntil, Subject } from 'rxjs';
class LayoutStyleBuilder extends StyleGenerator {
buildStyles(input, { display }) {
const css = buildLayoutCSS(input);
return {
...css,
display: display === 'none' ? display : css.display,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$5 = [
'riFxLayout', 'riFxLayout.xs', 'riFxLayout.sm', 'riFxLayout.md',
'riFxLayout.lg', 'riFxLayout.xl', 'riFxLayout.lt-sm', 'riFxLayout.lt-md',
'riFxLayout.lt-lg', 'riFxLayout.lt-xl', 'riFxLayout.gt-xs', 'riFxLayout.gt-sm',
'riFxLayout.gt-md', 'riFxLayout.gt-lg'
];
const selector$5 = `
[riFxLayout], [riFxLayout.xs], [riFxLayout.sm], [riFxLayout.md],
[riFxLayout.lg], [riFxLayout.xl], [riFxLayout.lt-sm], [riFxLayout.lt-md],
[riFxLayout.lt-lg], [riFxLayout.lt-xl], [riFxLayout.gt-xs], [riFxLayout.gt-sm],
[riFxLayout.gt-md], [riFxLayout.gt-lg]
`;
class LayoutDirective extends BaseDirective {
constructor(elRef, styleUtils, styleBuilder, marshal, _config) {
super(elRef, styleBuilder, styleUtils, marshal);
this._config = _config;
this.RI_DIRECTIVE_KEY = 'layout';
this.init();
}
updateWithValue(input) {
const detectLayoutDisplay = this._config.detectLayoutDisplay;
const display = detectLayoutDisplay ? this.styler.lookupStyle(this.nativeElement, 'display') : '';
this.styleCache = cacheMap.get(display) ?? new Map();
cacheMap.set(display, this.styleCache);
if (this.currentValue !== input) {
this.addStyles(input, { display });
this.currentValue = input;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtilsService }, { token: LayoutStyleBuilder }, { token: i1.MediaMarshaller }, { token: LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: LayoutDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtilsService }, { type: LayoutStyleBuilder }, { type: i1.MediaMarshaller }, { type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }] });
class RIDefaultLayoutDirective extends LayoutDirective {
constructor() {
super(...arguments);
this.inputs = inputs$5;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultLayoutDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RIDefaultLayoutDirective, isStandalone: true, selector: "\n [riFxLayout], [riFxLayout.xs], [riFxLayout.sm], [riFxLayout.md],\n [riFxLayout.lg], [riFxLayout.xl], [riFxLayout.lt-sm], [riFxLayout.lt-md],\n [riFxLayout.lt-lg], [riFxLayout.lt-xl], [riFxLayout.gt-xs], [riFxLayout.gt-sm],\n [riFxLayout.gt-md], [riFxLayout.gt-lg]\n", inputs: { riFxLayout: "riFxLayout", "riFxLayout.xs": "riFxLayout.xs", "riFxLayout.sm": "riFxLayout.sm", "riFxLayout.md": "riFxLayout.md", "riFxLayout.lg": "riFxLayout.lg", "riFxLayout.xl": "riFxLayout.xl", "riFxLayout.lt-sm": "riFxLayout.lt-sm", "riFxLayout.lt-md": "riFxLayout.lt-md", "riFxLayout.lt-lg": "riFxLayout.lt-lg", "riFxLayout.lt-xl": "riFxLayout.lt-xl", "riFxLayout.gt-xs": "riFxLayout.gt-xs", "riFxLayout.gt-sm": "riFxLayout.gt-sm", "riFxLayout.gt-md": "riFxLayout.gt-md", "riFxLayout.gt-lg": "riFxLayout.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultLayoutDirective, decorators: [{
type: Directive,
args: [{ selector: selector$5, inputs: inputs$5 }]
}] });
const cacheMap = new Map();
class FlexAlignStyleBuilder extends StyleGenerator {
buildStyles(input) {
input = input || 'stretch';
const styles = {};
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: "19.2.13", ngImport: i0, type: FlexAlignStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexAlignStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexAlignStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$4 = [
'riFxFlexAlign', 'riFxFlexAlign.xs', 'riFxFlexAlign.sm', 'riFxFlexAlign.md',
'riFxFlexAlign.lg', 'riFxFlexAlign.xl', 'riFxFlexAlign.lt-sm', 'riFxFlexAlign.lt-md',
'riFxFlexAlign.lt-lg', 'riFxFlexAlign.lt-xl', 'riFxFlexAlign.gt-xs', 'riFxFlexAlign.gt-sm',
'riFxFlexAlign.gt-md', 'riFxFlexAlign.gt-lg'
];
const selector$4 = `
[riFxFlexAlign], [riFxFlexAlign.xs], [riFxFlexAlign.sm], [riFxFlexAlign.md],
[riFxFlexAlign.lg], [riFxFlexAlign.xl], [riFxFlexAlign.lt-sm], [riFxFlexAlign.lt-md],
[riFxFlexAlign.lt-lg], [riFxFlexAlign.lt-xl], [riFxFlexAlign.gt-xs], [riFxFlexAlign.gt-sm],
[riFxFlexAlign.gt-md], [riFxFlexAlign.gt-lg]
`;
class FlexAlignDirective extends BaseDirective {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.RI_DIRECTIVE_KEY = 'flex-align';
this.styleCache = flexAlignCache;
this.init();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexAlignDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtilsService }, { token: FlexAlignStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: FlexAlignDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexAlignDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtilsService }, { type: FlexAlignStyleBuilder }, { type: i1.MediaMarshaller }] });
const flexAlignCache = new Map();
class RIDefaultFlexAlignDirective extends FlexAlignDirective {
constructor() {
super(...arguments);
this.inputs = inputs$4;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultFlexAlignDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RIDefaultFlexAlignDirective, isStandalone: true, selector: "\n [riFxFlexAlign], [riFxFlexAlign.xs], [riFxFlexAlign.sm], [riFxFlexAlign.md],\n [riFxFlexAlign.lg], [riFxFlexAlign.xl], [riFxFlexAlign.lt-sm], [riFxFlexAlign.lt-md],\n [riFxFlexAlign.lt-lg], [riFxFlexAlign.lt-xl], [riFxFlexAlign.gt-xs], [riFxFlexAlign.gt-sm],\n [riFxFlexAlign.gt-md], [riFxFlexAlign.gt-lg]\n", inputs: { riFxFlexAlign: "riFxFlexAlign", "riFxFlexAlign.xs": "riFxFlexAlign.xs", "riFxFlexAlign.sm": "riFxFlexAlign.sm", "riFxFlexAlign.md": "riFxFlexAlign.md", "riFxFlexAlign.lg": "riFxFlexAlign.lg", "riFxFlexAlign.xl": "riFxFlexAlign.xl", "riFxFlexAlign.lt-sm": "riFxFlexAlign.lt-sm", "riFxFlexAlign.lt-md": "riFxFlexAlign.lt-md", "riFxFlexAlign.lt-lg": "riFxFlexAlign.lt-lg", "riFxFlexAlign.lt-xl": "riFxFlexAlign.lt-xl", "riFxFlexAlign.gt-xs": "riFxFlexAlign.gt-xs", "riFxFlexAlign.gt-sm": "riFxFlexAlign.gt-sm", "riFxFlexAlign.gt-md": "riFxFlexAlign.gt-md", "riFxFlexAlign.gt-lg": "riFxFlexAlign.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultFlexAlignDirective, decorators: [{
type: Directive,
args: [{ selector: selector$4, inputs: inputs$4 }]
}] });
const FLEX_FILL_CSS = {
'margin': 0,
'width': '100%',
'height': '100%',
'min-width': '100%',
'min-height': '100%'
};
class FlexFillStyleBuilder extends StyleGenerator {
buildStyles(_input) {
return FLEX_FILL_CSS;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexFillStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexFillStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexFillStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class FlexFillDirective extends BaseDirective {
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: "19.2.13", ngImport: i0, type: FlexFillDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtilsService }, { token: FlexFillStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: FlexFillDirective, isStandalone: true, selector: "[riFxFill], [riFxFlexFill]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexFillDirective, decorators: [{
type: Directive,
args: [{
selector: `[riFxFill], [riFxFlexFill]`,
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtilsService }, { type: FlexFillStyleBuilder }, { type: i1.MediaMarshaller }] });
const flexFillCache = new Map();
class FlexOrderStyleBuilder extends StyleGenerator {
buildStyles(value) {
return { order: (value && parseInt(value, 10)) || '' };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexOrderStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexOrderStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexOrderStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$3 = [
'riFxFlexOrder', 'riFxFlexOrder.xs', 'riFxFlexOrder.sm', 'riFxFlexOrder.md',
'riFxFlexOrder.lg', 'riFxFlexOrder.xl', 'riFxFlexOrder.lt-sm', 'riFxFlexOrder.lt-md',
'riFxFlexOrder.lt-lg', 'riFxFlexOrder.lt-xl', 'riFxFlexOrder.gt-xs', 'riFxFlexOrder.gt-sm',
'riFxFlexOrder.gt-md', 'riFxFlexOrder.gt-lg'
];
const selector$3 = `
[riFxFlexOrder], [riFxFlexOrder.xs], [riFxFlexOrder.sm], [riFxFlexOrder.md],
[riFxFlexOrder.lg], [riFxFlexOrder.xl], [riFxFlexOrder.lt-sm], [riFxFlexOrder.lt-md],
[riFxFlexOrder.lt-lg], [riFxFlexOrder.lt-xl], [riFxFlexOrder.gt-xs], [riFxFlexOrder.gt-sm],
[riFxFlexOrder.gt-md], [riFxFlexOrder.gt-lg]
`;
class FlexOrderDirective extends BaseDirective {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.RI_DIRECTIVE_KEY = 'flex-order';
this.styleCache = flexOrderCache;
this.init();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexOrderDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtilsService }, { token: FlexOrderStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: FlexOrderDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexOrderDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtilsService }, { type: FlexOrderStyleBuilder }, { type: i1.MediaMarshaller }] });
const flexOrderCache = new Map();
class RIDefaultFlexOrderDirective extends FlexOrderDirective {
constructor() {
super(...arguments);
this.inputs = inputs$3;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultFlexOrderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RIDefaultFlexOrderDirective, isStandalone: true, selector: "\n [riFxFlexOrder], [riFxFlexOrder.xs], [riFxFlexOrder.sm], [riFxFlexOrder.md],\n [riFxFlexOrder.lg], [riFxFlexOrder.xl], [riFxFlexOrder.lt-sm], [riFxFlexOrder.lt-md],\n [riFxFlexOrder.lt-lg], [riFxFlexOrder.lt-xl], [riFxFlexOrder.gt-xs], [riFxFlexOrder.gt-sm],\n [riFxFlexOrder.gt-md], [riFxFlexOrder.gt-lg]\n", inputs: { riFxFlexOrder: "riFxFlexOrder", "riFxFlexOrder.xs": "riFxFlexOrder.xs", "riFxFlexOrder.sm": "riFxFlexOrder.sm", "riFxFlexOrder.md": "riFxFlexOrder.md", "riFxFlexOrder.lg": "riFxFlexOrder.lg", "riFxFlexOrder.xl": "riFxFlexOrder.xl", "riFxFlexOrder.lt-sm": "riFxFlexOrder.lt-sm", "riFxFlexOrder.lt-md": "riFxFlexOrder.lt-md", "riFxFlexOrder.lt-lg": "riFxFlexOrder.lt-lg", "riFxFlexOrder.lt-xl": "riFxFlexOrder.lt-xl", "riFxFlexOrder.gt-xs": "riFxFlexOrder.gt-xs", "riFxFlexOrder.gt-sm": "riFxFlexOrder.gt-sm", "riFxFlexOrder.gt-md": "riFxFlexOrder.gt-md", "riFxFlexOrder.gt-lg": "riFxFlexOrder.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultFlexOrderDirective, decorators: [{
type: Directive,
args: [{ selector: selector$3, inputs: inputs$3 }]
}] });
class FlexStyleBuilder extends StyleGenerator {
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;
const isFixed = !grow && !shrink;
let css = {};
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:
if (!isValue && !isPercent && !isNaN(basis)) {
basis = basis + '%';
}
if (basis === '0%') {
isValue = true;
}
if (basis === '0px') {
basis = '0%';
}
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}`
});
}
}
if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') {
css[min] = isFixed || (isValue && grow) ? basis : null;
css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
}
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 {
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: "19.2.13", ngImport: i0, type: FlexStyleBuilder, deps: [{ token: LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }] });
const inputs$2 = [
'riFxFlex', 'riFxFlex.xs', 'riFxFlex.sm', 'riFxFlex.md',
'riFxFlex.lg', 'riFxFlex.xl', 'riFxFlex.lt-sm', 'riFxFlex.lt-md',
'riFxFlex.lt-lg', 'riFxFlex.lt-xl', 'riFxFlex.gt-xs', 'riFxFlex.gt-sm',
'riFxFlex.gt-md', 'riFxFlex.gt-lg'
];
const selector$2 = `
[riFxFlex], [riFxFlex.xs], [riFxFlex.sm], [riFxFlex.md],
[riFxFlex.lg], [riFxFlex.xl], [riFxFlex.lt-sm], [riFxFlex.lt-md],
[riFxFlex.lt-lg], [riFxFlex.lt-xl], [riFxFlex.gt-xs], [riFxFlex.gt-sm],
[riFxFlex.gt-md], [riFxFlex.gt-lg]
`;
class FlexDirective extends BaseDirective {
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.RI_DIRECTIVE_KEY = 'flex';
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));
}
}
onLayoutChange(matcher) {
const layout = matcher.value;
const layoutParts = layout.split(' ');
this.direction = layoutParts[0];
this.wrap = layoutParts[1] !== undefined && layoutParts[1] === 'wrap';
this.triggerUpdate();
}
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 });
}
triggerReflow() {
const activatedValue = this.activatedValue;
if (activatedValue !== undefined) {
const parts = validateBasis(activatedValue + '', this.flexGrow, this.flexShrink);
this.marshal.updateElement(this.nativeElement, this.RI_DIRECTIVE_KEY, parts.join(' '));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtilsService }, { token: LAYOUT_CONFIG }, { token: FlexStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: FlexDirective, isStandalone: true, inputs: { shrink: ["riFxShrink", "shrink"], grow: ["riFxGrow", "grow"] }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtilsService }, { type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }, { type: FlexStyleBuilder }, { type: i1.MediaMarshaller }], propDecorators: { shrink: [{
type: Input,
args: ['riFxShrink']
}], grow: [{
type: Input,
args: ['riFxGrow']
}] } });
class RIDefaultFlexDirective extends FlexDirective {
constructor() {
super(...arguments);
this.inputs = inputs$2;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultFlexDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RIDefaultFlexDirective, isStandalone: true, selector: "\n [riFxFlex], [riFxFlex.xs], [riFxFlex.sm], [riFxFlex.md],\n [riFxFlex.lg], [riFxFlex.xl], [riFxFlex.lt-sm], [riFxFlex.lt-md],\n [riFxFlex.lt-lg], [riFxFlex.lt-xl], [riFxFlex.gt-xs], [riFxFlex.gt-sm],\n [riFxFlex.gt-md], [riFxFlex.gt-lg]\n", inputs: { riFxFlex: "riFxFlex", "riFxFlex.xs": "riFxFlex.xs", "riFxFlex.sm": "riFxFlex.sm", "riFxFlex.md": "riFxFlex.md", "riFxFlex.lg": "riFxFlex.lg", "riFxFlex.xl": "riFxFlex.xl", "riFxFlex.lt-sm": "riFxFlex.lt-sm", "riFxFlex.lt-md": "riFxFlex.lt-md", "riFxFlex.lt-lg": "riFxFlex.lt-lg", "riFxFlex.lt-xl": "riFxFlex.lt-xl", "riFxFlex.gt-xs": "riFxFlex.gt-xs", "riFxFlex.gt-sm": "riFxFlex.gt-sm", "riFxFlex.gt-md": "riFxFlex.gt-md", "riFxFlex.gt-lg": "riFxFlex.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultFlexDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$2, selector: selector$2, standalone: true }]
}] });
const flexRowCache = new Map();
const flexColumnCache = new Map();
const flexRowWrapCache = new Map();
const flexColumnWrapCache = new Map();
class LayoutAlignStyleBuilder extends StyleGenerator {
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:
css['justify-content'] = 'flex-start'; // default main axis
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'
css['align-items'] = css['align-content'] = 'stretch'; // default cross axis
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: "19.2.13", ngImport: i0, type: LayoutAlignStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutAlignStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutAlignStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$1 = [
'riFxLayoutAlign', 'riFxLayoutAlign.xs', 'riFxLayoutAlign.sm', 'riFxLayoutAlign.md',
'riFxLayoutAlign.lg', 'riFxLayoutAlign.xl', 'riFxLayoutAlign.lt-sm', 'riFxLayoutAlign.lt-md',
'riFxLayoutAlign.lt-lg', 'riFxLayoutAlign.lt-xl', 'riFxLayoutAlign.gt-xs', 'riFxLayoutAlign.gt-sm',
'riFxLayoutAlign.gt-md', 'riFxLayoutAlign.gt-lg'
];
const selector$1 = `
[riFxLayoutAlign], [riFxLayoutAlign.xs], [riFxLayoutAlign.sm], [riFxLayoutAlign.md],
[riFxLayoutAlign.lg], [riFxLayoutAlign.xl], [riFxLayoutAlign.lt-sm], [riFxLayoutAlign.lt-md],
[riFxLayoutAlign.lt-lg], [riFxLayoutAlign.lt-xl], [riFxLayoutAlign.gt-xs], [riFxLayoutAlign.gt-sm],
[riFxLayoutAlign.gt-md], [riFxLayoutAlign.gt-lg]
`;
class LayoutAlignDirective extends BaseDirective {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.RI_DIRECTIVE_KEY = 'layout-align';
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));
}
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 });
}
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: "19.2.13", ngImport: i0, type: LayoutAlignDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtilsService }, { token: LayoutAlignStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: LayoutAlignDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutAlignDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtilsService }, { type: LayoutAlignStyleBuilder }, { type: i1.MediaMarshaller }] });
class RIDefaultLayoutAlignDirective extends LayoutAlignDirective {
constructor() {
super(...arguments);
this.inputs = inputs$1;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultLayoutAlignDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RIDefaultLayoutAlignDirective, isStandalone: true, selector: "\n [riFxLayoutAlign], [riFxLayoutAlign.xs], [riFxLayoutAlign.sm], [riFxLayoutAlign.md],\n [riFxLayoutAlign.lg], [riFxLayoutAlign.xl], [riFxLayoutAlign.lt-sm], [riFxLayoutAlign.lt-md],\n [riFxLayoutAlign.lt-lg], [riFxLayoutAlign.lt-xl], [riFxLayoutAlign.gt-xs], [riFxLayoutAlign.gt-sm],\n [riFxLayoutAlign.gt-md], [riFxLayoutAlign.gt-lg]\n", inputs: { riFxLayoutAlign: "riFxLayoutAlign", "riFxLayoutAlign.xs": "riFxLayoutAlign.xs", "riFxLayoutAlign.sm": "riFxLayoutAlign.sm", "riFxLayoutAlign.md": "riFxLayoutAlign.md", "riFxLayoutAlign.lg": "riFxLayoutAlign.lg", "riFxLayoutAlign.xl": "riFxLayoutAlign.xl", "riFxLayoutAlign.lt-sm": "riFxLayoutAlign.lt-sm", "riFxLayoutAlign.lt-md": "riFxLayoutAlign.lt-md", "riFxLayoutAlign.lt-lg": "riFxLayoutAlign.lt-lg", "riFxLayoutAlign.lt-xl": "riFxLayoutAlign.lt-xl", "riFxLayoutAlign.gt-xs": "riFxLayoutAlign.gt-xs", "riFxLayoutAlign.gt-sm": "riFxLayoutAlign.gt-sm", "riFxLayoutAlign.gt-md": "riFxLayoutAlign.gt-md", "riFxLayoutAlign.gt-lg": "riFxLayoutAlign.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultLayoutAlignDirective, decorators: [{
type: Directive,
args: [{ selector: selector$1, inputs: inputs$1 }]
}] });
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();
const CLEAR_MARGIN_CSS = {
'margin-left': null,
'margin-right': null,
'margin-top': null,
'margin-bottom': null
};
class LayoutGapStyleBuilder extends StyleGenerator {
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);
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);
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();
const gapCss = buildGapCSS(gapValue, parent);
this._styler.applyStyleToElements(gapCss, items);
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: "19.2.13", ngImport: i0, type: LayoutGapStyleBuilder, deps: [{ token: i1.StyleUtilsService }, { token: LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutGapStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutGapStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: i1.StyleUtilsService }, { type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }] });
const inputs = [
'riFxLayoutGap', 'riFxLayoutGap.xs', 'riFxLayoutGap.sm', 'riFxLayoutGap.md',
'riFxLayoutGap.lg', 'riFxLayoutGap.xl', 'riFxLayoutGap.lt-sm', 'riFxLayoutGap.lt-md',
'riFxLayoutGap.lt-lg', 'riFxLayoutGap.lt-xl', 'riFxLayoutGap.gt-xs', 'riFxLayoutGap.gt-sm',
'riFxLayoutGap.gt-md', 'riFxLayoutGap.gt-lg'
];
const selector = `
[riFxLayoutGap], [riFxLayoutGap.xs], [riFxLayoutGap.sm], [riFxLayoutGap.md],
[riFxLayoutGap.lg], [riFxLayoutGap.xl], [riFxLayoutGap.lt-sm], [riFxLayoutGap.lt-md],
[riFxLayoutGap.lt-lg], [riFxLayoutGap.lt-xl], [riFxLayoutGap.gt-xs], [riFxLayoutGap.gt-sm],
[riFxLayoutGap.gt-md], [riFxLayoutGap.gt-lg]
`;
class LayoutGapDirective extends BaseDirective {
get childrenNodes() {
const obj = this.nativeElement.children;
const buffer = [];
for (let i = obj.length; i--;) {
buffer[i] = obj[i];
}
return buffer;
}
constructor(elRef, zone, directionality, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.zone = zone;
this.directionality = directionality;
this.styleUtils = styleUtils;
this.layout = 'row'; // default flex-direction
this.RI_DIRECTIVE_KEY = 'layout-gap';
this.observerSubject = new Subject();
const extraTriggers = [this.directionality.change, this.observerSubject.asObservable()];
this.init(extraTriggers);
this.marshal
.trackValue(this.nativeElement, 'layout')
.pipe(takeUntil(this.destroySubject))
.subscribe(this.onLayoutChange.bind(this));
}
ngAfterContentInit() {
this.buildChildObservable();
this.triggerUpdate();
}
ngOnDestroy() {
super.ngOnDestroy();
if (this.observer) {
this.observer.disconnect();
}
}
onLayoutChange(matcher) {
const layout = matcher.value;
const direction = layout.split(' ');
this.layout = direction[0];
if (!LAYOUT_VALUES.find(x => x === this.layout)) {
this.layout = 'row';
}
this.triggerUpdate();
}
updateWithValue(value) {
const items = this.childrenNodes
.filter(el => el.nodeType === 1 && this.willDisplay(el))
.sort((a, b) => {
const orderA = +this.styler.lookupStyle(a, 'order');
const orderB = +this.styler.lookupStyle(b, 'order');
if (isNaN(orderA) || isNaN(orderB) || orderA === orderB) {
return 0;
}
else {
return orderA > orderB ? 1 : -1;
}
});
if (items.length > 0) {
const directionality = this.directionality.value;
const layout = this.layout;
if (layout === 'row' && directionality === 'rtl') {
this.styleCache = layoutGapCacheRowRtl;
}
else if (layout === 'row' && directionality !== 'rtl') {
this.styleCache = layoutGapCacheRowLtr;
}
else if (layout === 'column' && directionality === 'rtl') {
this.styleCache = layoutGapCacheColumnRtl;
}
else if (layout === 'column' && directionality !== 'rtl') {
this.styleCache = layoutGapCacheColumnLtr;
}
this.addStyles(value, { directionality, items, layout });
}
}
clearStyles() {
const gridMode = Object.keys(this.mru).length > 0;
const childrenStyle = gridMode ? 'padding' :
getMarginType(this.directionality.value, this.layout);
if (gridMode) {
super.clearStyles();
}
this.styleUtils.applyStyleToElements({ [childrenStyle]: '' }, this.childrenNodes);
}
willDisplay(source) {
const value = this.marshal.getValue(source, 'show-hide');
return value === true ||
(value === undefined && this.styleUtils.lookupStyle(source, 'display') !== 'none');
}
buildChildObservable() {
this.zone.runOutsideAngular(() => {
if (typeof MutationObserver !== 'undefined') {
this.observer = new MutationObserver((mutations) => {
const validatedChanges = (it) => {
return (it.addedNodes && it.addedNodes.length > 0) ||
(it.removedNodes && it.removedNodes.length > 0);
};
if (mutations.some(validatedChanges)) {
this.observerSubject.next();
}
});
this.observer.observe(this.nativeElement, { childList: true });
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutGapDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.Directionality }, { token: i1.StyleUtilsService }, { token: LayoutGapStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: LayoutGapDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutGapDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.Directionality }, { type: i1.StyleUtilsService }, { type: LayoutGapStyleBuilder }, { type: i1.MediaMarshaller }] });
class RIDefaultLayoutGapDirective extends LayoutGapDirective {
constructor() {
super(...arguments);
this.inputs = inputs;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultLayoutGapDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RIDefaultLayoutGapDirective, isStandalone: true, selector: "\n [riFxLayoutGap], [riFxLayoutGap.xs], [riFxLayoutGap.sm], [riFxLayoutGap.md],\n [riFxLayoutGap.lg], [riFxLayoutGap.xl], [riFxLayoutGap.lt-sm], [riFxLayoutGap.lt-md],\n [riFxLayoutGap.lt-lg], [riFxLayoutGap.lt-xl], [riFxLayoutGap.gt-xs], [riFxLayoutGap.gt-sm],\n [riFxLayoutGap.gt-md], [riFxLayoutGap.gt-lg]\n", inputs: { riFxLayoutGap: "riFxLayoutGap", "riFxLayoutGap.xs": "riFxLayoutGap.xs", "riFxLayoutGap.sm": "riFxLayoutGap.sm", "riFxLayoutGap.md": "riFxLayoutGap.md", "riFxLayoutGap.lg": "riFxLayoutGap.lg", "riFxLayoutGap.xl": "riFxLayoutGap.xl", "riFxLayoutGap.lt-sm": "riFxLayoutGap.lt-sm", "riFxLayoutGap.lt-md": "riFxLayoutGap.lt-md", "riFxLayoutGap.lt-lg": "riFxLayoutGap.lt-lg", "riFxLayoutGap.lt-xl": "riFxLayoutGap.lt-xl", "riFxLayoutGap.gt-xs": "riFxLayoutGap.gt-xs", "riFxLayoutGap.gt-sm": "riFxLayoutGap.gt-sm", "riFxLayoutGap.gt-md": "riFxLayoutGap.gt-md", "riFxLayoutGap.gt-lg": "riFxLayoutGap.gt-lg" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RIDefaultLayoutGapDirective, decorators: [{
type: Directive,
args: [{ selector, inputs }]
}] });
const layoutGapCacheRowRtl = new Map();
const layoutGapCacheColumnRtl = new Map();
const layoutGapCacheRowLtr = new Map();
const layoutGapCacheColumnLtr = new Map();
const GRID_SPECIFIER = ' grid';
function buildGridPadding(value, directionality) {
const [between, below] = value.split(' ');
const bottom = below ?? between;
let paddingRight = '0px', paddingBottom = bottom, paddingLeft = '0px';
if (directionality === 'rtl') {
paddingLeft = between;
}
else {
paddingRight = between;
}
return { 'padding': `0px ${paddingRight} ${paddingBottom} ${paddingLeft}` };
}
function buildGridMargin(value, directionality) {
const [between, below] = value.split(' ');
const bottom = below ?? between;
const minus = (str) => `-${str}`;
let marginRight = '0px', marginBottom = minus(bottom), marginLeft = '0px';
if (directionality === 'rtl') {
marginLeft = minus(between);
}
else {
marginRight = minus(between);
}
return { 'margin': `0px ${marginRight} ${marginBottom} ${marginLeft}` };
}
function getMarginType(directionality, layout) {
switch (layout) {
case 'column':
return 'margin-bottom';
case 'column-reverse':
return 'margin-top';
case 'row':
return directionality === 'rtl' ? 'margin-left' : 'margin-right';
case 'row-reverse':
return directionality === 'rtl' ? 'margin-right' : 'margin-left';
default:
return directionality === 'rtl' ? 'margin-left' : 'margin-right';
}
}
function buildGapCSS(gapValue, parent) {
const key = getMarginType(parent.directionality, parent.layout);
const margins = { ...CLEAR_MARGIN_CSS };
margins[key] = gapValue;
return margins;
}
const ALL_DIRECTIVES = [
RIDefaultLayoutDirective,
RIDefaultLayoutGapDirective,
RIDefaultLayoutAlignDirective,
RIDefaultFlexOrderDirective,
FlexFillDirective,
RIDefaultFlexAlignDirective,
RIDefaultFlexDirective,
];
class FlexModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: FlexModule, imports: [CoreModule,
BidiModule, RIDefaultLayoutDirective,
RIDefaultLayoutGapDirective,
RIDefaultLayoutAlignDirective,
RIDefaultFlexOrderDirective,
FlexFillDirective,
RIDefaultFlexAlignDirective,
RIDefaultFlexDirective], exports: [RIDefaultLayoutDirective,
RIDefaultLayoutGapDirective,
RIDefaultLayoutAlignDirective,
RIDefaultFlexOrderDirective,
FlexFillDirective,
RIDefaultFlexAlignDirective,
RIDefaultFlexDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexModule, imports: [CoreModule,
BidiModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FlexModule, decorators: [{
type: NgModule,
args: [{
imports: [
CoreModule,
BidiModule,
...ALL_DIRECTIVES
],
declarations: [],
exports: [...ALL_DIRECTIVES]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FlexAlignDirective, FlexAlignStyleBuilder, FlexDirective, FlexFillDirective, FlexFillStyleBuilder, FlexModule, FlexOrd