@fireng/layout
Version:
Angular directives for responsive layout and visual adjustments using Fireng breakpoints.
539 lines (526 loc) • 28.3 kB
JavaScript
import * as i0 from '@angular/core';
import { input, inject, computed, Directive } from '@angular/core';
import { FirengScreenService } from '@fireng/core';
class FirengJustifyContentDirective {
/**
* Defines how flex items are distributed along the main axis of their container,
* after any flexible lengths and auto margins have been applied.
* Accepted values for justifyContent are:
* - `flex-start`: Items are packed towards the start of the flex-direction.
* - `flex-end`: Items are packed towards the end of the flex-direction.
* - `center`: Items are centered along the main axis.
* - `space-between`: Items are evenly distributed with the first item at the start
* and the last item at the end.
* - `space-around`: Items are evenly distributed with equal space around them.
* - `space-evenly`: Items are evenly distributed with equal space around them,
* including the space at the ends.
*
* Other accepted values include:
* `start`, `end`, `left`, `right`, `normal`, `stretch`,
* `safe center`, `unsafe center`.
*
* This input also accepts values from `FirengCssOverflowAlignment` (e.g., `safe`, `unsafe`)
* when combined with alignment keywords (like `center`).
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the justify-content property, refer to the MDN documentation:
* @see [MDN - justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireJustifyContent="center">...</div>
* <div fireJustifyContent="space-between">...</div>
* <div fireJustifyContent="safe center">...</div>
* <div fireJustifyContent="unset">...</div> // Example with a global value
* // Responsive usage:
* <div fireJustifyContent="{ xs: 'flex-start', sm: 'center', md: 'space-between', lg: 'inherit' }">...</div>
* @defaultValue `normal`
*/
justifyContent = input('normal', { alias: 'fireJustifyContent' });
screenService = inject(FirengScreenService);
// Compute the active justify content based on the current screen size
activeJustifyContent = computed(() => {
const justify = this.justifyContent();
if (typeof justify === 'string') {
return justify;
}
else {
const resolvedValue = this.screenService.resolveBreakpointValue(justify, 'normal' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengJustifyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengJustifyContentDirective, isStandalone: true, selector: "[fireJustifyContent]", inputs: { justifyContent: { classPropertyName: "justifyContent", publicName: "fireJustifyContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.justifyContent": "activeJustifyContent()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengJustifyContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireJustifyContent]',
standalone: true,
host: {
'[style.justifyContent]': 'activeJustifyContent()',
},
}]
}] });
class FirengFlexDirectionDirective {
/**
* Defines the primary axis along which flex items are laid out and the direction
* in which they are placed.
* Accepted values for flexDirection are:
* - `row`: Items are placed in a row, from left to right in LTR context.
* - `column`: Items are placed in a column, from top to bottom.
* - `row-reverse`: Items are placed in a row, from right to left in LTR context.
* - `column-reverse`: Items are placed in a column, from bottom to top.
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the flex-direction property, refer to the MDN documentation:
* @see [MDN - flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireFlexDirection="column">...</div>
* <div fireFlexDirection="unset">...</div>
* // Responsive usage:
* <div fireFlexDirection="{ sm: 'row', md: 'column-reverse', lg: 'inherit' }">...</div>
* @defaultValue `row`
*/
flexDirection = input('row', {
alias: 'fireFlexDirection',
});
screenService = inject(FirengScreenService);
// Compute the active flex direction based on the current screen size
activeFlexDirection = computed(() => {
const direction = this.flexDirection();
if (typeof direction === 'string') {
return direction;
}
else {
const resolvedValue = this.screenService.resolveBreakpointValue(direction, 'row' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengFlexDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengFlexDirectionDirective, isStandalone: true, selector: "[fireFlexDirection]", inputs: { flexDirection: { classPropertyName: "flexDirection", publicName: "fireFlexDirection", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flexDirection": "activeFlexDirection()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengFlexDirectionDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireFlexDirection]',
standalone: true,
host: {
'[style.flexDirection]': 'activeFlexDirection()',
},
}]
}] });
class FirengFlexWrapDirective {
/**
* Defines how flex items are placed in the flex container, allowing them to
* wrap onto multiple lines.
* Accepted values for flexWrap are:
* - `nowrap`: All flex items will be on one line.
* - `wrap`: Flex items will wrap onto multiple lines.
* - `wrap-reverse`: Flex items will wrap onto multiple lines in reverse order.
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the flex-wrap property, refer to the MDN documentation:
* @see [MDN - flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireFlexWrap="wrap">...</div>
* <div fireFlexWrap="initial">...</div>
* // Responsive usage:
* <div fireFlexWrap="{ xs: 'nowrap', sm: 'wrap', md: 'wrap-reverse', lg: 'unset' }">...</div>
* @defaultValue `nowrap`
*/
flexWrap = input('nowrap', { alias: 'fireFlexWrap' });
screenService = inject(FirengScreenService);
// Compute the active flex wrap based on the current screen size
activeFlexWrap = computed(() => {
const wrap = this.flexWrap();
if (typeof wrap === 'string') {
return wrap;
}
else {
// Resolve the value based on the current breakpoint
const resolvedValue = this.screenService.resolveBreakpointValue(wrap, 'nowrap' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengFlexWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengFlexWrapDirective, isStandalone: true, selector: "[fireFlexWrap]", inputs: { flexWrap: { classPropertyName: "flexWrap", publicName: "fireFlexWrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flexWrap": "activeFlexWrap()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengFlexWrapDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireFlexWrap]',
standalone: true,
host: {
'[style.flexWrap]': 'activeFlexWrap()',
},
}]
}] });
class FirengGapDirective {
/**
* Defines the gap (gutters) between rows and columns in flex and grid layouts.
* This is a shorthand for `row-gap` and `column-gap`.
* Accepted values for gap are any valid CSS <length> or <percentage> value,
* which can be a single value (for both row and column gap) or two values
* (first for row-gap, second for column-gap).
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the gap property, refer to the MDN documentation:
* @see [MDN - gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireGap="20px">...</div>
* <div fireGap="1em 0.5em">...</div>
* <div fireGap="calc(10% + 20px)">...</div>
* <div fireGap="unset">...</div> // Example with a global value
* // Responsive usage:
* <div fireGap="{ xs: '8px', sm: '1em 2em', md: '3vmin 2vmax', lg: 'inherit' }">...</div>
* @defaultValue `normal`
*/
gap = input('normal', {
alias: 'fireGap',
});
screenService = inject(FirengScreenService);
// Compute the active gap based on the current screen size
activeGap = computed(() => {
const gap = this.gap();
if (typeof gap === 'string') {
return gap;
}
else {
// Resolve the value based on the current breakpoint
const resolvedValue = this.screenService.resolveBreakpointValue(gap, '0px' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengGapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengGapDirective, isStandalone: true, selector: "[fireGap]", inputs: { gap: { classPropertyName: "gap", publicName: "fireGap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.gap": "activeGap()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengGapDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireGap]',
standalone: true,
host: {
'[style.gap]': 'activeGap()',
},
}]
}] });
class FirengAlignItemDirective {
/**
* Defines how flex items are aligned along the cross axis of their container
* (perpendicular to the main axis).
* Accepted values for alignItems are:
* - `flex-start`: Items are aligned to the start of the cross axis.
* - `flex-end`: Items are aligned to the end of the cross axis.
* - `center`: Items are centered along the cross axis.
* - `baseline`: Items are aligned such that their baselines align.
* - `stretch`: Items stretch to fill the container (this is the default behavior).
*
* Other accepted values include: `normal`, `start`, `end`, `self-start`, `self-end`,
* `anchor-center`, `first baseline`, `last baseline`, `safe center`, `unsafe center`.
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on align-items properties, refer to the MDN documentation:
* @see [MDN - align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireAlignItems="center">...</div>
* <div fireAlignItems="baseline">...</div>
* <div fireAlignItems="unset">...</div>
* // Responsive usage:
* <div fireAlignItems="{ xs: 'flex-start', sm: 'center', md: 'stretch', lg: 'inherit' }">...</div>
* @defaultValue `normal`
*/
alignItems = input('normal', {
alias: 'fireAlignItems',
});
screenService = inject(FirengScreenService);
// Compute the active align items based on the current screen size
activeAlignItem = computed(() => {
const align = this.alignItems();
if (typeof align === 'string') {
return align;
}
else {
const resolvedValue = this.screenService.resolveBreakpointValue(align, 'normal' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengAlignItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengAlignItemDirective, isStandalone: true, selector: "[fireAlignItem]", inputs: { alignItems: { classPropertyName: "alignItems", publicName: "fireAlignItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.alignItems": "activeAlignItem()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengAlignItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireAlignItem]',
standalone: true,
host: {
'[style.alignItems]': 'activeAlignItem()',
},
}]
}] });
class FirengAlignContentDirective {
/**
* Defines how lines of flex items are distributed and aligned within a flex container
* when there is extra space in the cross axis and the container has multiple lines of items.
* Accepted values for alignContent are:
* - `stretch`: Lines stretch to take up the remaining space.
* - `flex-start`: Lines are packed towards the start of the cross axis.
* - `flex-end`: Lines are packed towards the end of the cross axis.
* - `center`: Lines are centered along the cross axis.
* - `space-between`: Lines are evenly distributed with the first line at the start
* and the last line at the end.
* - `space-around`: Lines are evenly distributed with equal space around them.
* Note: The space between lines is double the space at the ends.
* - `space-evenly`: Lines are evenly distributed with equal space around them,
* including the space at the ends.
*
* Other accepted values include: `start`, `end`, `baseline`, `first baseline`, `last baseline`.
*
* Other accepted values include: `normal`, `start`, `end`, `self-start`, `self-end`,
* `anchor-center`, `first baseline`, `last baseline`, `safe center`, `unsafe center`.
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the align-content property, refer to the MDN documentation:
* @see [MDN - align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireAlignContent="space-between">...</div>
* <div fireAlignContent="center">...</div>
* <div fireAlignContent="unset">...</div>
* // Responsive usage:
* <div fireAlignContent="{ xs: 'flex-start', sm: 'stretch', md: 'space-around', lg: 'inherit' }">...</div>
* @defaultValue `normal`
*/
alignContent = input('normal', {
alias: 'fireAlignContent',
});
screenService = inject(FirengScreenService);
// Compute the active align content based on the current screen size
activeAlignContent = computed(() => {
const align = this.alignContent();
if (typeof align === 'string') {
return align;
}
else {
const resolvedValue = this.screenService.resolveBreakpointValue(align, 'normal' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengAlignContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengAlignContentDirective, isStandalone: true, selector: "[fireAlignContent]", inputs: { alignContent: { classPropertyName: "alignContent", publicName: "fireAlignContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.alignContent": "activeAlignContent()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengAlignContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireAlignContent]',
standalone: true,
host: {
'[style.alignContent]': 'activeAlignContent()',
},
}]
}] });
class FirengDisplayDirective {
/**
* Defines the display type of an element, determining its layout behavior.
* Accepted values for display are:
* - `block`: The element generates a block-level box.
* - `inline`: The element generates an inline-level box.
* - `inline-block`: The element generates a block-level box that flows with surrounding content as if it were a single inline box.
* - `flex`: The element generates a block-level flex container.
* - `inline-flex`: The element generates an inline-level flex container.
* - `grid`: The element generates a block-level grid container.
* - `inline-grid`: The element generates an inline-level grid container.
* - `none`: The element and its descendants are hidden, and it takes up no space.
* - `contents`: The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes.
*
* Other accepted values include: `flow-root`, `block flex`, `block flow`, `block flow-root`,
* `block grid`, `inline flex`, `inline flow`, `inline flow-root`, `inline grid`,
* `table`, `table-row`, `list-item`.
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the display property, refer to the MDN documentation:
* @see [MDN - display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireDisplay="flex">...</div>
* <span fireDisplay="inline-block">...</span>
* <div fireDisplay="block flex">...</div>
* <div fireDisplay="unset">...</div>
* // Responsive usage:
* <div fireDisplay="{ xs: 'block', sm: 'flex', md: 'inline-block', lg: 'none' }">...</div>
* @defaultValue 'inline'
*/
display = input('inline', {
alias: 'fireDisplay',
});
screenService = inject(FirengScreenService);
// Compute the active display based on the current screen size
activeDisplay = computed(() => {
const displayInput = this.display();
if (typeof displayInput === 'string') {
return displayInput;
}
else {
const resolvedValue = this.screenService.resolveBreakpointValue(displayInput, 'inline' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengDisplayDirective, isStandalone: true, selector: "[fireDisplay]", inputs: { display: { classPropertyName: "display", publicName: "fireDisplay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "activeDisplay()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengDisplayDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireDisplay]',
standalone: true,
host: {
'[style.display]': 'activeDisplay()',
},
}]
}] });
class FirengStyleDirective {
/**
* Applies dynamic and responsive custom CSS styles directly to the host element,
* providing fine-grained control over any valid CSS property.
*
* This input accepts a plain JavaScript object (a map) where:
* - Keys are standard CSS property names in **camelCase** (e.g., `backgroundColor`, `fontSize`, `padding`, `borderLeft`).
*
* Values for these properties can be:
* - A static CSS value string (e.g., `'red'`, `'10px'`, `'flex'`, `'inherit'`).
* - A `FirengResponsiveMap<string>` object for breakpoint-specific styling (e.g., `{ xs: '16px', sm: '24px' }`).
*
* This allows for highly flexible styling, supporting any CSS property that can be set via
* an element's `style` attribute, including global CSS values for individual properties.
*
* @example
* // Applying various custom styles, including a responsive font size:
* <span
* [fireStyle]="{
* color: 'white',
* backgroundColor: '#007bff',
* fontSize: { xs: '16px', sm: '24px' }, // Responsive value for fontSize
* padding: '10px 20px',
* borderRadius: '5px'
* }"
* >
* Responsive Text
* </span>
* @defaultValue `{}`
*/
style = input({}, { alias: 'fireStyle' });
screenService = inject(FirengScreenService);
// Compute the active style based on the current screen size
activeStyle = computed(() => {
const styleInput = this.style();
if (!styleInput || typeof styleInput !== 'object') {
return {};
}
return Object.fromEntries(Object.entries(styleInput).reduce((acc, [prop, val]) => {
if (typeof val === 'string') {
acc.push([prop, val]);
}
else {
const resolved = this.screenService.resolveBreakpointValue(val)();
if (resolved) {
acc.push([prop, resolved]);
}
}
return acc;
}, []));
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengStyleDirective, isStandalone: true, selector: "[fireStyle]", inputs: { style: { classPropertyName: "style", publicName: "fireStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "activeStyle()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengStyleDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireStyle]',
standalone: true,
host: {
'[style]': 'activeStyle()',
},
}]
}] });
class FirengBoxDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengBoxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FirengBoxDirective, isStandalone: true, selector: "[fireBox]", hostDirectives: [{ directive: FirengStyleDirective, inputs: ["fireStyle", "style"] }, { directive: FirengDisplayDirective, inputs: ["fireDisplay", "display"] }, { directive: FirengJustifyContentDirective, inputs: ["fireJustifyContent", "justifyContent"] }, { directive: FirengFlexDirectionDirective, inputs: ["fireFlexDirection", "flexDirection"] }, { directive: FirengFlexWrapDirective, inputs: ["fireFlexWrap", "flexWrap"] }, { directive: FirengGapDirective, inputs: ["fireGap", "gap"] }, { directive: FirengAlignItemDirective, inputs: ["fireAlignItems", "alignItems"] }, { directive: FirengAlignContentDirective, inputs: ["fireAlignContent", "alignContent"] }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengBoxDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireBox]',
standalone: true,
hostDirectives: [
{
directive: FirengStyleDirective,
inputs: ['fireStyle: style'],
},
{
directive: FirengDisplayDirective,
inputs: ['fireDisplay: display'],
},
{
directive: FirengJustifyContentDirective,
inputs: ['fireJustifyContent: justifyContent'],
},
{
directive: FirengFlexDirectionDirective,
inputs: ['fireFlexDirection: flexDirection'],
},
{
directive: FirengFlexWrapDirective,
inputs: ['fireFlexWrap: flexWrap'],
},
{
directive: FirengGapDirective,
inputs: ['fireGap: gap'],
},
{
directive: FirengAlignItemDirective,
inputs: ['fireAlignItems: alignItems'],
},
{
directive: FirengAlignContentDirective,
inputs: ['fireAlignContent: alignContent'],
},
],
}]
}] });
// Primary Directives
/**
* Generated bundle index. Do not edit.
*/
export { FirengAlignContentDirective, FirengAlignItemDirective, FirengBoxDirective, FirengDisplayDirective, FirengFlexDirectionDirective, FirengFlexWrapDirective, FirengGapDirective, FirengJustifyContentDirective, FirengStyleDirective };
//# sourceMappingURL=fireng-layout.mjs.map