@fireng/layout
Version:
Angular directives for responsive layout and visual adjustments using Fireng breakpoints.
55 lines • 7.08 kB
JavaScript
import { computed, Directive, inject, input } from '@angular/core';
import { FirengScreenService } from '@fireng/core';
import * as i0 from "@angular/core";
export 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()',
},
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlyZW5nLWZsZXgtd3JhcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvc3JjL2xpYi9hdG9taWMtZGlyZWN0aXZlcy9maXJlbmctZmxleC13cmFwLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRW5FLE9BQU8sRUFBdUIsbUJBQW1CLEVBQUUsTUFBTSxjQUFjLENBQUM7O0FBU3hFLE1BQU0sT0FBTyx1QkFBdUI7SUFDbEM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztPQXFCRztJQUNJLFFBQVEsR0FBRyxLQUFLLENBQ3JCLFFBQVEsRUFDUixFQUFFLEtBQUssRUFBRSxjQUFjLEVBQUUsQ0FDMUIsQ0FBQztJQUVlLGFBQWEsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQztJQUU3RCxnRUFBZ0U7SUFDL0MsY0FBYyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDOUMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQzdCLElBQUksT0FBTyxJQUFJLEtBQUssUUFBUSxFQUFFLENBQUM7WUFDN0IsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDO2FBQU0sQ0FBQztZQUNOLG9EQUFvRDtZQUNwRCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLHNCQUFzQixDQUM3RCxJQUFJLEVBQ0osUUFBUSxDQUFDLHlDQUF5QzthQUNuRCxDQUFDO1lBQ0YsT0FBTyxhQUFhLEVBQUUsQ0FBQztRQUN6QixDQUFDO0lBQ0gsQ0FBQyxDQUFDLENBQUM7d0dBM0NRLHVCQUF1Qjs0RkFBdkIsdUJBQXVCOzs0RkFBdkIsdUJBQXVCO2tCQVBuQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixJQUFJLEVBQUU7d0JBQ0osa0JBQWtCLEVBQUUsa0JBQWtCO3FCQUN2QztpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNvbXB1dGVkLCBEaXJlY3RpdmUsIGluamVjdCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRmlyZW5nRmxleFdyYXAgfSBmcm9tICcuLi9maXJlbmcudHlwZXMnO1xyXG5pbXBvcnQgeyBGaXJlbmdSZXNwb25zaXZlTWFwLCBGaXJlbmdTY3JlZW5TZXJ2aWNlIH0gZnJvbSAnQGZpcmVuZy9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW2ZpcmVGbGV4V3JhcF0nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaG9zdDoge1xyXG4gICAgJ1tzdHlsZS5mbGV4V3JhcF0nOiAnYWN0aXZlRmxleFdyYXAoKScsXHJcbiAgfSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEZpcmVuZ0ZsZXhXcmFwRGlyZWN0aXZlIHtcclxuICAvKipcclxuICAgKiBEZWZpbmVzIGhvdyBmbGV4IGl0ZW1zIGFyZSBwbGFjZWQgaW4gdGhlIGZsZXggY29udGFpbmVyLCBhbGxvd2luZyB0aGVtIHRvXHJcbiAgICogd3JhcCBvbnRvIG11bHRpcGxlIGxpbmVzLlxyXG4gICAqIEFjY2VwdGVkIHZhbHVlcyBmb3IgZmxleFdyYXAgYXJlOlxyXG4gICAqIC0gYG5vd3JhcGA6IEFsbCBmbGV4IGl0ZW1zIHdpbGwgYmUgb24gb25lIGxpbmUuXHJcbiAgICogLSBgd3JhcGA6IEZsZXggaXRlbXMgd2lsbCB3cmFwIG9udG8gbXVsdGlwbGUgbGluZXMuXHJcbiAgICogLSBgd3JhcC1yZXZlcnNlYDogRmxleCBpdGVtcyB3aWxsIHdyYXAgb250byBtdWx0aXBsZSBsaW5lcyBpbiByZXZlcnNlIG9yZGVyLlxyXG4gICAqXHJcbiAgICogR2xvYmFsIENTUyB2YWx1ZXMgYXJlIGFsc28gYWNjZXB0ZWQ6IGBpbmhlcml0YCwgYGluaXRpYWxgLCBgdW5zZXRgLCBgcmV2ZXJ0YC5cclxuICAgKlxyXG4gICAqIEZvciBtb3JlIGRldGFpbHMgb24gdGhlIGZsZXgtd3JhcCBwcm9wZXJ0eSwgcmVmZXIgdG8gdGhlIE1ETiBkb2N1bWVudGF0aW9uOlxyXG4gICAqIEBzZWUgW01ETiAtIGZsZXgtd3JhcF0oaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQ1NTL2ZsZXgtd3JhcClcclxuICAgKlxyXG4gICAqIENhbiBhbHNvIGJlIHByb3ZpZGVkIGFzIGEgcmVzcG9uc2l2ZSBtYXAgZm9yIGRpZmZlcmVudCBzY3JlZW4gc2l6ZXMuXHJcbiAgICogQGV4YW1wbGVcclxuICAgKiAvLyBTdGF0aWMgdXNhZ2U6XHJcbiAgICogPGRpdiBmaXJlRmxleFdyYXA9XCJ3cmFwXCI+Li4uPC9kaXY+XHJcbiAgICogPGRpdiBmaXJlRmxleFdyYXA9XCJpbml0aWFsXCI+Li4uPC9kaXY+XHJcbiAgICogLy8gUmVzcG9uc2l2ZSB1c2FnZTpcclxuICAgKiA8ZGl2IGZpcmVGbGV4V3JhcD1cInsgeHM6ICdub3dyYXAnLCBzbTogJ3dyYXAnLCBtZDogJ3dyYXAtcmV2ZXJzZScsIGxnOiAndW5zZXQnIH1cIj4uLi48L2Rpdj5cclxuICAgKiBAZGVmYXVsdFZhbHVlIGBub3dyYXBgXHJcbiAgICovXHJcbiAgcHVibGljIGZsZXhXcmFwID0gaW5wdXQ8RmlyZW5nRmxleFdyYXAgfCBGaXJlbmdSZXNwb25zaXZlTWFwPEZpcmVuZ0ZsZXhXcmFwPj4oXHJcbiAgICAnbm93cmFwJyxcclxuICAgIHsgYWxpYXM6ICdmaXJlRmxleFdyYXAnIH1cclxuICApO1xyXG5cclxuICBwcml2YXRlIHJlYWRvbmx5IHNjcmVlblNlcnZpY2UgPSBpbmplY3QoRmlyZW5nU2NyZWVuU2VydmljZSk7XHJcblxyXG4gIC8vIENvbXB1dGUgdGhlIGFjdGl2ZSBmbGV4IHdyYXAgYmFzZWQgb24gdGhlIGN1cnJlbnQgc2NyZWVuIHNpemVcclxuICBwcml2YXRlIHJlYWRvbmx5IGFjdGl2ZUZsZXhXcmFwID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgY29uc3Qgd3JhcCA9IHRoaXMuZmxleFdyYXAoKTtcclxuICAgIGlmICh0eXBlb2Ygd3JhcCA9PT0gJ3N0cmluZycpIHtcclxuICAgICAgcmV0dXJuIHdyYXA7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAvLyBSZXNvbHZlIHRoZSB2YWx1ZSBiYXNlZCBvbiB0aGUgY3VycmVudCBicmVha3BvaW50XHJcbiAgICAgIGNvbnN0IHJlc29sdmVkVmFsdWUgPSB0aGlzLnNjcmVlblNlcnZpY2UucmVzb2x2ZUJyZWFrcG9pbnRWYWx1ZShcclxuICAgICAgICB3cmFwLFxyXG4gICAgICAgICdub3dyYXAnIC8vIERlZmF1bHQgdmFsdWUgaWYgbm8gYnJlYWtwb2ludCBtYXRjaGVzXHJcbiAgICAgICk7XHJcbiAgICAgIHJldHVybiByZXNvbHZlZFZhbHVlKCk7XHJcbiAgICB9XHJcbiAgfSk7XHJcbn1cclxuIl19