@fireng/layout
Version:
Angular directives for responsive layout and visual adjustments using Fireng breakpoints.
68 lines • 8.39 kB
JavaScript
import { computed, Directive, inject, input } from '@angular/core';
import { FirengScreenService } from '@fireng/core';
import * as i0 from "@angular/core";
export class FirengStyleDirective {
/**
* Applies dynamic and responsive custom CSS styles directly to the host element,
* providing fine-grained control over any valid CSS property.
*
* This input accepts a plain JavaScript object (a map) where:
* - Keys are standard CSS property names in **camelCase** (e.g., `backgroundColor`, `fontSize`, `padding`, `borderLeft`).
*
* Values for these properties can be:
* - A static CSS value string (e.g., `'red'`, `'10px'`, `'flex'`, `'inherit'`).
* - A `FirengResponsiveMap<string>` object for breakpoint-specific styling (e.g., `{ xs: '16px', sm: '24px' }`).
*
* This allows for highly flexible styling, supporting any CSS property that can be set via
* an element's `style` attribute, including global CSS values for individual properties.
*
* @example
* // Applying various custom styles, including a responsive font size:
* <span
* [fireStyle]="{
* color: 'white',
* backgroundColor: '#007bff',
* fontSize: { xs: '16px', sm: '24px' }, // Responsive value for fontSize
* padding: '10px 20px',
* borderRadius: '5px'
* }"
* >
* Responsive Text
* </span>
* @defaultValue `{}`
*/
style = input({}, { alias: 'fireStyle' });
screenService = inject(FirengScreenService);
// Compute the active style based on the current screen size
activeStyle = computed(() => {
const styleInput = this.style();
if (!styleInput || typeof styleInput !== 'object') {
return {};
}
return Object.fromEntries(Object.entries(styleInput).reduce((acc, [prop, val]) => {
if (typeof val === 'string') {
acc.push([prop, val]);
}
else {
const resolved = this.screenService.resolveBreakpointValue(val)();
if (resolved) {
acc.push([prop, resolved]);
}
}
return acc;
}, []));
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengStyleDirective, isStandalone: true, selector: "[fireStyle]", inputs: { style: { classPropertyName: "style", publicName: "fireStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "activeStyle()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengStyleDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireStyle]',
standalone: true,
host: {
'[style]': 'activeStyle()',
},
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlyZW5nLXN0eWxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2xheW91dC9zcmMvbGliL3ByaW1hcnktZGlyZWN0aXZlL2ZpcmVuZy1zdHlsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxjQUFjLENBQUM7O0FBVW5ELE1BQU0sT0FBTyxvQkFBb0I7SUFDL0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0E0Qkc7SUFDSSxLQUFLLEdBQUcsS0FBSyxDQUFjLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsQ0FBQyxDQUFDO0lBRTdDLGFBQWEsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQztJQUU3RCw0REFBNEQ7SUFDM0MsV0FBVyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDM0MsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxVQUFVLElBQUksT0FBTyxVQUFVLEtBQUssUUFBUSxFQUFFLENBQUM7WUFDbEQsT0FBTyxFQUFFLENBQUM7UUFDWixDQUFDO1FBRUQsT0FBTyxNQUFNLENBQUMsV0FBVyxDQUN2QixNQUFNLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDLE1BQU0sQ0FDL0IsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLEVBQUUsR0FBRyxDQUFDLEVBQUUsRUFBRTtZQUNuQixJQUFJLE9BQU8sR0FBRyxLQUFLLFFBQVEsRUFBRSxDQUFDO2dCQUM1QixHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDeEIsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLE1BQU0sUUFBUSxHQUNaLElBQUksQ0FBQyxhQUFhLENBQUMsc0JBQXNCLENBQVMsR0FBRyxDQUFDLEVBQUUsQ0FBQztnQkFDM0QsSUFBSSxRQUFRLEVBQUUsQ0FBQztvQkFDYixHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUM7Z0JBQzdCLENBQUM7WUFDSCxDQUFDO1lBQ0QsT0FBTyxHQUFHLENBQUM7UUFDYixDQUFDLEVBQ0QsRUFBRSxDQUNILENBQ0YsQ0FBQztJQUNKLENBQUMsQ0FBQyxDQUFDO3dHQTFEUSxvQkFBb0I7NEZBQXBCLG9CQUFvQjs7NEZBQXBCLG9CQUFvQjtrQkFQaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLElBQUksRUFBRTt3QkFDSixTQUFTLEVBQUUsZUFBZTtxQkFDM0I7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjb21wdXRlZCwgRGlyZWN0aXZlLCBpbmplY3QsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEZpcmVuZ1NjcmVlblNlcnZpY2UgfSBmcm9tICdAZmlyZW5nL2NvcmUnO1xyXG5pbXBvcnQgeyBGaXJlbmdTdHlsZSB9IGZyb20gJy4uL2ZpcmVuZy50eXBlcyc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tmaXJlU3R5bGVdJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGhvc3Q6IHtcclxuICAgICdbc3R5bGVdJzogJ2FjdGl2ZVN0eWxlKCknLFxyXG4gIH0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGaXJlbmdTdHlsZURpcmVjdGl2ZSB7XHJcbiAgLyoqXHJcbiAgICogQXBwbGllcyBkeW5hbWljIGFuZCByZXNwb25zaXZlIGN1c3RvbSBDU1Mgc3R5bGVzIGRpcmVjdGx5IHRvIHRoZSBob3N0IGVsZW1lbnQsXHJcbiAgICogcHJvdmlkaW5nIGZpbmUtZ3JhaW5lZCBjb250cm9sIG92ZXIgYW55IHZhbGlkIENTUyBwcm9wZXJ0eS5cclxuICAgKlxyXG4gICAqIFRoaXMgaW5wdXQgYWNjZXB0cyBhIHBsYWluIEphdmFTY3JpcHQgb2JqZWN0IChhIG1hcCkgd2hlcmU6XHJcbiAgICogLSBLZXlzIGFyZSBzdGFuZGFyZCBDU1MgcHJvcGVydHkgbmFtZXMgaW4gKipjYW1lbENhc2UqKiAoZS5nLiwgYGJhY2tncm91bmRDb2xvcmAsIGBmb250U2l6ZWAsIGBwYWRkaW5nYCwgYGJvcmRlckxlZnRgKS5cclxuICAgKlxyXG4gICAqIFZhbHVlcyBmb3IgdGhlc2UgcHJvcGVydGllcyBjYW4gYmU6XHJcbiAgICogLSBBIHN0YXRpYyBDU1MgdmFsdWUgc3RyaW5nIChlLmcuLCBgJ3JlZCdgLCBgJzEwcHgnYCwgYCdmbGV4J2AsIGAnaW5oZXJpdCdgKS5cclxuICAgKiAtIEEgYEZpcmVuZ1Jlc3BvbnNpdmVNYXA8c3RyaW5nPmAgb2JqZWN0IGZvciBicmVha3BvaW50LXNwZWNpZmljIHN0eWxpbmcgKGUuZy4sIGB7IHhzOiAnMTZweCcsIHNtOiAnMjRweCcgfWApLlxyXG4gICAqXHJcbiAgICogVGhpcyBhbGxvd3MgZm9yIGhpZ2hseSBmbGV4aWJsZSBzdHlsaW5nLCBzdXBwb3J0aW5nIGFueSBDU1MgcHJvcGVydHkgdGhhdCBjYW4gYmUgc2V0IHZpYVxyXG4gICAqIGFuIGVsZW1lbnQncyBgc3R5bGVgIGF0dHJpYnV0ZSwgaW5jbHVkaW5nIGdsb2JhbCBDU1MgdmFsdWVzIGZvciBpbmRpdmlkdWFsIHByb3BlcnRpZXMuXHJcbiAgICpcclxuICAgKiBAZXhhbXBsZVxyXG4gICAqIC8vIEFwcGx5aW5nIHZhcmlvdXMgY3VzdG9tIHN0eWxlcywgaW5jbHVkaW5nIGEgcmVzcG9uc2l2ZSBmb250IHNpemU6XHJcbiAgICogPHNwYW5cclxuICAgKiBbZmlyZVN0eWxlXT1cIntcclxuICAgKiBjb2xvcjogJ3doaXRlJyxcclxuICAgKiBiYWNrZ3JvdW5kQ29sb3I6ICcjMDA3YmZmJyxcclxuICAgKiBmb250U2l6ZTogeyB4czogJzE2cHgnLCBzbTogJzI0cHgnIH0sIC8vIFJlc3BvbnNpdmUgdmFsdWUgZm9yIGZvbnRTaXplXHJcbiAgICogcGFkZGluZzogJzEwcHggMjBweCcsXHJcbiAgICogYm9yZGVyUmFkaXVzOiAnNXB4J1xyXG4gICAqIH1cIlxyXG4gICAqID5cclxuICAgKiBSZXNwb25zaXZlIFRleHRcclxuICAgKiA8L3NwYW4+XHJcbiAgICogQGRlZmF1bHRWYWx1ZSBge31gXHJcbiAgICovXHJcbiAgcHVibGljIHN0eWxlID0gaW5wdXQ8RmlyZW5nU3R5bGU+KHt9LCB7IGFsaWFzOiAnZmlyZVN0eWxlJyB9KTtcclxuXHJcbiAgcHJpdmF0ZSByZWFkb25seSBzY3JlZW5TZXJ2aWNlID0gaW5qZWN0KEZpcmVuZ1NjcmVlblNlcnZpY2UpO1xyXG5cclxuICAvLyBDb21wdXRlIHRoZSBhY3RpdmUgc3R5bGUgYmFzZWQgb24gdGhlIGN1cnJlbnQgc2NyZWVuIHNpemVcclxuICBwcml2YXRlIHJlYWRvbmx5IGFjdGl2ZVN0eWxlID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgY29uc3Qgc3R5bGVJbnB1dCA9IHRoaXMuc3R5bGUoKTtcclxuICAgIGlmICghc3R5bGVJbnB1dCB8fCB0eXBlb2Ygc3R5bGVJbnB1dCAhPT0gJ29iamVjdCcpIHtcclxuICAgICAgcmV0dXJuIHt9O1xyXG4gICAgfVxyXG5cclxuICAgIHJldHVybiBPYmplY3QuZnJvbUVudHJpZXMoXHJcbiAgICAgIE9iamVjdC5lbnRyaWVzKHN0eWxlSW5wdXQpLnJlZHVjZTxbc3RyaW5nLCBzdHJpbmddW10+KFxyXG4gICAgICAgIChhY2MsIFtwcm9wLCB2YWxdKSA9PiB7XHJcbiAgICAgICAgICBpZiAodHlwZW9mIHZhbCA9PT0gJ3N0cmluZycpIHtcclxuICAgICAgICAgICAgYWNjLnB1c2goW3Byb3AsIHZhbF0pO1xyXG4gICAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgY29uc3QgcmVzb2x2ZWQgPVxyXG4gICAgICAgICAgICAgIHRoaXMuc2NyZWVuU2VydmljZS5yZXNvbHZlQnJlYWtwb2ludFZhbHVlPHN0cmluZz4odmFsKSgpO1xyXG4gICAgICAgICAgICBpZiAocmVzb2x2ZWQpIHtcclxuICAgICAgICAgICAgICBhY2MucHVzaChbcHJvcCwgcmVzb2x2ZWRdKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgfVxyXG4gICAgICAgICAgcmV0dXJuIGFjYztcclxuICAgICAgICB9LFxyXG4gICAgICAgIFtdXHJcbiAgICAgIClcclxuICAgICk7XHJcbiAgfSk7XHJcbn1cclxuIl19