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