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