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