@fireng/layout
Version:
Angular directives for responsive layout and visual adjustments using Fireng breakpoints.
67 lines • 9.01 kB
JavaScript
import { computed, Directive, inject, input } from '@angular/core';
import { FirengScreenService } from '@fireng/core';
import * as i0 from "@angular/core";
export class FirengDisplayDirective {
/**
* Defines the display type of an element, determining its layout behavior.
* Accepted values for display are:
* - `block`: The element generates a block-level box.
* - `inline`: The element generates an inline-level box.
* - `inline-block`: The element generates a block-level box that flows with surrounding content as if it were a single inline box.
* - `flex`: The element generates a block-level flex container.
* - `inline-flex`: The element generates an inline-level flex container.
* - `grid`: The element generates a block-level grid container.
* - `inline-grid`: The element generates an inline-level grid container.
* - `none`: The element and its descendants are hidden, and it takes up no space.
* - `contents`: The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes.
*
* Other accepted values include: `flow-root`, `block flex`, `block flow`, `block flow-root`,
* `block grid`, `inline flex`, `inline flow`, `inline flow-root`, `inline grid`,
* `table`, `table-row`, `list-item`.
*
* Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
*
* For more details on the display property, refer to the MDN documentation:
* @see [MDN - display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
*
* Can also be provided as a responsive map for different screen sizes.
* @example
* // Static usage:
* <div fireDisplay="flex">...</div>
* <span fireDisplay="inline-block">...</span>
* <div fireDisplay="block flex">...</div>
* <div fireDisplay="unset">...</div>
* // Responsive usage:
* <div fireDisplay="{ xs: 'block', sm: 'flex', md: 'inline-block', lg: 'none' }">...</div>
* @defaultValue 'inline'
*/
display = input('inline', {
alias: 'fireDisplay',
});
screenService = inject(FirengScreenService);
// Compute the active display based on the current screen size
activeDisplay = computed(() => {
const displayInput = this.display();
if (typeof displayInput === 'string') {
return displayInput;
}
else {
const resolvedValue = this.screenService.resolveBreakpointValue(displayInput, 'inline' // Default value if no breakpoint matches
);
return resolvedValue();
}
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FirengDisplayDirective, isStandalone: true, selector: "[fireDisplay]", inputs: { display: { classPropertyName: "display", publicName: "fireDisplay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "activeDisplay()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FirengDisplayDirective, decorators: [{
type: Directive,
args: [{
selector: '[fireDisplay]',
standalone: true,
host: {
'[style.display]': 'activeDisplay()',
},
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlyZW5nLWRpc3BsYXkuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGF5b3V0L3NyYy9saWIvYXRvbWljLWRpcmVjdGl2ZXMvZmlyZW5nLWRpc3BsYXkuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFbkUsT0FBTyxFQUF1QixtQkFBbUIsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7QUFTeEUsTUFBTSxPQUFPLHNCQUFzQjtJQUNqQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FnQ0c7SUFDSSxPQUFPLEdBQUcsS0FBSyxDQUNwQixRQUFRLEVBQ1I7UUFDRSxLQUFLLEVBQUUsYUFBYTtLQUNyQixDQUNGLENBQUM7SUFFTSxhQUFhLEdBQUcsTUFBTSxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFFcEQsOERBQThEO0lBQzdDLGFBQWEsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1FBQzdDLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUVwQyxJQUFJLE9BQU8sWUFBWSxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQ3JDLE9BQU8sWUFBWSxDQUFDO1FBQ3RCLENBQUM7YUFBTSxDQUFDO1lBQ04sTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxzQkFBc0IsQ0FDN0QsWUFBWSxFQUNaLFFBQVEsQ0FBQyx5Q0FBeUM7YUFDbkQsQ0FBQztZQUVGLE9BQU8sYUFBYSxFQUFFLENBQUM7UUFDekIsQ0FBQztJQUNILENBQUMsQ0FBQyxDQUFDO3dHQXpEUSxzQkFBc0I7NEZBQXRCLHNCQUFzQjs7NEZBQXRCLHNCQUFzQjtrQkFQbEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLElBQUksRUFBRTt3QkFDSixpQkFBaUIsRUFBRSxpQkFBaUI7cUJBQ3JDO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY29tcHV0ZWQsIERpcmVjdGl2ZSwgaW5qZWN0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGaXJlbmdEaXNwbGF5IH0gZnJvbSAnLi4vZmlyZW5nLnR5cGVzJztcclxuaW1wb3J0IHsgRmlyZW5nUmVzcG9uc2l2ZU1hcCwgRmlyZW5nU2NyZWVuU2VydmljZSB9IGZyb20gJ0BmaXJlbmcvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tmaXJlRGlzcGxheV0nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaG9zdDoge1xyXG4gICAgJ1tzdHlsZS5kaXNwbGF5XSc6ICdhY3RpdmVEaXNwbGF5KCknLFxyXG4gIH0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGaXJlbmdEaXNwbGF5RGlyZWN0aXZlIHtcclxuICAvKipcclxuICAgKiBEZWZpbmVzIHRoZSBkaXNwbGF5IHR5cGUgb2YgYW4gZWxlbWVudCwgZGV0ZXJtaW5pbmcgaXRzIGxheW91dCBiZWhhdmlvci5cclxuICAgKiBBY2NlcHRlZCB2YWx1ZXMgZm9yIGRpc3BsYXkgYXJlOlxyXG4gICAqIC0gYGJsb2NrYDogVGhlIGVsZW1lbnQgZ2VuZXJhdGVzIGEgYmxvY2stbGV2ZWwgYm94LlxyXG4gICAqIC0gYGlubGluZWA6IFRoZSBlbGVtZW50IGdlbmVyYXRlcyBhbiBpbmxpbmUtbGV2ZWwgYm94LlxyXG4gICAqIC0gYGlubGluZS1ibG9ja2A6IFRoZSBlbGVtZW50IGdlbmVyYXRlcyBhIGJsb2NrLWxldmVsIGJveCB0aGF0IGZsb3dzIHdpdGggc3Vycm91bmRpbmcgY29udGVudCBhcyBpZiBpdCB3ZXJlIGEgc2luZ2xlIGlubGluZSBib3guXHJcbiAgICogLSBgZmxleGA6IFRoZSBlbGVtZW50IGdlbmVyYXRlcyBhIGJsb2NrLWxldmVsIGZsZXggY29udGFpbmVyLlxyXG4gICAqIC0gYGlubGluZS1mbGV4YDogVGhlIGVsZW1lbnQgZ2VuZXJhdGVzIGFuIGlubGluZS1sZXZlbCBmbGV4IGNvbnRhaW5lci5cclxuICAgKiAtIGBncmlkYDogVGhlIGVsZW1lbnQgZ2VuZXJhdGVzIGEgYmxvY2stbGV2ZWwgZ3JpZCBjb250YWluZXIuXHJcbiAgICogLSBgaW5saW5lLWdyaWRgOiBUaGUgZWxlbWVudCBnZW5lcmF0ZXMgYW4gaW5saW5lLWxldmVsIGdyaWQgY29udGFpbmVyLlxyXG4gICAqIC0gYG5vbmVgOiBUaGUgZWxlbWVudCBhbmQgaXRzIGRlc2NlbmRhbnRzIGFyZSBoaWRkZW4sIGFuZCBpdCB0YWtlcyB1cCBubyBzcGFjZS5cclxuICAgKiAtIGBjb250ZW50c2A6IFRoZSBlbGVtZW50IGl0c2VsZiBkb2VzIG5vdCBnZW5lcmF0ZSBhbnkgYm94ZXMsIGJ1dCBpdHMgY2hpbGRyZW4gYW5kIHBzZXVkby1lbGVtZW50cyBzdGlsbCBnZW5lcmF0ZSBib3hlcy5cclxuICAgKlxyXG4gICAqIE90aGVyIGFjY2VwdGVkIHZhbHVlcyBpbmNsdWRlOiBgZmxvdy1yb290YCwgYGJsb2NrIGZsZXhgLCBgYmxvY2sgZmxvd2AsIGBibG9jayBmbG93LXJvb3RgLFxyXG4gICAqIGBibG9jayBncmlkYCwgYGlubGluZSBmbGV4YCwgYGlubGluZSBmbG93YCwgYGlubGluZSBmbG93LXJvb3RgLCBgaW5saW5lIGdyaWRgLFxyXG4gICAqIGB0YWJsZWAsIGB0YWJsZS1yb3dgLCBgbGlzdC1pdGVtYC5cclxuICAgKlxyXG4gICAqIEdsb2JhbCBDU1MgdmFsdWVzIGFyZSBhbHNvIGFjY2VwdGVkOiBgaW5oZXJpdGAsIGBpbml0aWFsYCwgYHVuc2V0YCwgYHJldmVydGAuXHJcbiAgICpcclxuICAgKiBGb3IgbW9yZSBkZXRhaWxzIG9uIHRoZSBkaXNwbGF5IHByb3BlcnR5LCByZWZlciB0byB0aGUgTUROIGRvY3VtZW50YXRpb246XHJcbiAgICogQHNlZSBbTUROIC0gZGlzcGxheV0oaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQ1NTL2Rpc3BsYXkpXHJcbiAgICpcclxuICAgKiBDYW4gYWxzbyBiZSBwcm92aWRlZCBhcyBhIHJlc3BvbnNpdmUgbWFwIGZvciBkaWZmZXJlbnQgc2NyZWVuIHNpemVzLlxyXG4gICAqIEBleGFtcGxlXHJcbiAgICogLy8gU3RhdGljIHVzYWdlOlxyXG4gICAqIDxkaXYgZmlyZURpc3BsYXk9XCJmbGV4XCI+Li4uPC9kaXY+XHJcbiAgICogPHNwYW4gZmlyZURpc3BsYXk9XCJpbmxpbmUtYmxvY2tcIj4uLi48L3NwYW4+XHJcbiAgICogPGRpdiBmaXJlRGlzcGxheT1cImJsb2NrIGZsZXhcIj4uLi48L2Rpdj5cclxuICAgKiA8ZGl2IGZpcmVEaXNwbGF5PVwidW5zZXRcIj4uLi48L2Rpdj5cclxuICAgKiAvLyBSZXNwb25zaXZlIHVzYWdlOlxyXG4gICAqIDxkaXYgZmlyZURpc3BsYXk9XCJ7IHhzOiAnYmxvY2snLCBzbTogJ2ZsZXgnLCBtZDogJ2lubGluZS1ibG9jaycsIGxnOiAnbm9uZScgfVwiPi4uLjwvZGl2PlxyXG4gICAqIEBkZWZhdWx0VmFsdWUgJ2lubGluZSdcclxuICAgKi9cclxuICBwdWJsaWMgZGlzcGxheSA9IGlucHV0PEZpcmVuZ0Rpc3BsYXkgfCBGaXJlbmdSZXNwb25zaXZlTWFwPEZpcmVuZ0Rpc3BsYXk+PihcclxuICAgICdpbmxpbmUnLFxyXG4gICAge1xyXG4gICAgICBhbGlhczogJ2ZpcmVEaXNwbGF5JyxcclxuICAgIH1cclxuICApO1xyXG5cclxuICBwcml2YXRlIHNjcmVlblNlcnZpY2UgPSBpbmplY3QoRmlyZW5nU2NyZWVuU2VydmljZSk7XHJcblxyXG4gIC8vIENvbXB1dGUgdGhlIGFjdGl2ZSBkaXNwbGF5IGJhc2VkIG9uIHRoZSBjdXJyZW50IHNjcmVlbiBzaXplXHJcbiAgcHJpdmF0ZSByZWFkb25seSBhY3RpdmVEaXNwbGF5ID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgY29uc3QgZGlzcGxheUlucHV0ID0gdGhpcy5kaXNwbGF5KCk7XHJcblxyXG4gICAgaWYgKHR5cGVvZiBkaXNwbGF5SW5wdXQgPT09ICdzdHJpbmcnKSB7XHJcbiAgICAgIHJldHVybiBkaXNwbGF5SW5wdXQ7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICBjb25zdCByZXNvbHZlZFZhbHVlID0gdGhpcy5zY3JlZW5TZXJ2aWNlLnJlc29sdmVCcmVha3BvaW50VmFsdWUoXHJcbiAgICAgICAgZGlzcGxheUlucHV0LFxyXG4gICAgICAgICdpbmxpbmUnIC8vIERlZmF1bHQgdmFsdWUgaWYgbm8gYnJlYWtwb2ludCBtYXRjaGVzXHJcbiAgICAgICk7XHJcblxyXG4gICAgICByZXR1cm4gcmVzb2x2ZWRWYWx1ZSgpO1xyXG4gICAgfVxyXG4gIH0pO1xyXG59XHJcbiJdfQ==