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